<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

div {
  background: hsl(
    var(--H),
    var(--S),
    var(--L)
  )
}
div:nth-child(2) {
  background: hsl(
    calc(var(--H) + 50),
    var(--S),
    var(--L)
  )
}
div:nth-child(3) {
  background: hsl(
    calc(var(--H) + 100),
    var(--S),
    var(--L)
  )
}
div:nth-child(4) {
  background: hsl(
    calc(var(--H) + 150),
    var(--S),
    var(--L)
  )
}
div:nth-child(5) {
  background: hsl(
    calc(var(--H) + 200),
    var(--S),
    var(--L)
  )
}

div:nth-child(6) {
  background: hsl(
    var(--H),
    calc(var(--S)),
    var(--L)
  )
}

div:nth-child(7) {
  background: hsl(
    var(--H),
    calc(var(--S) - 20%),
    var(--L)
  )
}
div:nth-child(8) {
  background: hsl(
    var(--H),
    calc(var(--S) - 40%),
    var(--L)
  )
}

div:nth-child(9) {
  background: hsl(
    var(--H),
    calc(var(--S) - 60%),
    var(--L)
  )
}

div:nth-child(10) {
  background: hsl(
    var(--H),
    calc(var(--S) - 80%),
    var(--L)
  )
}

div:nth-child(11) {
  background: hsl(
    var(--H),
    var(--S),
    var(--L)
  )
}

div:nth-child(12) {
  background: hsl(
    var(--H),
    var(--S),
    calc(var(--L) - 20%)
  )
}

div:nth-child(13) {
  background: hsl(
    var(--H),
    var(--S),
    calc(var(--L) - 40%)
  )
}

div:nth-child(14) {
  background: hsl(
    var(--H),
    var(--S),
    calc(var(--L) + 20%)
  )
}

div:nth-child(15) {
  background: hsl(
    var(--H),
    var(--S),
    calc(var(--L) + 40%)
  )
}




div {
  width: 100px;
  height: 100px;
}
body {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-gap: 1rem;
}