Colour palette generator
Nearest named colour: turquoise
Calculated in your browser · nothing is uploaded
Generates a palette of two to ten colours by spreading hues around the wheel and holding saturation and lightness inside one band, so the set reads as designed rather than as five unrelated colours. A mood pins that band (pastel, muted, vivid, neon, warm or cool), and a scheme replaces the spread with a construction off one base colour: complementary, analogous, triadic, tetradic, split or monochromatic. Every swatch copies as hex, RGB, HSL or OKLCH, and the nearest CSS colour name is shown underneath.
How to use the colour palette generator
A palette is a set of relationships rather than a set of colours, and the relationship doing most of the work is not hue at all. It is holding saturation and lightness inside one band while the hues move. Do that and several unrelated hues read as a deliberate set; let saturation wander and the same hues read as a mistake. A small amount of jitter goes into the hue spacing so the result does not look mechanically even.
The classical constructions are the vocabulary for what to do next, and they are all spacings on the same wheel. Complementary is one hue and the one 180 degrees opposite: the strongest two-colour contrast there is, and the one most often ruined by using both in equal amounts, because two similarly saturated opposites vibrate at their shared edge. The convention that makes it work is roughly 90 per cent of one and 10 per cent of the other. Analogous means neighbours about 30 degrees apart, reliably harmonious and reliably flat, because nothing in it contrasts; an accent has to come from lightness or from across the wheel. Triadic is three hues 120 degrees apart, balanced and loud, and it needs one to dominate or the eye has nowhere to settle. Tetradic is four hues 90 degrees apart, two complementary pairs, which is the most colours of any classical scheme and the hardest to keep from reading as two separate palettes; if it is not working, a triad or a split usually is. One caveat applies to all four: this is the RGB hue wheel, so the complement of blue is yellow, not the orange the red-yellow-blue wheel from art class would give you.
Mood is the other axis, and each name is a specific pair of settings rather than a feeling. A pastel is high lightness and reduced saturation, which is what separates it from a plain tint, and which is why white text on one almost never passes while dark text does. A muted colour is low saturation at middling lightness, which is why interfaces are built from them: saturation stays in reserve as a signal, so one saturated accent has somewhere to stand. Neon is near-maximum saturation, which works because a display emits light rather than reflecting it, and which is exactly why it prints as mud, being outside the CMYK gamut entirely; two neon colours at similar lightness also vibrate against each other, so what goes under them wants to be very dark and close to neutral. Warm runs roughly hue 335 through 60 and cool roughly 160 through 280. Warm colours appear to advance and cool ones to recede, which is a compositional fact rather than a physical one, since blue light is hotter than red. It is also why so many interfaces settle on blue: the least emotionally loaded hue in most cultures, and one that recedes far enough to leave a warm accent room to stand out. Blue is also the hue that varies most between displays, so look at one on a second screen before committing to it.
Two tests are worth running on anything destined to be a brand palette. Convert it to greyscale: if the primary and the secondary collapse to the same grey they are indistinguishable in monochrome and to many colour-blind viewers. And put it beside the two or three brands you appear next to in a listing, because a palette that is beautiful and identical to a competitor’s is a liability. A working brand set is small, and only the accent wants full saturation; a whole palette at maximum is exhausting and leaves nothing to emphasise with.
What no generator can do is tell you whether two of the colours are readable together. That is a property of a text-and-background pair at a given size rather than of a colour set, and a palette can be beautiful and completely unusable for text. A five-colour set has ten pairs, most of them irrelevant; check the ones you will actually put text on, against 4.5:1 for body copy and 3:1 for large text and interface components. Keeping the set muted improves the odds in both directions, since middling lightness at low saturation is where usable contrast is most likely, but it guarantees nothing.
A tonal palette is a different shape from any of this. Material and Tailwind both number one hue from near-white to near-black rather than spreading several hues, because numbered tones make contrast predictable in a way named colours never do: a fixed gap between two tones stays safe whatever hue is swapped into it. The monochromatic scheme here gives the idea in five steps and the shades generator builds the full nine-step ladder. Neither is Material 3 exactly, which derives its thirteen tones in a perceptual space, so its steps are visually even where an HSL scale is only numerically even.
What people use it for
- Generating a five-colour set that holds together
- Picking a starting palette for a new interface or deck
- Drawing a pastel, muted, neon, warm or cool set rather than a general one
- Building a complementary, analogous, triadic or tetradic scheme off one colour
- Finding the hue directly opposite one you already have
- Working out a brand set and testing whether it survives greyscale
- Staying in the muted range, where usable contrast is likeliest in both directions
- Getting a single-hue tonal set to take to the shades generator
- Copying a whole palette as hex, RGB, HSL or OKLCH
- Deciding how many colours a brand palette actually needs
Questions
On the spread setting, hues go evenly around the wheel with a little jitter, at a saturation and lightness held within one band so the set looks coherent. Choose a scheme and the hues come from a wheel construction off the colour you set instead.
The mood control. Each name is a saturation and lightness band rather than a feeling: pastel is high lightness with the saturation pulled down, neon is near-maximum saturation, warm and cool also narrow the hue range.
Five is the usual working number: one dominant, one supporting, one accent and two neutrals, and only the accent wants full saturation. Past about seven it stops being possible to apply them consistently. Check the set in greyscale before you commit to it: if two collapse to the same grey they are indistinguishable in monochrome and to many colour-blind viewers.
Not on the spread setting; each press is a fresh draw, so copy one you like before generating again. A scheme is deterministic, and the same base colour gives the same set every time.
A tint is a colour mixed with white and nothing else. A pastel is lighter still and has its saturation pulled down as well, which is why white text on one essentially never passes. A muted colour shares the low saturation but sits at middling lightness, so it holds up as a background for text where a pastel does not.
Leave the palette muted and pick one saturated colour for the action you want taken. Saturation only works as a signal while the rest of the screen is holding back.
They are outside the CMYK gamut. A display emits light and ink reflects it, so the most saturated screen colours have no ink equivalent.
Highly saturated colours at similar lightness vibrate at their shared edge. Pair a neon with a very dark, near-neutral ground instead, which is why neon design is almost always on near-black.
Warm runs roughly 335 through 60: reds, oranges and yellows. Cool runs roughly 160 through 280: greens, blues and violets. The split describes how they behave in a composition rather than any physical property, since blue light is hotter than red.
It is the least emotionally loaded hue in most cultures, and it recedes, which leaves a warm accent free to stand out against it. It is also the hue that shifts most between displays, so check a blue on a second screen before committing.
A hue and the one 180 degrees opposite. It gives the strongest two-colour contrast, and works at roughly 90 to 10 rather than 50 to 50, or the shared edge vibrates.
The RGB hue wheel, so the complement of blue is yellow. The red-yellow-blue wheel from art class gives different answers.
Hues adjacent on the wheel, typically 30 degrees apart. Three is the classic count. They never clash, and nothing in them contrasts either, so an accent has to come from lightness or from across the wheel.
Three hues 120 degrees apart. Balanced and vivid, and it needs one to dominate or the eye has nowhere to settle; desaturating the other two is the usual fix.
Four hues 90 degrees apart, forming two complementary pairs. It is the most colours of any classical scheme and the hardest to balance, because the pairs relate to each other as well. Rarely use all four at equal weight; if it will not settle, a triad or a split is usually the better answer.
Not quite. Material and Tailwind number one hue from near-white to near-black, and Material 3 derives its thirteen tones in a perceptual space, so its steps are visually even. The monochromatic scheme here gives five steps at one hue and the shades generator builds a nine-step ladder, both in HSL, so the steps are numerically even rather than visually.
No. Accessibility is a property of a text-and-background pair at a given size, not of a colour set. A five-colour palette has ten pairs and most are irrelevant; check the ones you will use against 4.5:1 for body text and 3:1 for large text and interface components.
Hex, if it is going into a design tool or a stylesheet. Copy it in OKLCH when the point of the set is that the colours are equally light, because that is the only one of the four where the lightness figure says so.