:root {
  --second-hue: 215;
  --second-colour: hsl(var(--second-hue), 97%, 54%);
  --c0: color-mix(in oklch, #eafb03, var(--second-colour) 0%);
  --c1: color-mix(in oklch, #eafb03, var(--second-colour) 10%);
  --c2: color-mix(in oklch, #eafb03, var(--second-colour) 20%);
  --c3: color-mix(in oklch, #eafb03, var(--second-colour) 30%);
  --c4: color-mix(in oklch, #eafb03, var(--second-colour) 40%);
  --c5: color-mix(in oklch, #eafb03, var(--second-colour) 50%);
  --c6: color-mix(in oklch, #eafb03, var(--second-colour) 60%);
  --c7: color-mix(in oklch, #eafb03, var(--second-colour) 70%);
  --c8: color-mix(in oklch, #eafb03, var(--second-colour) 80%);
  --c9: color-mix(in oklch, #eafb03, var(--second-colour) 90%);
  --c10: color-mix(in oklch, #eafb03, var(--second-colour) 100%);
  accent-color: var(--second-colour);
}

@property --black-percent {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}
.colour-mix {
  height: 200px;
  background-color: color-mix(in oklch, red, black var(--black-percent));
  display: grid;
  place-content: center;
}

.colours {
  display: flex;
  height: 200px;
}

.colour {
  flex: 1;
}

.c0 {
  background-color: var(--c0);
}

.c1 {
  background-color: var(--c1);
}

.c2 {
  background-color: var(--c2);
}

.c3 {
  background-color: var(--c3);
}

.c4 {
  background-color: var(--c4);
}

.c5 {
  background-color: var(--c5);
}

.c6 {
  background-color: var(--c6);
}

.c7 {
  background-color: var(--c7);
}

.c8 {
  background-color: var(--c8);
}

.c9 {
  background-color: var(--c9);
}

.c10 {
  background-color: var(--c10);
  display: grid;
  place-content: center;
}

.slider {
  width: 100%;
  margin: 3em 0;
}