Colour Shades Generator

Give it one brand colour and it builds ten steps, lighter (tints) and darker (shades). The output comes out in the 50 · 100 · … · 900 form that Tailwind and most design systems expect.

🎨 Everything runs in your browser. No install, no sign-up.

Base colour (your brand colour)

Where each step goes

· 50~200 Backgrounds, soft highlights, disabled states
· 400~600 Buttons and links — the brand colour proper
· 700~900 Pressed states, and text on dark backgrounds
The note on the right of each row says whether white or black text clears the accessibility threshold (4.5:1) on that background.

What this tool does

Ten steps from 50 to 900
HEX and HSL per step
Marks whether white or black text reads
Copy the set as CSS variables

Other colour tools

Colour Palette GeneratorPull colours that work with a base colour, by rule Colour MixerFind the colour between two colours Random Colour GeneratorLock the ones you like, reroll the rest Colour Contrast CheckerCheck text legibility against WCAG

Colours may look slightly different depending on your screen and its colour profile.