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.
Design Token Tools
- OKLCH Color Generator
Mix 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 Converter
Convert 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 Generator
Generate 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 Generator
Turn 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 Generator
Generate coordinated light and dark theme tokens from one brand color — with your choice of dark-mode strategy: .
- Figma Token JSON Generator
Generate 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 Generator
Turn 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 Generator
Turn 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 Generator
Generate 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 Checker
Check whether colors fit inside the sRGB gamut — the baseline every display can show.
- Color Gamut Mapper
Fit 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() Generator
Build CSS color-mix() declarations visually: two colors, a percentage, and the interpolation space (srgb, oklab, oklch, hsl or lab).
- Bootstrap Theme Color Generator
Generate Bootstrap 5 theme colors from your brand: the $theme-colors SCSS map for build-time customization and the –bs-* CSS variables for runtime (5.
- Data Visualization Palette Generator
Generate 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 Checker
Check text contrast over a gradient the way WCAG actually applies: at the weakest point the text touches, not the average.
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.
