Tint and Shade Scale Generator
Turn one brand colour into a full scale of tints and shades, with contrast ratios shown and Tailwind config output.
Build a full colour scale from one brand colour, ready to paste into Tailwind or CSS variables.
Scale
The ratio is the best contrast each step reaches against black or white text. Body text needs 4.5:1, large text 3:1.
:root {
--brand-100: #e2dffe;
--brand-200: #c5bffe;
--brand-300: #a79efd;
--brand-400: #8a7efd;
--brand-500: #6d5efc;
--brand-600: #574bca;
--brand-700: #413897;
--brand-800: #2c2665;
--brand-900: #161332;
}About the tint and shade scale generator
A design system needs more than one colour: it needs a light version for backgrounds, a dark one for text, and enough steps between to build hover and active states. Picking those by eye produces a scale where the steps are uneven and two of them are indistinguishable.
Mixing evenly toward white and black gives a predictable scale, and showing the contrast ratio at each step tells you immediately which ones are usable for text.
How to use it
- 1Pick your base colour.
- 2Choose how many steps you want each side.
- 3Name the colour for the generated variables.
- 4Check the contrast ratio on each step.
- 5Copy the CSS variables or the Tailwind config.
Questions
What do the contrast numbers mean?
The best ratio each step reaches against black or white text. Body text needs at least 4.5:1 to meet WCAG AA, and large text needs 3:1.
Why does the middle of the scale rarely work for text?
Mid tone colours are too dark for white text and too light for black. That is normal: use the light end for backgrounds and the dark end for text.
Should I mix with white and black or adjust lightness?
Mixing is simpler and predictable. Adjusting lightness in a perceptual space gives more even steps, at the cost of a scale that is harder to reason about.
How many steps do I need?
Four each side, giving nine in total, matches how most design systems are structured and covers backgrounds, borders, text and states.