Shipping colour to code without losing anything
Hex is lossy in ways that matter. What to hand engineering so the palette you designed is the palette that ships.
A palette handed over as a list of hex codes has already lost most of what made it a system: the roles, the ramp logic, the contrast decisions, and the reason any given value is what it is.
Hand over four things
- The values, in both hex and OKLCH. Hex for compatibility, OKLCH so future adjustments stay on the intended lightness ramp.
- The roles, so engineering wires semantic tokens rather than guessing which blue is the button.
- The contrast results, so the accessibility decisions are recorded rather than re-litigated in code review.
- The construction settings — method, base colour, ranges, seed. This is what makes the palette reproducible and extensible later.
Format notes
CSS custom properties are the safest default and work everywhere. Design tokens (the W3C format) are right when the palette feeds more than one platform. Tailwind config saves a translation step when that is the stack. All three are generated from the same document in Colorstruct, so they cannot drift apart.
Name tokens for role, not appearance
--color-primary survives a rebrand. --color-blue becomes a lie the first time the brand turns green. Colorstruct will name tokens from the colour names you typed, so it is worth naming them semantically in the workspace before exporting.
Round-tripping
The import path accepts everything the export path produces. If engineering adjusts a value in code, paste the CSS block back into Colorstruct and the palette — with its roles — comes back for re-checking. Keeping design and code in sync should not require anyone to retype a hex code.