Light mode
A semantic interface state
Tokens describe a job. Contrast results below determine whether each intended pairing passes.
Surface card
Background, surface, border, text, muted text, focus, hover, and active roles are exported.
Design-system workspace
Design Token and State Generator
Turn one seed into a perceptual 50-950 scale, semantic light and dark roles, measured contrast evidence, and copy-ready CSS, JSON, and Tailwind tokens.
Enter Hex, RGB, HSL, OKLCH, or a CSS color name. The ramp updates locally.
Normalized
#4F46E5Perceptual 50-950 scale
Ordered by OKLCH lightness, then rendered into sRGB.
50
#F3F7FF100
#E1E9FF200
#C4CFFF300
#A1AEFF400
#818BFF500
#6565FF600
#4F49E0700
#3B31B5800
#261984950
#0F0546Semantic roles in context
Light and dark companions use the same scale with job-specific aliases.
Dark mode
A semantic interface state
Tokens describe a job. Contrast results below determine whether each intended pairing passes.
Surface card
Background, surface, border, text, muted text, focus, hover, and active roles are exported.
Measured contrast evidence
Ratios are recomputed from the final sRGB tokens. A failed row needs manual adjustment before production use.
| Mode | Pair | Purpose | Ratio | Result |
|---|---|---|---|---|
| light | text / background | Normal text, WCAG 2.2 AA | 17.30:1 | Pass · 4.5:1 |
| light | mutedText / background | Secondary normal text, WCAG 2.2 AA | 12.58:1 | Pass · 4.5:1 |
| light | onPrimary / primary | Text on primary, WCAG 2.2 AA | 6.25:1 | Pass · 4.5:1 |
| light | primary / background | UI component boundary / large text | 5.82:1 | Pass · 3:1 |
| light | focus / background | Focus indicator contrast | 4.03:1 | Pass · 3:1 |
| dark | text / background | Normal text, WCAG 2.2 AA | 17.30:1 | Pass · 4.5:1 |
| dark | mutedText / background | Secondary normal text, WCAG 2.2 AA | 12.13:1 | Pass · 4.5:1 |
| dark | onPrimary / primary | Text on primary, WCAG 2.2 AA | 7.07:1 | Pass · 4.5:1 |
| dark | primary / background | UI component boundary / large text | 6.25:1 | Pass · 3:1 |
| dark | focus / background | Focus indicator contrast | 6.25:1 | Pass · 3:1 |
Export implementation tokens
CSS variables, JSON, or a Tailwind theme extension.
:root {
--color-brand-50: #F3F7FF;
--color-brand-100: #E1E9FF;
--color-brand-200: #C4CFFF;
--color-brand-300: #A1AEFF;
--color-brand-400: #818BFF;
--color-brand-500: #6565FF;
--color-brand-600: #4F49E0;
--color-brand-700: #3B31B5;
--color-brand-800: #261984;
--color-brand-950: #0F0546;
--color-background: #F3F7FF;
--color-surface: #FFFFFF;
--color-border: #C4CFFF;
--color-text: #0F0546;
--color-muted-text: #261984;
--color-primary: #4F49E0;
--color-on-primary: #FFFFFF;
--color-hover: #3B31B5;
--color-active: #261984;
--color-focus: #6565FF;
}
[data-theme="dark"], .dark {
--color-background: #0F0546;
--color-surface: #261984;
--color-border: #3B31B5;
--color-text: #F3F7FF;
--color-muted-text: #C4CFFF;
--color-primary: #818BFF;
--color-on-primary: #000000;
--color-hover: #A1AEFF;
--color-active: #C4CFFF;
--color-focus: #818BFF;
}How to Use the Design Token Generator
Enter a seed in Hex, RGB, HSL, OKLCH, or a CSS color name. Review the perceptual scale, inspect semantic roles in light and dark interface previews, then check every measured pairing. Copy the implementation format that fits your codebase and adjust any row marked Needs work.
Why OKLCH Helps Color Scales
OKLCH separates perceived lightness, chroma, and hue more evenly than HSL. That makes it a useful basis for ordered UI states, although gamut conversion and real interface context still matter. This tool reports the final sRGB values and measures those exact values rather than relying on the source coordinates alone.
From Scale Steps to Semantic Roles
Numeric steps are raw palette values; semantic roles describe intent. Background, surface, border, text, primary, hover, active, and focus aliases make a design system easier to change without rewriting component styles. Light and dark companions share the same underlying ramp while using different roles.
Frequently Asked Questions about Design Token and State Generator
The generator holds the seed hue steady and orders each step by OKLCH lightness, with less chroma near the lightest and darkest ends. Final values are rendered to sRGB so the exported Hex tokens match browser output.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.