CSS Design Token Generator
指导
CSS Design Token Generator
Turn a single brand hex color into a complete, opinionated CSS custom-property token system. The tool generates an 11-stop perceptually uniform palette in OKLCH space (50 through 950) and layers a semantic token system on top so you can drop the output straight into a design system or component library.
Unlike a quick chat-generated palette, every shade is computed deterministically, gamut-clamped to sRGB, and previewed live as swatches so you can see how the colors look before you copy them. Tokens are exported in modern oklch() values or classic hex, with an optional dark-mode variant ready to paste into a :root 块。
如何使用
- Pick a brand color with the color picker or paste a hex value (e.g.
#464aff). - Set a name prefix (default
brand) — this becomes the key in--color-brand-500. - Choose the output format: modern
oklch()for Tailwind v4 / wide-gamut workflows, or classic hex. - Toggle “Include dark mode variant” and pick a strategy (
.darkclass,[data-theme="dark"]attribute, orprefers-color-schememedia query). - Adjust the chroma slider if you want a softer or punchier palette, then copy the generated CSS or download it as a stylesheet.
特征
- OKLCH color math – Perceptually uniform 50-950 scale with gamut clamping so every stop stays inside sRGB.
- Semantic token layer – Outputs roles like
--color-primary,--color-surface,--color-on-surface,--color-border,--color-ring，并且--color-accent. - Dark mode variant – Optional second selector that swaps semantic mappings, leaving the raw palette untouched.
- Live swatch grid – Visual preview of every stop plus an interactive light/dark UI mock so you can sanity-check contrast at a glance.
- Modern or legacy output – Pick
oklch()values or classic hex depending on your browser support target. - Chroma slider – Scale palette saturation from 0% (neutral grayscale) up to 150% (richer than your input color).
- 仅客户端 – Everything runs in your browser; your brand color never leaves the page.
- 复制或下载 – One-click copy of the full
:root {}block or download as a.css文件。
常问问题
-
What is OKLCH and why use it for palette generation?
OKLCH is a polar form of the Oklab color space designed to be perceptually uniform. Equal numerical differences in lightness or chroma correspond to roughly equal perceived differences. That makes it ideal for generating palettes where each step (50, 100, 200, …) feels evenly spaced to the eye, unlike HSL, which produces uneven jumps especially in the yellow-green range.
-
What is a design token?
A design token is a named variable that stores a design decision — a color, a spacing value, a font size, and so on. Instead of repeating raw values like #464aff across your codebase, you reference a token like --color-primary. Tokens give designers and developers a single source of truth and make systemic changes (rebrand, theme switch, dark mode) trivial.
-
What is the difference between a raw palette and a semantic token?
A raw palette token names a color by its appearance and position in a scale, like --color-brand-500. A semantic token names a color by its purpose, like --color-primary or --color-on-surface. Components should consume semantic tokens so the same component renders correctly in light, dark, or any future theme — the semantic layer maps to whichever raw shade is appropriate.
-
Why are semantic tokens better than referencing raw palette values directly?
Semantic tokens decouple intent from implementation. If you write background: var(--color-brand-600) everywhere, switching themes means rewriting every component. If you write background: var(--color-primary), only the semantic mapping changes between themes. This is the same principle that drives Material Design 3, IBM Carbon, and shadcn/ui token systems.
-
What does gamut clamping mean?
sRGB — the color space most screens render — cannot represent every OKLCH coordinate. When a generated stop falls outside sRGB, its chroma is reduced until the color fits. This keeps the palette visually consistent across devices but means very saturated brand colors lose a small amount of vibrancy at extreme lightness levels.
-
What is the on-surface naming convention?
In a semantic system, --color-on-X names the foreground color you should use when X is the background. So --color-on-primary is the text color to use on top of --color-primary, and --color-on-surface is the body text color used on --color-surface. The pattern guarantees readable contrast pairs without making every component pick its own foreground.
