body {
font: 100%/1.5 Helvetica Neue, Segoe UI, sans-serif;
--l: 50%;
}
header {
margin-bottom: 1em;
}
div {
width: 100%;
height: 6em;
background: linear-gradient(to right, var(--stops));
--stops: gray, gray;
}
.hsl {
--s: 50%;
--stops: hsl(0 var(--s) var(--l)),
hsl(60 var(--s) var(--l)),
hsl(120 var(--s) var(--l)),
hsl(180 var(--s) var(--l)),
hsl(240 var(--s) var(--l)),
hsl(300 var(--s) var(--l));
}
.lch {
--c: 50;
--stops: lch(var(--l) var(--c) 0),
lch(var(--l) var(--c) 60),
lch(var(--l) var(--c) 120),
lch(var(--l) var(--c) 180),
lch(var(--l) var(--c) 240),
lch(var(--l) var(--c) 300);
}