Hex Color Tool — Generate a Design System from Any Color

Enter any hex color and Klarion generates a complete design token system — OKLCH color scales for light and dark mode, typography tokens, spacing, and CSS variables. All with WCAG contrast validation.

Open the hex color tool →

What you get from one hex color

10-step color scale — from lightest tint to deepest shade, computed in OKLCH for perceptual uniformity.
Light & dark mode — background, surface, text, border, and primary tokens for both modes.
WCAG contrast — every text/background combination validated against AA and AAA thresholds.
Typography tokens — heading, body, and UI font sizes with a modular scale.
Export formats — CSS Custom Properties, Tailwind v4, Tailwind v3, shadcn/ui, W3C DTCG JSON.

Open the hex color tool

Klarion — free design tools for builders