:root {
  --red-1: oklch(50% 0.05 15);
  --red-2: oklch(50% 0.10 15);
  --red-3: oklch(50% 0.15 15);
  --red-4: oklch(50% 0.20 15);
  --red-5: oklch(50% 0.25 15);
  --red-6: oklch(50% 0.30 15);
  --red-7: oklch(50% 0.35 15);
  --red-8: oklch(50% 0.40 15);
  --red-9: oklch(50% 0.45 15);
}

div:nth-of-type(1) {
  background: var(--red-1);
}

div:nth-of-type(2) {
  background: var(--red-2);
}

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

div:nth-of-type(4) {
  background: var(--red-4);
}

div:nth-of-type(5) {
  background: var(--red-5);
}

div:nth-of-type(6) {
  background: var(--red-6);
}

div:nth-of-type(7) {
  background: var(--red-7);
}

div:nth-of-type(8) {
  background: var(--red-8);
}

div:nth-of-type(9) {
  background: var(--red-9);
}

div {
  height: 30px;
}