Colour Shades Generator
Pick your brand colour. It becomes the 500 step, with lighter tints above and darker shades below, each with its contrast against white and black text.
Worked examples
Black and white
Contrast of white text on black
21 to 1
The highest contrast possible, and a handy way to check your understanding.
About Colour Shades Generator
Most design systems need more than one colour value. They need a pale tint for backgrounds, a mid-tone for buttons, a darker shade for hover states and a very dark one for text. This generator builds all of them from the single colour you start with, so the whole set stays in one family.
Your colour becomes step 500. Steps 50 to 400 mix it with white in growing amounts, and steps 600 to 950 mix it with black. Each swatch shows its contrast against white and black text, with a clear tag for whether it meets the AA level of 4.5 to 1. Copy the set as CSS variables under any name you choose.
How to use Colour Shades Generator
- Pick your base colour or paste its hex code.
- Give the colours a name for the CSS variables.
- Check which steps work with white or black text.
- Copy the CSS variables.
Common uses
- Creating a brand colour scale for a design system
- Finding a hover and a pressed colour for a button
- Choosing text and background pairs that meet accessibility guidance
- Building tinted backgrounds from a brand colour
Frequently asked questions
How are the shades made?
Lighter steps mix the base with white, and darker steps mix it with black. The mixing amounts are fixed, from 92% white at step 50 to 70% black at step 950. Step 500 is exactly your colour.
What does the contrast score mean?
It is the contrast ratio between the colour and white or black, from 1 to 1 for identical colours up to 21 to 1 for black on white. Ordinary text needs 4.5 to 1 at level AA.
Will every colour give a good scale?
The mixing is the same for all colours, so very light or very dark base colours leave less room on one side. If your base is already pale, the lighter steps will look similar.
Can I use the output in other tools?
Yes. The output is a list of standard custom properties with hex values. You can paste it into a stylesheet, or copy individual values into a design tool.