Give it one brand colour and it builds a whole scale around it: tints mixed with white, shades mixed with black, and the original in the middle. You choose how many steps each way, and you get swatches, hex codes and ready-made CSS variables numbered 100, 200, 300 and so on, the convention most design systems use.
How to use it
- Enter your base colour.
- Choose how many steps lighter and darker.
- Name the variable, such as brand.
- Copy the CSS variables.
When it helps
- Building a palette from a single brand colour.
- Making hover and active states for buttons.
- Picking backgrounds and borders that match a theme.
- Starting a design-system colour scale.
Good to know
- Lighter tints suit backgrounds, darker shades suit text.
- Check contrast before pairing two colours for text and background.
- Fewer steps are easier to manage than many.
How tints and shades are made
A tint mixes your colour with white in equal steps, and a shade mixes it with black. With five steps each way, the lightest tint is five-sixths of the way to white. The scale is numbered 100 to 1100, with your original in the middle.
Mixing is done in RGB, which is simple and predictable, though in some colours it shifts the hue slightly.
Worked example: a brand scale
Start with a brand blue, choose five steps, and name it brand. You get variables --brand-100 to --brand-1100 for use across your CSS. Use the lightest for backgrounds, the middle for buttons and the darkest for text on light backgrounds.
Check that your text colours have enough contrast against their backgrounds.
Building an accessible palette
A WCAG contrast ratio of at least 4.5 to 1 is recommended for body text, and 3 to 1 for large text. Colours from the same scale, with a big enough gap, usually meet it: for instance, the 100 step against the 1000 step.
Test your pairs with a contrast checker before shipping a design.
Naming and organising colour tokens
Design systems name colours by role, such as primary, surface and danger, and map those roles to scale steps like brand-500. That lets you change the look of an entire site by changing a few variables, and supports dark mode by swapping the mapping.
Keep the raw scale in one place and the role names in another.
Checking the scale in use
Once you have a scale, apply it to a real page and look at it on more than one screen. Colours that look distinct on a laptop can merge on a cheap phone in sunlight, so give neighbouring steps a clear gap. Test your darkest step as text and your lightest as a background.
If two steps look too alike, use fewer steps, and keep only the ones you actually need.
Questions
What's the difference between a tint and a shade?
A tint is mixed with white; a shade is mixed with black.
Why the hundreds in the names?
It's a common convention and leaves room to add steps later.