Search⌘K

Design systems · 4 tools

Design System Color Tools

Turn one color into a documented, exportable token set — primitives, semantics and a ramp that means the same thing at every hue.

A design system's color layer fails in a predictable way. It starts as a palette, accumulates one-off values under deadline pressure, and arrives eighteen months later as two hundred hex codes that nobody can safely change. The structural defence is to separate two kinds of token and never let components see the first kind.

Primitive tokens name colors: blue-600, gray-100. Semantic tokens name jobs: surface-raised, text-muted, border-strong, action-bg. Components reference only semantics. That single indirection is what makes retheming an edit to one map rather than an edit to every component, and it is what makes dark mode tractable, since the semantic layer is exactly the set of relationships that must hold in both themes.

Generate the primitive ramps rather than picking them by hand. A ramp built in OKLCH — lightness marching evenly, chroma following a curve that peaks in the middle and eases at both ends, every step clamped to the sRGB gamut boundary at its own lightness — produces consistent steps across every hue. That consistency is what makes 600 mean the same weight for blue and for yellow, which is the whole point of numbering them.

All 4 design systems tools

Design systems

Tailwind Palette Generator

A full 50–950 ramp from one brand color.

 Design systems

Design Token Exporter

One background, exported to eight formats.

 Design systems

CSS Variables Generator

A themed :root block, light and dark, ready to paste.

 Design systems

Palette Analyzer

Paste a palette. Find out what is wrong with it.

Frequently asked questions

What is the difference between primitive and semantic color tokens?

A primitive token names a color — blue-600 — and a semantic token names a job — action-bg. Primitives are the palette; semantics are the contract components depend on. If a button references a primitive, retheming means editing every component that uses it; if it references a semantic, retheming means editing one mapping.

How many steps should a color ramp have?

Nine to twelve is the common range, and the number matters less than the spacing. Even perceptual lightness steps with chroma peaking in the middle gives you predictable relationships: a hover state one step along, a border two steps from the surface, text at the far end. Ramps built on even HSL steps do not have that property.

How do I build a dark mode from an existing light theme?

Rebuild the semantic layer, do not invert the primitives. Solve for the same relationships in the other polarity: raise surface lightness for elevation instead of casting shadows, pull accent chroma down 20–40% so saturated colors do not fluoresce against near-black, and target slightly higher text contrast than the light theme needed.

Can I export these tokens to Tailwind or CSS variables?

Yes. Every generator here emits copy-ready output in several formats — CSS custom properties, a Tailwind theme extension, and a JSON token file in the Design Tokens Community Group shape. Nothing is stored or sent anywhere; the export is generated in your browser from the values on screen.

Other categories