OKLCH Scale Builder

v1.0.0

Perceptual scale builder — pick a base colour, generate evenly spaced lightness ramps.

Scale name

Hue (0-360)

Chroma (0-0.4)

Steps

OKLCH Color Scale

:root {
  --brand-10: oklch(98.0% 0.150 250);
  --brand-20: oklch(88.2% 0.150 250);
  --brand-30: oklch(78.4% 0.150 250);
  --brand-40: oklch(68.7% 0.150 250);
  --brand-50: oklch(58.9% 0.150 250);
  --brand-60: oklch(49.1% 0.150 250);
  --brand-70: oklch(39.3% 0.150 250);
  --brand-80: oklch(29.6% 0.150 250);
  --brand-90: oklch(19.8% 0.150 250);
  --brand-100: oklch(10.0% 0.150 250);
}

/* OKLCH benefits: perceptually uniform lightness steps, wide gamut support */
/* Hue 250° = blue */