Color Token Exporter
Turn a palette into named design tokens: CSS variables with dark mode, DTCG JSON, Tailwind, ASE and GPL.
Ratios are each colour against the page, rounded down. Automatic dark values keep each colour’s lightness distance from the page, so surfaces stay subtle and text stays readable.
:root {
--color-brand-50: #eaf8ff;
--color-brand-100: #d8edff;
--color-brand-200: #b9d9ff;
--color-brand-300: #8ebfff;
--color-brand-400: #5e9fff;
--color-brand-500: #3b82f6;
--color-brand-600: #2867cc;
--color-brand-700: #1850a9;
--color-brand-800: #083a87;
--color-brand-900: #002567;
--color-brand-950: #00134c;
--color-accent: #f59e0b;
--color-surface: #ffffff;
--color-text: #111827;
}
@media (prefers-color-scheme: dark) {
:root {
--color-brand-50: #101a1f;
--color-brand-100: #12222f;
--color-brand-200: #16314e;
--color-brand-300: #17447b;
--color-brand-400: #185ab3;
--color-brand-500: #276ee0;
--color-brand-600: #4d8df5;
--color-brand-700: #6ca7ff;
--color-brand-800: #95c3ff;
--color-brand-900: #c0ddff;
--color-brand-950: #e4f3ff;
--color-accent: #703e00;
--color-surface: #121212;
--color-text: #ebf6ff;
}
}
About this tool
Turn a palette into named colour tokens for code and design apps. Import an Adobe Swatch Exchange or GIMP palette, design token JSON, or a stylesheet (CSS custom properties with their dark-mode blocks and light-dark() values, Sass or Less variables), or paste colours from anywhere.
Name each colour, expand any of them into a numbered shade scale, and give it a dark-mode value. Automatic dark values keep each colour’s lightness distance from the page, and the side-by-side light and dark previews show every token on its page with its contrast ratio.
Export as CSS custom properties (dark mode by media query, a .dark class or light-dark()), Sass variables, design tokens JSON in the DTCG 2025.10 format or as hex strings for older tools, Tailwind CSS v4 or v3, ASE or GPL. Each format is named exactly, because tools change their formats over time.
Which JSON format should I choose?
DTCG 2025.10 is the first stable version of the Design Tokens Community Group format and writes colours as objects with a colour space and components. If your tool predates it, choose hex strings, which earlier drafts and most token tools accept.
Does the CSS I export come back the same?
Yes. Importing an exported stylesheet or token file restores the names, light values and dark values, which makes it easy to keep editing later.
Why doesn’t the Tailwind export include dark values?
Tailwind handles dark mode with dark: variants in your markup rather than by changing theme colours, so its export holds the light values and scales.