Home · Palette to CSS Variables
Color Palette to CSS Variables & Design Tokens
The export door for CSS and token pipelines — with one rule the other converters do not keep: semantic tokens point only at pairings that pass. What fails is left out, and the file names it.
Two layers, honestly labelled: the raw scales ship complete as building material; the semantic layer (--color-text-body, --color-action, …) contains only measured passes. The distinction is printed in the file's own header, next to the sentence every export should carry: this records measured contrast evidence — it is not a certification of compliance.
The palette being exported
This door exports the palette from your workflow — the one this page's link carried in, or the default brand blue. Change the brand colour here, or go back to the generator to edit roles first.
Format
Why "verified" is a property of pairings, not colours
A colour is never accessible on its own; a pairing, for a job, on a ground, is. That is why the export is built from the graded pairing list rather than the swatch list: the same measurement that graded the matrix decides what the semantic layer may contain. If you arrived with a palette that has a failing body-text pairing, the honest outcomes are to repair it in the generator — one click, hue held — or to ship the export with the exclusion named. Both are one screen away; a silent export is not offered.
CSS & token export questions
What is the difference between the scale tokens and the semantic tokens in the file?
The scales (primary 50–950, neutral 50–950) are raw building material: every step of your hue, exported complete, and labelled in the file as not individually verified — a mid-scale step is not promised to pass anything. The semantic layer (--color-text-body, --color-action, --color-focus and friends, per theme) is the verified part: each token points at a pairing that was measured passing for that role’s job. Keeping the two layers separate, and saying so in the file header, is the point — a token file that mixes them invites the next person to trust the wrong half.
What happens to a pairing that fails?
It is excluded from the semantic layer, and the file names it: the pairing, its measured ratio, and the threshold it missed appear in the header comment and in the token file’s audit extension. It is never exported as if it passed, and it is never silently repaired at export time — fixing colours is the repair step’s job, done openly in the generator, not smuggled into a download.
What format is the JSON option?
Design tokens in the community-group format maintained by the W3C Design Tokens Community Group: $value and $type in named groups, with the scale and semantic structure mirroring the CSS. It is a community-group specification, not a W3C Recommendation, and the file says so. Most token pipelines (Style Dictionary and friends) read it directly.