What formats can I export OKLCH palettes to?

ColorBox exports OKLCH palettes to CSS custom properties, Tailwind CSS config, Figma (via plugin), JSON tokens, and raw color values in HEX, RGB, HSL, and OKLCH formats.

Built for Lyft·Now free for everyone

The perceptually uniform palette generator

Generate harmonious color scales using OKLCH. Equal numeric steps produce equal visual changes—no more muddy midpoints.

Try OKLCH generatorFree forever · No account needed

Live Preview

Enter a seed color

100

200

300

400

500

600

700

800

Customize curves, check contrast, export anywhere

Open Editor

See the difference

Each step represents an equal perceived brightness change. Click any color to copy its hex value.

L:95

L:85

L:75

L:65

L:55

L:45

L:35

L:25

L:15

OKLCH lightness produces visually uniform steps from light to dark

What is OKLCH?

A perceptually uniform color space with three meaningful dimensions.

L — Lightness

0–100%

Accurately reflects perceived brightness. 50% in OKLCH looks like 50% to human eyes.

C — Chroma

Color intensity

Independent of lightness. Increase saturation without changing perceived brightness.

H — Hue

0–360°

Color angle on the wheel. Rotate through the spectrum while keeping L and C stable.

Why OKLCH beats HSL

In HSL, "50% lightness" looks completely different across hues. OKLCH solves this.

The problem with HSL

HSL Yellow (L: 50%)

Appears bright

HSL Blue (L: 50%)

Appears dark

Same lightness value, completely different perceived brightness

No muddy midpoints

Gradients look natural because interpolation follows human perception

Predictable contrast

Lightness values directly correlate with accessibility requirements

Harmonious scales

Colors look balanced because they share the same perceived lightness

Native CSS support

Modern browsers support the oklch() function natively

How ColorBox uses OKLCH

A curve-based approach to palette generation.

Bezier curve controls

Fine-tune how lightness, chroma, and hue interpolate across your palette with custom easing.

Real-time preview

See your colors update instantly as you adjust parameters. No waiting, no guessing.

Accessibility checking

Built-in WCAG 2.1 contrast ratio display for every color combination in your palette.

Export anywhere

CSS variables, Tailwind config, Figma tokens, or raw JSON—works with your workflow.

Ready to build with OKLCH?Get started free

Export formats

Works with your existing tools and workflow.

CSS Custom Properties

Ready-to-use --color-primary-500 variables

Tailwind CSS

Drop into your tailwind.config.js

Figma Plugin

Import directly into Figma files

JSON Tokens

Design token format for build systems

Common questions

What is OKLCH color space?

OKLCH is a perceptually uniform color space where L represents lightness (0-100%), C represents chroma (color intensity), and H represents hue (0-360 degrees). Unlike HSL, equal numeric changes produce equal perceived visual changes.

Why use OKLCH for color palettes?

OKLCH produces more harmonious palettes because it's perceptually uniform. Gradients look natural without muddy midpoints, and accessibility contrast calculations are more predictable since lightness values accurately reflect perceived brightness.

Is ColorBox free?

Yes, ColorBox is completely free to use with no account required. It's also open source.