Colour Palette Generator
A full shade scale from one colour, with the text colour that actually passes contrast on each step.
Runs entirely in your browser
Loading tool...
How to use
- Type a colour in any notation, or use the picker.
- Read the scale — each step shows the contrast of its own text against it.
- Take a harmony when you need a second colour that belongs with the first.
- Copy the CSS variables straight into your stylesheet.
Features
- Eleven steps from 50 to 950, the shape a UI scale needs.
- Lightness moved in HSL, so the ends stay coloured instead of going grey.
- Text colour per swatch chosen by contrast ratio, not by a lightness guess.
- Five harmonies: complementary, analogous, triadic, split complementary and tetradic.
- Runs entirely in your browser.
Frequently asked questions
- Why do shades from other tools look washed out?
- Because they mix the colour with black and white in RGB, and mixing pulls saturation towards zero — the light and dark ends drift grey. Moving lightness in HSL keeps the hue and saturation and only changes how light the colour is, which is what a scale is meant to do.
- What is the contrast number on each step?
- The WCAG contrast ratio between the swatch and the black or white text drawn on it, whichever is more readable. 4.5:1 is the minimum for body text and 3:1 for large text, so the number tells you at a glance which steps can carry text and which are background only.
- Which harmony should I use?
- Analogous for something calm — the colours sit next to each other on the wheel and rarely fight. Complementary for a single accent that must stand out. Triadic and tetradic give more colours than most interfaces need; they are useful for illustration, less so for a product.
Related tools
The colours a photograph is actually made of, as hex, RGB and ready-to-paste CSS variables.
Build a gradient, see it full width, and copy the declaration — with stop positions left to CSS unless you set them.
Convert between hex, RGB and HSL, and check whether two colours are readable together.
Strip comments and whitespace from a stylesheet without touching what is inside a string or a data URI.