Skip to content

Generate

A color palette in OKLCH from one base color. Set it with the controls or type a hex value, then copy one color or the whole scale.

Settings

Base
%

sRGB reaches 0.206 at this lightness and hue; past it, the base is shown mapped.

°
Scale and output
%
%

Auto: a neutral runs darker than a colour, as in Tailwind and Radix.

Hue drift
°

A further turn across the whole scale, on top of any drift.

blue11 colors

  1. 1.06Fail
  2. 1.14Fail
  3. 1.3Fail
  4. 1.58Fail
  5. 2.09Fail
  6. 2.69Fail
  7. 3.76AA Large· P3 only
  8. 5.5AA
  9. 7.71AAA
  10. 9.85AAA
  11. 15.53AAA

Under each color: its WCAG 2 contrast with white — as text on white, or white text on it.

Export

Export format
:root {
  --blue-50: oklch(98% 0.01 256.13);
  --blue-100: oklch(95.48% 0.022 256.13);
  --blue-200: oklch(91.17% 0.043 256.15);
  --blue-300: oklch(85.01% 0.075 256.29);
  --blue-400: oklch(76.78% 0.12 256.84);
  --blue-500: oklch(70.02% 0.158 257.76);
  --blue-600: oklch(62% 0.208 259.6);
  --blue-700: oklch(52.96% 0.202 261.66);
  --blue-800: oklch(45.38% 0.202 262.57);
  --blue-900: oklch(39.79% 0.199 262.9);
  --blue-950: oklch(27% 0.137 263.07);
}