Color Shade Generator

One brand colour in, a full 50–950 scale out.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Color Shade Generator

50–950 tints and shades for design systems

Scale name

Export

The result appears here.

Options

Brand colour

Brand colour sits at

Best fit puts a light or dark colour at the step that matches it.

Colour strength

Lower for calmer tints and shades.

Details

Colour code

Design systems use a ladder of one colour: 50 is a faint tint for backgrounds and 950 is a deep shade for text. This tool keeps your colour exactly and builds the other steps around it with even lightness.

Use 50–200 for backgrounds, 500–600 for buttons and 800–950 for text.
Lower the colour strength for tints that feel less candy-like.
Pair white text with steps 600 and up; check the notes.
Use Tailwind or TW 4 to drop the scale straight into a project.

The colour is converted to OKLCH. Lightness moves smoothly from about 97% at step 50 to about 20% at step 950 around your colour, keeping the hue. Chroma fades toward both ends, and any colour outside sRGB is pulled in by lowering chroma. Contrast uses WCAG 2.x. Nothing is uploaded.

Preparing tool

How to use Color Shade Generator

Pick your brand colour and name the scale.
Check each step and its text contrast.
Copy the CSS, Tailwind, SCSS or JSON code.

Read the detailed guide →

What are the limits of Color Shade Generator?

The scale follows a smooth lightness curve, not a hand-tuned set, so adjust steps by eye for important brand work. Contrast notes use WCAG 2.x. Your colours stay on your device.