Build design tokens and modern OKLCH color systems — exported as CSS variables, SCSS, Tailwind themes, JSON and DTCG formats. Everything runs locally in your browser.
Your favourites
Recently used
Start from what you are trying to do
- Turn a palette into design tokensThe same palette as named tokens, as CSS custom properties, and as a Figma token file.5 steps, starting with Color Palette Generator
Design Token Tools
- OKLCH Color GeneratorMix colors directly in OKLCH with lightness, chroma and hue sliders — live preview, sRGB gamut warnings, and CSS output with hex/rgb/hsl fallbacks.
- HEX to OKLCH ConverterConvert hex, rgb() or hsl() colors to oklch() — one per line, batch-friendly, computed per CSS Color Module Level 4 with the original kept as a comment.
- Design Token GeneratorGenerate a coherent starter token system — two color scales, spacing, radius and a modular type scale — exported as CSS variables, SCSS, Tailwind v4 @theme, JSON or DTCG draft tokens.
- Semantic Color Token GeneratorTurn five brand colors into semantic tokens — primary, success, warning, danger, info — each with hover, active, subtle, border, strong and on-color slots, ready for CSS or Tailwind v4.
- Light/Dark Theme GeneratorGenerate coordinated light and dark theme tokens from one brand color — with your choice of dark-mode strategy: .dark class, prefers-color-scheme, or the CSS light-dark() function.
- Figma Token JSON GeneratorGenerate design-token JSON for Figma workflows — Tokens Studio plugin format and the W3C DTCG draft format — from a brand color, with radius and spacing tokens included.
- CSS Variables GeneratorTurn name:value pairs into a clean :root custom-property block — names normalized to kebab-case, with usage examples for CSS and JavaScript and an optional dark-mode override skeleton.
- SCSS Variables GeneratorTurn name:value pairs into SCSS — plain $variables, or a Sass map with a safe token() getter that errors on unknown names — with !default for library authors.
Color Design System Tools
- OKLCH Palette GeneratorGenerate palettes where every color shares the same OKLCH lightness and chroma — the property that makes sets look genuinely uniform, which HSL cannot deliver.
- sRGB Gamut CheckerCheck whether colors fit inside the sRGB gamut — the baseline every display can show.
- Color Gamut MapperFit an out-of-gamut color into sRGB the right way: hold lightness and hue in OKLCH and reduce only chroma until it fits — the CSS-style approach — and compare that against naive channel clipping, which visibly shifts hue.
- CSS color-mix() GeneratorBuild CSS color-mix() declarations visually: two colors, a percentage, and the interpolation space (srgb, oklab, oklch, hsl or lab).
- Bootstrap Theme Color GeneratorGenerate Bootstrap 5 theme colors from your brand: the $theme-colors SCSS map for build-time customization and the –bs-* CSS variables for runtime (5.3+).
- Data Visualization Palette GeneratorGenerate chart palettes with the three shapes data actually needs: categorical (distinct series), sequential (low-to-high) and diverging (around a midpoint) — built in OKLCH, previewed in grayscale, and stress-tested with a deuteranopia check that reports the weakest series pair.
- Gradient Accessibility CheckerCheck text contrast over a gradient the way WCAG actually applies: at the weakest point the text touches, not the average.
Frequently asked questions
What is a design token?
A named design decision — a colour, a spacing step, a radius — stored once and referenced everywhere. The value moves from being repeated in twenty stylesheets to being defined in one place, which is what makes a theme change tractable.
What is the difference between a raw and a semantic token?
A raw token names the value: blue-600. A semantic token names the job: color-action-primary, which points at blue-600. Components should use semantic tokens, so rebranding changes one mapping instead of every component.
Which formats can tokens be exported as?
CSS custom properties, Sass variables, JavaScript objects, JSON and the Figma-compatible shape. The same set of decisions expressed in whichever form the consumer needs, which is the point of keeping tokens separate from any one platform.
How do light and dark themes share tokens?
The semantic layer stays constant and the raw values behind it swap. color-surface means the same thing in both themes and resolves to different colours, so components need no knowledge of which theme is active.
How many spacing steps should a scale have?
Fewer than most teams start with. A scale with a value every 4px gives designers no guidance; six to eight steps on a clear ratio produces more consistent layouts because the choices are constrained enough to be made quickly.
Do generated tokens meet contrast requirements?
Not automatically — a token system organises colours, it does not judge them. Generate the scale here, then check the pairings you intend to ship with the contrast tools, which report the measured ratio against each WCAG threshold.
Can I import an existing palette?
Yes. Paste the colours you already use and the generators build the scales and export formats around them, which is usually the realistic starting point rather than designing a palette from nothing.
One source of truth, many formats
Design tokens are the named values — colors, spacing, radii, type sizes — that keep a product consistent across code and design tools. The generators here produce coherent token sets and export them everywhere they need to live: CSS custom properties, SCSS variables, Tailwind v4 @theme, plain JSON, the W3C DTCG draft format, and Tokens Studio JSON for Figma.
Why OKLCH underpins everything
All color math in these tools runs in OKLCH (CSS Color Module Level 4), where lightness is perceptually uniform — the property that makes generated scales and dark-mode variants look designed instead of computed. Tailwind v4 made the same choice for its own palette.
Typical flow: convert existing colors with the HEX to OKLCH Converter, build scales, then verify readability in the Accessibility Color Tools.
