Design Token Generator
Turn a few brand colors into a complete color token system — OKLCH 50–950 scales per role, plus light & dark semantic aliases (bg, text, border, primary, status) — exported as CSS variables or JSON, ready for development.
Each role expands to a perceptually-even 50–950 OKLCH scale. Click any stop to copy its HEX.
Themed preview & export
Same tokens, two mappings. Verify the primary / on-primary pair in the Accessibility Checker.
:root {
/* primary */
--primary-50: #e7f2ff;
--primary-100: #d8e5ff;
--primary-200: #c0cfff;
--primary-300: #a5b2ff;
--primary-400: #8790ff;
--primary-500: #6c71fd;
--primary-600: #5757e1;
--primary-700: #4440c0;
--primary-800: #332b9b;
--primary-900: #221b73;
--primary-950: #140e4f;
/* neutral */
--neutral-50: #eff6ff;
--neutral-100: #e2ecfb;
--neutral-200: #cddaee;
--neutral-300: #b2c2d9;
--neutral-400: #93a4bd;
--neutral-500: #77879f;
--neutral-600: #607087;
--neutral-700: #4b596e;
--neutral-800: #374355;
--neutral-900: #252e3c;
--neutral-950: #161d27;
/* success */
--success-50: #d2ffdb;
--success-100: #b9ffc5;
--success-200: #90f4a5;
--success-300: #60df82;
--success-400: #1cc25c;
--success-500: #00a43e;
--success-600: #008a23;
--success-700: #007109;
--success-800: #005700;
--success-900: #003e00;
--success-950: #002900;
/* warning */
--warning-50: #ffefc6;
--warning-100: #ffe1a9;
--warning-200: #ffcb7a;
--warning-300: #fdae46;
--warning-400: #e38d00;
--warning-500: #c36f00;
--warning-600: #a85700;
--warning-700: #8c4100;
--warning-800: #6e2d00;
--warning-900: #501d00;
--warning-950: #361000;
/* danger */
--danger-50: #ffe1d9;
--danger-100: #ffcdc4;
--danger-200: #ffaea4;
--danger-300: #ff8a81;
--danger-400: #ff605c;
--danger-500: #e93e3f;
--danger-600: #cc1926;
--danger-700: #ab0010;
--danger-800: #880001;
--danger-900: #640000;
--danger-950: #440000;
/* semantic — light */
--color-bg: var(--neutral-50);
--color-surface: var(--neutral-100);
--color-border: var(--neutral-200);
--color-muted: var(--neutral-500);
--color-text: var(--neutral-900);
--color-text-strong: var(--neutral-950);
--color-primary: var(--primary-600);
--color-primary-hover: var(--primary-700);
--color-on-primary: var(--neutral-50);
--color-ring: var(--primary-400);
--color-success: var(--success-600);
--color-warning: var(--warning-500);
--color-danger: var(--danger-600);
}
.dark {
/* semantic — dark */
--color-bg: var(--neutral-950);
--color-surface: var(--neutral-900);
--color-border: var(--neutral-800);
--color-muted: var(--neutral-400);
--color-text: var(--neutral-100);
--color-text-strong: var(--neutral-50);
--color-primary: var(--primary-400);
--color-primary-hover: var(--primary-300);
--color-on-primary: var(--neutral-950);
--color-ring: var(--primary-500);
--color-success: var(--success-400);
--color-warning: var(--warning-400);
--color-danger: var(--danger-400);
}Tokens are the indirection that makes theming possible
The difference between a stylesheet that's a nightmare to re-theme and one that flips to dark mode in a single line is one idea: indirection. Hard-code #6366f1 in two hundred components and a rebrand is a two-hundred-file find-and-replace. Reference a semantic token — --color-primary — that points at a scale stop — primary-600 — that holds the actual value, and a rebrand is one edit. That three-layer structure (component → semantic token → scale token → value) is what every mature design system runs on, and it's what this generator emits.
The scales are the foundation, and they have to be perceptually even or the whole system looks off — a green-500 that reads brighter than the brand-500 betrays the seams. Building every role's ramp in OKLCH, holding hue and tapering chroma at the extremes, makes the 500s feel like the same shade level across primary, neutral and all three status colors. On top of the scales sit the semantic aliases named by role, never by hue: --color-danger, not --color-red, so the day danger becomes orange you change a value, not a hundred names.
Dark mode is where the indirection earns its keep. You don't author a second palette — you author a second mapping: background flips to the dark end of the neutral scale, text to the light end, and the brand color steps one stop lighter so it stays vivid against dark surfaces. Both mappings ship in the CSS as :root and .dark, so a class toggle re-themes the entire UI with zero component changes.
What a token system doesn't do for free is guarantee contrast — that's a property of the specific pairings you ship. The semantic defaults here are chosen to be safe (dark text on light, light on dark), but the one pair to always verify is your primary button background against its on-primary text. Generate the system here, then confirm that pair in the Accessibility Checker, tune individual stops in the Scale Generator, and source coherent role colors from the Palette Generator.
Trusted by Design-System Teams
“Two brand colors in, a complete OKLCH token system out — scales plus light/dark semantic aliases — with CSS and JSON exports. The semantic-vs-scale separation is done correctly, which most generators botch. This is the starting point for our whole theme; it saved days of hand-tuning.”
“The :root + .dark output drops straight into our stylesheet and the JSON feeds Style Dictionary. Roles named by meaning (--color-danger, not red) is exactly the discipline I enforce. Perceptually-even ramps across all five roles — green-500 finally matches brand-500 in weight.”
“Generating a coherent dark theme automatically (brand bumped a step lighter on dark) is the part I always get wrong by hand. The live light/dark preview sells it to stakeholders instantly. Would love elevation/shadow tokens too, but for color it's complete.”
“Scale tokens, semantic tokens, two themes, two export formats — the full pipeline in one screen, in OKLCH, in-browser. Pairs with the contrast checker to validate the primary/on-primary pair. This is a real systems instrument.”
Love using our calculator?
Related color tools
Similar Calculators
More tools in the same category
Multi-Format Color Converter
HEX, RGB, HSL, CMYK, LAB, LCH and OKLCH at once, live — with WCAG contrast, luminance and a tint/shade ramp.
Accessibility Color Checker
Test text/background pairs against WCAG AA/AAA contrast, with a one-click OKLCH fix and color-blind-aware guidance.
Color Scale Generator
Perceptually-even 50-950 shade scales from one base color, OKLCH-correct, with CSS export.
Color Palette Generator
Complementary, triadic, tetradic and more — harmonies generated in OKLCH with a live preview.
Gradient Palette Creator
Linear, radial and conic multi-stop gradients with a live preview and production CSS export.
Color Distance Calculator
Perceptual color difference via CIEDE2000, Delta-E 76 and OKLab — the print and brand-matching standard.
Often Used Together
Complementary tools for complete analysis
Related Articles
Dive deeper with our expert guides and tutorials related to Design Token Generator
OKLCH scales · semantic light/dark aliases · CSS variables + JSON · Last reviewed: 2026-06