Tints and Shades Generator
Build a complete lightness scale from one brand colour — tints mixed with white and shades mixed with black in 10% steps — and copy it as CSS variables.
Result
Choose a colour to see its tints and shades.
How to use this tool
- Choose a base colour and a name for the CSS variables.
- Tints are listed from 10% to 90% white, and shades from 10% to 90% black. Click a swatch to copy it.
- Copy the CSS block to use the scale in your stylesheet.
How it works
A tint mixes the colour with white and a shade mixes it with black: channel = base + (target − base) × amount, applied to red, green and blue, where target is 255 for white and 0 for black.
Example
Teal at 50%
#0F766E mixed 50% with white gives #87BBB7; mixed 50% with black it gives #083B37.
Privacy and limitations
- Generated in your browser.
- Mixing is done in sRGB, the traditional definition of tints and shades. Mid-tones can look slightly greyer than perceptual methods; try the Color Mixer’s OKLab mode for an alternative.
- Check any colour you use for text with the Contrast Checker.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint adds white, a shade adds black and a tone adds grey.
How do I use the scale in a design system?
Use light tints for backgrounds and hovers, the base colour for buttons and links, and darker shades for text on light backgrounds.