Developer Color Tools
Everything a developer needs to ship color systems — CSS variables, Tailwind configs, JSON design tokens, SVG palettes and code-ready color conversions. All free, all in the browser.
Primary tools
The essential developer utilities.
Developer Toolkit
Convert, scale, tokenize and export — a unified interface for every code-oriented color task.
CSS Color Tools
Generate CSS variables, theme blocks, borders, box-shadows and backgrounds with live preview.
CSS Variable Generator
Build --color-* tokens with live swatches, theme overrides and one-click copy.
Tailwind Color Helper
Generate 50–950 scales and copy a ready-to-paste Tailwind config extension.
Color Token Generator
Export W3C design tokens JSON, compatible with Style Dictionary and Tokens Studio.
JSON Color Generator
Export palettes and scales as clean structured JSON for your scripts and build tools.
SVG Color Generator
Export palettes, scales and gradients as inline SVG for docs, presentations and READMEs.
CSS Colors Guide
Modern CSS color syntax — HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH and P3 — explained.
Choose the right export format
A quick guide for picking the format that fits your stack.
| Format | Best for | Typical use case |
|---|---|---|
| CSS variables | Any web project | Global theming, dark mode overrides, component tokens |
| Tailwind config | Tailwind CSS projects | Extending theme.colors with a full brand scale |
| JSON palette | Apps, scripts and CI pipelines | Feeding a custom build step, generating icons or docs |
| W3C design tokens | Cross-tool design systems | Style Dictionary, Tokens Studio, Figma plugins |
| SVG palette | Documentation, READMEs, presentations | Embedding a palette preview in a GitHub README |
| SCSS variables | Legacy or compiled CSS projects | Sass-based design tokens compiled into CSS |
How to structure a color system
Most robust design systems use two layers of color tokens.
-
Primitive tokensRaw color values named after their hue and lightness, like
--blue-500or--gray-100. These never change between themes or brands. -
Semantic tokensRole-based aliases that reference primitives:
--color-primary,--color-surface,--color-danger. Components use these — never primitives directly. -
Theme overridesUnder
[data-theme="dark"], override only the semantic tokens. Every component updates automatically without any code changes.
:root {
/* Primitives */
--blue-500: #4f46e5;
--gray-100: #f3f4f6;
--gray-900: #111827;
/* Semantic aliases */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--color-text: var(--gray-900);
}
[data-theme="dark"] {
--color-surface: var(--gray-900);
--color-text: var(--gray-100);
}Frequently asked questions
Which tools should I start with?
Most developers begin with the Developer Toolkit — it covers conversion, scales and exports in one page. From there, use the dedicated CSS variable generator or Tailwind helper depending on your stack.
Do these tools require an API key or account?
No. Everything is static, free and runs entirely in your browser. No account, no upload, no server required.
Can I use the output in commercial projects?
Yes. Every generated token, palette, scale or config is yours to use however you like, including commercial products.
Does the toolkit produce OKLCH output?
Yes. Every format conversion includes OKLCH and OKLab, so you can drop modern CSS syntax directly into your stylesheets.
Are the color math and conversions accurate?
Yes. Conversions use the standard sRGB, CIE LAB, and Björn Ottosson's OKLab/OKLCH formulas. Values are mathematically derived, not looked up from a table.