Why it matters
A design system needs more than a brand colour: it needs tints for backgrounds, shades for hover states and text, and a neutral scale, all evenly spaced so 400 to 500 feels like the same step as 700 to 800. Scales built by mixing with white and black in RGB come out uneven and greyish, which is why Tailwind v4 moved its palette to OKLCH. Then someone has to decide which step is body text and check it actually passes contrast in dark mode.
This generator builds each scale in OKLCH with a fixed lightness curve, shifting it so your brand colour lands exactly on its nearest step instead of being approximated, and easing chroma towards the light and dark ends so tints stay soft. It adds a neutral scale tinted with your first colour or pure grey, then chooses semantic tokens for light and dark themes by testing contrast: muted text is the lightest neutral that still reaches 4.5:1, the accent is the step nearest 600 that passes on the page background, and on-accent text is white or black, whichever APCA rates higher. Every step shows its WCAG ratio and APCA Lc on white and black, and the whole set exports as CSS variables, a Tailwind v4 @theme block, a Tailwind v3 config, SCSS maps or Design Tokens (DTCG) JSON.
How it works
- InputOne or more brand colours
- In your browserOKLCH scales and contrast-picked semantic tokens
- OutputCSS, Tailwind, SCSS or DTCG
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Step | Hex | On white | APCA Lc on white | OKLCH L % |
|---|---|---|---|---|
| 50 | #f2f7ff | 1.08 | 0 | 97.5 |
| 100 | #e5eeff | 1.17 | 8 | 94.7 |
| 200 | #caddff | 1.37 | 18 | 89.4 |
| 300 | #a8c7ff | 1.71 | 31 | 82.7 |
| 400 | #7baaff | 2.32 | 46 | 74 |
| 500 | #538dfa | 3.2 | 59 | 65.8 |
| 600 | #2f6fed | 4.55 | 71 | 57.4 |
| 700 | #1554d0 | 6.54 | 82 | 49 |
| 800 | #003db0 | 9.15 | 90 | 41.3 |
| 900 | #032e82 | 12.23 | 97 | 33.8 |
| 950 | #09204f | 15.78 | 102 | 25.9 |
How to use it
- Enter one or more brand colours.
- Choose the neutral scale.
- Check the semantic tokens pass in both themes.
- Pick an export format and copy or download it.
FAQ
Why OKLCH?
OKLCH lightness matches how light a colour looks, so steps feel evenly spaced and the same step number has similar contrast across hues. Tailwind v4's default palette uses it for the same reason.
Will my brand colour be changed?
No. It's placed on whichever step its lightness is closest to and kept exactly; the rest of the scale bends around it.
What are semantic tokens?
Names for jobs rather than colours: text, muted, border, accent. Components use them, so switching to dark mode or a new brand only changes the token values.
What is DTCG JSON?
The Design Tokens Community Group format, readable by Figma plugins, Style Dictionary and Tokens Studio. Colours use the colour-space object form with a hex fallback; semantic tokens are aliases like {color.neutral.900}.
Do I need both Tailwind outputs?
No. Tailwind v4 reads tokens from CSS with @theme; v3 uses tailwind.config.js. Pick the one that matches your project.
