Color System Builder

What this tool is used for

• Producing a full token set from one brand colour rather than picking each shade by hand.
• Generating semantic tokens so components reference intent rather than a raw hex value.
• Producing a matching Tailwind config and CSS variable block from one source.
• Building a scale where each step is a predictable distance from the last.
• Replacing an ad-hoc palette that has grown one colour at a time.

Frequently Asked Questions

How are the eleven shades derived?

Your colour is converted to HSL and its hue and saturation are held while lightness is set to a fixed ladder — 97% for 50, 94% for 100, down through 50% at 500 to 7% at 950. That is why the 500 step reads as the anchor: it sits exactly at mid-lightness.

Why do two ramps at the same step look different in weight?

Because HSL lightness is not perceived brightness. Yellow at L=50% looks far brighter than blue at L=50%, since the eye is most sensitive to green and least to blue. If you need perceptually even steps, build the ramp in OKLCH and treat this as a starting point.

Which step should body text use?

Check the contrast rather than the number. On white, a 600 or 700 step usually clears the 4.5:1 that WCAG AA requires for body text; 500 often does not, even though it looks like the "main" colour. Large text (18.66px bold or 24px) only needs 3:1.

What do the CSS, Tailwind and SCSS tabs give me?

The same ramp in three shapes: custom properties for plain CSS, a `colors` object to paste into `tailwind.config`, and `$name-500` variables for Sass. The step names match Tailwind's own 50–950 convention so the scale drops into an existing project unchanged.

How many colours does a design system need?

One primary ramp, one neutral ramp, and semantic ramps for success, warning and danger. The common mistake is generating ten ramps and using three — start with primary plus a neutral built from a *slightly* tinted grey, which looks intentional where pure grey looks cheap.

How many steps should a colour ramp have?

Usually nine to eleven, which covers backgrounds, borders, text and states without becoming a guessing game. Fewer forces compromises; many more and adjacent steps stop being visually distinguishable.

Common errors and gotchas

• Generating a scale without checking contrast at each step, so several shades fail against your text colour.
• Naming tokens after the colour rather than the role, which makes a theme change a rename.
• Producing more steps than the design uses, which invites inconsistency rather than preventing it.
• Building the scale in sRGB, where equal numeric steps are not equal perceptual steps.
• Shipping the generated tokens without a dark-mode counterpart, which then gets improvised.