Controls
Chroma field
Drag the anchor star or satellites on the OKLab a*b* chroma plane. Line labels show perceptual ΔE.
Sample heading
Body text on palette background
1.16:1 · Fail
The science
Colors are generated and compared in OKLab, a perceptually uniform color space (Björn Ottosson). Distance labels show ΔE_OK — how different two colors appear to the human eye.
Orbit mode maximizes discriminability (inspired by Colorgorical, Brown University). Journey interpolates smoothly in OKLab. Harmony uses evenly spaced hue clusters (rectangular palette research, PMC9518642). Accessible starts from the Okabe-Ito colorblind-safe set.
Export
:root {
--constellation-1: #2F92F0;
--constellation-2: #D66F25;
--constellation-3: #22A966;
--constellation-4: #CB64AE;
--constellation-5: #9A9400;
} 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
- Pick an anchor color and choose a mode: Orbit, Journey, Harmony, or Accessible.
- Adjust palette size, lightness range, and chroma intensity with the sliders.
- Drag anchor or satellite dots on the chroma field to fine-tune individual colors.
- Check the harmony meter and preview cards to see colors on realistic UI surfaces.
- 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
What is OKLab?
OKLab is a perceptually uniform color space. Equal steps in lightness or chroma produce changes that look equally significant to the human eye, unlike RGB or HSL.
What does ΔE mean?
ΔE is perceptual color difference. Higher values between two palette colors mean they are easier to distinguish in real interfaces.
Can I share my palette?
Yes. Copy share link — the URL encodes your anchor, mode, and slider settings so anyone can reopen the same palette.
Does it replace a design tool?
It complements Figma or Sketch by generating mathematically spaced palettes you can paste into any workflow.