ONE COLOR. A WHOLE SYSTEM.
OKLCH color
scale generator.
Create an 11-step color scale from a brand HEX color. Inspect OKLCH values and text contrast, then export CSS variables, Tailwind v4 or JSON.
Click a shade to copy it. Your starting color defines the hue and chroma; it is not forced into the 500 slot.
| Token | HEX | OKLCH | On white | On black |
|---|---|---|---|---|
| color-50 | #F8F7FF | oklch(97.92% 0.0106 291.96) | 1.06:1 | 19.74:1 |
| color-100 | #EEECFF | oklch(95.02% 0.0255 290.75) | 1.16:1 | 18.08:1 |
| color-200 | #DAD5FF | oklch(89.04% 0.0575 290.64) | 1.41:1 | 14.94:1 |
| color-300 | #C0B6FF | oklch(81.07% 0.1023 290.20) | 1.85:1 | 11.38:1 |
| color-400 | #A596EE | oklch(72.09% 0.1264 290.69) | 2.56:1 | 8.20:1 |
| color-500 | #8A78D8 | oklch(63.12% 0.1413 290.38) | 3.65:1 | 5.76:1 |
| color-600 | #705BBD | oklch(53.97% 0.1480 290.43) | 5.36:1 | 3.92:1 |
| color-700 | #5840A0 | oklch(45.03% 0.1488 290.70) | 7.91:1 | 2.66:1 |
| color-800 | #40277F | oklch(35.89% 0.1403 290.63) | 11.57:1 | 1.81:1 |
| color-900 | #2A105D | oklch(26.95% 0.1254 290.79) | 15.78:1 | 1.33:1 |
| color-950 | #17003E | oklch(18.87% 0.1066 290.32) | 18.99:1 | 1.11:1 |
Perceptual lightness is a design aid, not an accessibility guarantee. Test the pairs you use →
FROM A COLOR TO A CLEAR DECISION
Turn one color into eleven useful shades
The OKLCH color scale generator creates steps 50–950 from a starting color. It varies perceptual lightness, tapers chroma and maps colors into sRGB, with HEX values and black/white contrast shown for every step.
How to use this tool
- Enter a starting HEX color or choose a color from your current palette.
- Inspect all eleven shades and their contrast on black and white. The starting color defines hue and chroma; it is not forced into step 500.
- Copy CSS, copy a Tailwind v4 @theme scale, or download JSON. Apply semantic roles in your own components and check the resulting pairs.
How the scale handles lightness and gamut
The scale uses fixed OKLCH lightness targets from 98% to 19%. Chroma tapers toward light and dark ends. When a requested shade falls outside sRGB, Palunio reduces chroma while holding requested lightness and hue steady, then quantizes to 8-bit HEX.
This approach avoids independently clipping RGB channels, but it is not a promise of identical perceived spacing in every viewing condition. It also does not preserve your starting HEX at a guaranteed step. Keep that exact color as a separate brand token when fidelity matters.
A blue brand scale, ready to inspect
Try #1E4FCF, compare the eleven output shades, and check which foregrounds are readable. A token label such as “500” is a convention, not an accessibility level.
Method reference: Björn Ottosson: the OKLab color space. Read all calculation methods and limitations.
Common questions
Why is my input color not exactly the 500 shade?
The generator derives hue and chroma from your input and applies predefined lightness targets. It does not anchor the original HEX to a step. Keep the original as a separate brand token when needed.
Does OKLCH guarantee accessibility?
No. Perceptual lightness helps construct a scale, but WCAG contrast is calculated from the actual sRGB foreground and background. Test the combinations you use.
Can I use the scale with Tailwind CSS v4?
Yes. Copy Tailwind v4 exports an @theme block with --color-brand-50 through --color-brand-950. Add it after your Tailwind import and use utilities such as bg-brand-600.