Color Palette Generator
Build a palette from one seed colour: related hues, a tint and shade ramp for each, and the contrast figures that say which stops can carry text.
Enable JavaScript to build your own palette; the one below uses the defaults.
Usually the brand colour. Everything else is derived from its hue and saturation.
How many hues, and how far apart. Monochrome is one hue; tetradic is four and is hard to balance.
Nine or eleven matches the 100 to 900 convention. Five is enough for most sites.
Ramp 1, hue -30°
- #D9F4FC 18.3:1
- #98E1F6 14.4:1
- #56CDF1 11.4:1
- #14BAEB 9.2:1
- #0E86A9 5.0:1
- #095267 8.7:1
- #031E26 17.2:1
Ramp 2, hue +0°
- #D9E3FC 16.3:1
- #98B1F6 9.9:1
- #5680F1 5.8:1
- #144EEB 6.3:1
- #0E38A9 9.7:1
- #092267 14.6:1
- #030D26 19.3:1
Ramp 3, hue +30°
- #E1D9FC 15.5:1
- #AD98F6 8.6:1
- #7956F1 4.8:1
- #4514EB 8.2:1
- #320EA9 11.9:1
- #1E0967 16.3:1
- #0B0326 19.9:1
:root {
--color-brand-1-100: #d9f4fc;
--color-brand-1-200: #98e1f6;
--color-brand-1-300: #56cdf1;
--color-brand-1-400: #14baeb;
--color-brand-1-500: #0e86a9;
--color-brand-1-600: #095267;
--color-brand-1-700: #031e26;
--color-brand-2-100: #d9e3fc;
--color-brand-2-200: #98b1f6;
--color-brand-2-300: #5680f1;
--color-brand-2-400: #144eeb;
--color-brand-2-500: #0e38a9;
--color-brand-2-600: #092267;
--color-brand-2-700: #030d26;
--color-brand-3-100: #e1d9fc;
--color-brand-3-200: #ad98f6;
--color-brand-3-300: #7956f1;
--color-brand-3-400: #4514eb;
--color-brand-3-500: #320ea9;
--color-brand-3-600: #1e0967;
--color-brand-3-700: #0b0326;
}Build a palette from one seed colour: the related hues, a tint and shade ramp for each, and the contrast figure for every stop so you know which ones can carry text.
How to use
- Start with the brand colour. Everything else is derived from its hue and saturation, so the palette stays recognisably yours.
- Pick the scheme by how many hues you can actually use. Most interfaces need one brand hue plus a neutral; a tetradic palette is four hues to balance and usually ends up with two unused.
- Use seven or nine stops if you are matching the 100 to 900 convention that most design systems and Tailwind use. Five is plenty for a small site.
- Read the contrast column. A stop that fails at 4.5:1 against both black and white cannot carry body text on either, whatever it looks like.
- Copy the custom properties and rename them to your own scale if you already have one.
Example
A five stop ramp with its contrast against white:
--color-brand-100: #d9e3fc 1.3:1 on white background only
--color-brand-200: #7799f3 2.8:1 on white large text, borders
--color-brand-300: #144eeb 6.3:1 on white body text
--color-brand-400: #0c2d88 12.0:1 on white body text, headings
--color-brand-500: #030d26 19.3:1 on white body text, headingsThe pale end of any ramp is for backgrounds and borders: at 1.3:1 nothing readable sits on white. Text needs a stop from the dark end, which is why a ramp without dark stops is hard to use.
Pitfalls
- HSL lightness is not perceived lightness. Yellow at 50 percent lightness looks far brighter than blue at 50 percent, so a mathematically even ramp does not look even.
- A palette generated purely from hue rotation gives colours that are related but not necessarily pleasant. Treat the output as a starting point and adjust by eye.
- The middle of a ramp is the dangerous part: it often fails against both white and black, which makes it useless for text.
- A complementary pair at full saturation vibrates when placed adjacent. Desaturate one side, or separate them with a neutral.
- Around eight percent of men have some red-green colour deficiency, so a palette that relies on red versus green to carry meaning fails for them. Never encode meaning in hue alone.
- Dark mode is not the same palette inverted. Colours need different saturation and lightness against a dark surface to look the same strength.
- A ramp with eleven stops that nobody uses is worse than five that everybody does. Add stops when a real design needs them.
- The contrast figures here are for the flat colour. Over a gradient or an image they mean nothing.
Compatibility
The maths is HSL conversion and WCAG 2 contrast, both standard and stable. The output uses CSS custom properties, supported everywhere, and the 100 to 900 naming that Tailwind, Material and most design systems share. For a WordPress block theme, the same values go into theme.json under settings.color.palette. The tool runs entirely in your browser.
Frequently asked questions
How many stops do I need?
Why does the middle of my ramp fail contrast?
Is the scheme guaranteed to look good?
Can I use this for dark mode?
How do I get this into a WordPress theme?
theme.json under settings.color.palette, with the same names. WordPress generates the presets and the editor UI from that.