How to use the Color Shades Generator
- 1. Enter a base colourAny hex code, such as your brand colour.
- 2. Choose steps and mixingHow many steps each way, and RGB or OKLCH mixing.
- 3. Copy the CSSUse the variables and pick text colours from the contrast columns.
Worked example
Starting from navy #0B1F3A with 5 steps each way, plain RGB mixing gives tints from #34445B (one sixth white) to #D6DADE (five sixths white), and shades from #091A30 down to #02050A. Each tint moves every RGB channel the same fraction of the way to 255; each shade moves it towards 0. The table shows that the base navy has 16.52:1 contrast on white, tint 2 (#5C6A7C) still passes 4.5:1, and tint 3 (#858F9D) drops to 3.27:1, so it is for borders and backgrounds, not text.
The CSS output names them --brand-tint-1 to --brand-tint-5 and --brand-shade-1 to --brand-shade-5.
RGB or OKLCH?
- RGB mixing matches what most design apps do when you add white or black, so values match other tools.
- OKLCH mixing steps lightness in a perceptually even space, so the jumps look more even and colours keep their hue better.
- Saturated colours can look greyish when mixed with black in RGB; OKLCH holds the colour longer.
Keep the base colour for main actions and use lighter tints for hover backgrounds and darker shades for pressed states. For a full 50–950 design-system scale, use the Tailwind colour palette generator instead. To read any colour in other formats, use the colour code converter. Everything is calculated in your browser.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is the colour mixed with white, so it gets lighter. A shade is mixed with black, so it gets darker. A tone is mixed with grey.
How many steps should I use?
Three to five each way covers most UI needs, such as hover, pressed, border and background states.
Is the Color Shades Generator free?
Yes, the Color Shades Generator is free. The first time you generate your first shades, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.