- var n = 0;

while ++n < 500
	div
View Compiled
div {
	display: inline-block;
	padding: 1em;
	background: hsl(var(--hue) var(--sat) var(--l));
}

div:nth-child(5n    ) { --l: 35%; }
div:nth-child(5n + 1) { --l: 50%; }
div:nth-child(5n + 2) { --l: 65%; }
div:nth-child(5n + 3) { --l: 80%; }
div:nth-child(5n + 4) { --l: 90%; }

div:nth-child(7n    ) { --sat: 100%; }
div:nth-child(7n + 1) { --sat: 85%; }
div:nth-child(7n + 2) { --sat: 70%; }
div:nth-child(7n + 3) { --sat: 55%; }
div:nth-child(7n + 4) { --sat: 40%; }
div:nth-child(7n + 5) { --sat: 25%; }
div:nth-child(7n + 6) { --sat: 10%; }

div:nth-child(11n    ) { --hue: 32; }
div:nth-child(11n + 1) { --hue: 64; }
div:nth-child(11n + 2) { --hue: 96; }
div:nth-child(11n + 3) { --hue: 128; }
div:nth-child(11n + 4) { --hue: 160; }
div:nth-child(11n + 5) { --hue: 192; }
div:nth-child(11n + 6) { --hue: 224; }
div:nth-child(11n + 7) { --hue: 256; }
div:nth-child(11n + 8) { --hue: 288; }
div:nth-child(11n + 9) { --hue: 320; }
div:nth-child(11n + 10) { --hue: 352; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.