How to Build an Accessible Color Palette with OKLab

Human vision does not perceive hue, saturation, and lightness the way HSL suggests. OKLab is a perceptually uniform color space — equal steps in OKLab correspond more closely to equal steps in how we see color.

Why OKLab for palettes

Traditional color wheel tools pick hues at equal angles. That can produce palettes where some pairs look similar and others clash. OKLab-based generators like Chroma Constellation optimize for perceptual distance (ΔE) so each color is distinguishable.

A practical workflow

1. Open Chroma Constellation and pick an anchor brand color. 2. Choose Orbit mode for maximum discriminability or Accessible for colorblind-safe bases. 3. Export CSS custom properties or Tailwind config. 4. Open the WCAG Contrast Checker and import your palette to verify text/background pairs meet AA or AAA.

When to use each mode

- Orbit — dashboards, charts, and UI with many distinct accents. - Journey — smooth gradients and sequential data visualization. - Harmony — brand-adjacent marketing pages with controlled hue spread. - Accessible — products that must work for protanopia, deuteranopia, and tritanopia.

Read the full Chroma Constellation guide for step-by-step instructions.