Free tool
One colour,
a full palette
Enter your brand colour. The tool builds a 11-step scale from it, shows where each shade belongs and whether it can carry text, and lets you copy the code with one click.
Your palette
Tap a shade to copy its code. 500 is your base colour.
Background
Border, icon
Button
Hover, pressed
Text
Contrast is measured by WCAG: at least 4.5:1 for body text, 3:1 for large text and icons.
How it looks on a site
The sample uses this scale only. In the dark theme the scale is read backwards: 50 swaps with 950, 100 with 900.
The summer sale is on
Selected products stay discounted until the end of the week.
Free delivery within the city.
The summer sale is on
Selected products stay discounted until the end of the week.
Free delivery within the city.
The same colour mixed with white and black
A common shortcut: add white for the light shades and black for the dark ones. The light end goes chalky and the dark end muddy. The scale above keeps the colour alive with OKLCH maths.
This tool
White and black mixed in
Take the code
:root {
--brand-50: #f2f0ff;
--brand-100: #e1ddff;
--brand-200: #cac3ff;
--brand-300: #ab9eff;
--brand-400: #8066ff;
--brand-500: #5f1fff;
--brand-600: #5000df;
--brand-700: #4300be;
--brand-800: #36009e;
--brand-900: #2c0085;
--brand-950: #1a0356;
}Working with a palette
Every shade in its place
A scale is a set of ready choices. Instead of picking a colour by eye every time, you give each job its own shade, and the whole site looks like one family.
Lightest shades: backgrounds
Sections, cards and notice boxes. Easy on the eye, yet the brand colour is still felt.
Light to mid shades: borders and icons
Lines, frames, icons. Do not use them for body text on white: the contrast falls short.
The base shade: buttons
Buttons, links, highlights. One shade across the whole site, so visitors quickly learn what can be clicked.
One or two steps darker: hover and pressed
A button darkens one step on hover and one more when pressed. No need to invent a new colour.
Darkest shades: text
Headings and body text. A dark shade of the brand instead of plain grey makes the text part of the family too.
Three scales are enough to start
- Brand scale: buttons, links, highlights
- Grey scale: text, borders, backgrounds
- Status colours: success, warning, error, info
- No new colours for the dark theme: the same scale, reversed
An ordered list of the colours a site uses. Each colour has several shades, and each shade has a job: one for backgrounds, one for buttons, one for text. That way no random colour is left on the site.
11 steps from 50 to 950 are the standard in Tailwind CSS and many design systems. The steps are small, so finding the shade that gives enough contrast between text and background is easy.
The base colour is the middle of the scale: the light shades are calculated towards white and the dark ones towards black. If your colour is very light or very dark, the tool says so: such a colour works better as a background or text colour, with another shade for buttons.
The difference in brightness between text and its background. WCAG asks for at least 4.5:1 for body text and 3:1 for large text and icons. The tool measures every shade on white and on dark and says what it can be used for.
White makes the colour chalky and black makes it muddy and greyish. The tool works in the OKLCH colour model: it changes the lightness and works out the colour's intensity separately for each step.
CSS variables work on any site, the Tailwind code in Tailwind CSS projects, and JSON in Figma plugins and other tools. Copy it and paste it into your project.
Let us talk about your project!
