Chroma Constellation — OKLab Palette Guide

What it does

Chroma Constellation generates color palettes in perceptual OKLab space, where distances between colors match how humans actually see them. Colors appear as satellites on a chroma field with ΔE distance labels showing how distinguishable each pair is. Export CSS variables, Tailwind config, JSON, or SVG swatches — all processing runs locally in your browser.

When to use it

• Building brand or product color systems from a single anchor hue
• Creating chart or dashboard color sets that must stay distinguishable at a glance
• Designing accessible UI palettes with science-backed spacing between shades
• Exporting design tokens for CSS, Tailwind, or design handoff documents
• Exploring harmonious variations before committing colors in Figma or code

How to use it

1. Pick an anchor color and choose a mode: Orbit, Journey, Harmony, or Accessible.
2. Adjust palette size, lightness range, and chroma intensity with the sliders.
3. Drag anchor or satellite dots on the chroma field to fine-tune individual colors.
4. Check the harmony meter and preview cards to see colors on realistic UI surfaces.
5. Export your palette as CSS variables, Tailwind config, JSON, or SVG, or copy a share link.

Tips

• Start in Accessible mode when building UI text and background pairs — it biases toward readable contrast.
• Watch ΔE labels between neighbors: values above roughly 2–3 mean colors are easy to tell apart.
• Use Journey mode for sequential scales like heatmaps or progress indicators.
• Import a Chroma share URL into the Contrast Checker to validate specific pairs against WCAG.

FAQ