Apply different colours to posts

I would really appreciate some help!

I would like to have posts with three different coloured backgrounds.

For example –
Post 1 – Blue
Post 2 – Red
Post 3 – Green
Post 4 – Blue
Post 5 – Red
etc.

I am achieving this by using css.

.post:nth-of-type(3n+1) {
			background: blue;
		}
.post:nth-of-type(3n+2)  {
			background: red;
		}
.post:nth-of-type(3n+3) {
			background: green;
		}

This works fine, but now I want the background of the full post to match the colour of the post excerpt on the homepage.

I feel like this could be done using CSS, the body class (I don’t want to target the specific post numbers as many will be added over time) or maybe a php function but so far the only way I can make it work is to use jQuery and the colour loads after the rest of the content, which isn’t ideal. There is also an issue with this solution as if someone shares a link to the post directly the colour won’t be applied as the .post excerpt hasn’t been clicked on!

jQuery('.blog .post').click(function() {
    localStorage.setItem('newsColor', jQuery(this).css('backgroundColor'));
});
jQuery('.single').css("backgroundColor", localStorage.getItem('writColor'));

Thanks!