Trying to Create Sequential Color Pattern with CSS

I'm trying to create a color pattern that looks something like this https://snipboard.io/po6jrn.jpg that isn't just simply:

li:nth-of-type(1) {
   background: blue;
}

li:nth-of-type(2) {
   background: dark-blue;
}

li:nth-of-type(3) {
   background: red;
}

[...]

Ideally, I'd like to be able to structure the CSS in a way that manages the color pattern automatically for an unknown amount of dynamic elements.

I've been getting close in my tests, but I can't seem to get the color pattern exactly the way I want it. See my Fiddle: http://jsfiddle.net/MaxxSkywalker/v0xpub7e/4/