okLCH Palette

style.css

:root {
  --hue: 243.040;

  --swatch-1: oklch(97.1% 0.02 var(--hue));
  --swatch-2: oklch(87.24% 0.07 var(--hue));
  --swatch-3: oklch(77.61% 0.1 var(--hue));
  --swatch-4: oklch(67.84% 0.1 var(--hue));
  --swatch-5: oklch(58.14% .1 var(--hue));
  --swatch-6: oklch(48.38% 0.11 var(--hue)); /* #166496 - oklch(48.36% 0.107 243.04)*/
  --swatch-7: oklch(42.83% .1 var(--hue));
  --swatch-8: oklch(35.66% .09 var(--hue));
  --swatch-9: oklch(27.82% .07 var(--hue));
  --swatch-10: oklch(20.91% .05 var(--hue));

  --text-1: var(--swatch-1);
  --text-2: var(--swatch-2);
  --surface-1: var(--swatch-10);
  --surface-2: var(--swatch-9);
  --surface-3: var(--swatch-8);
}

@media (prefers-color-scheme: light) {
  :root {
    --text-1: var(--swatch-10);
    --text-2: var(--swatch-9);
    --surface-1: var(--swatch-1);
    --surface-2: var(--swatch-2);
    --surface-3: var(--swatch-3);
  }
}