Color Palette Generator
Generate a color palette from any base color - free, no signup.
Each scheme uses the standard fixed colour-wheel angle for its name - complementary is exactly 180° from your base color, triadic is 120° apart, and so on - not a randomised suggestion.
What this tool does
Pick a base color and a harmony scheme - complementary, analogous, triadic, tetradic or monochromatic - and get a matching palette instantly. Each scheme uses the exact, standard colour-wheel angle its name describes: complementary is precisely 180° around the wheel from your base color, triadic colors are exactly 120° apart, and so on, rather than an approximate or randomised suggestion.
Generates a color palette from a base color using standard colour-theory harmony rules.
Offers five schemes: complementary (2 colors, 180° apart), analogous (3 colors, 30° apart), triadic (3 colors, 120° apart), tetradic (4 colors, 90° apart), and monochromatic (5 shades of the same hue).
Shows each palette color as a swatch with its hex code, ready to copy.
Accepts a base color as hex, rgb()/rgba(), or hsl()/hsla() text, or picked visually - the text field and the native color picker stay in sync however you set the color.
Copy button copies every hex code in the current palette at once, one per line.
How to use it
- Pick or type a base color.
- Choose a harmony scheme.
- Copy the hex codes for the generated palette.
Why use this generator
Colours that work together follow relationships on the colour wheel. A palette from a base colour is a reliable starting point for a design.
Why we built it
We built the palette generator on the exact colour-wheel angles for each scheme (180 degrees for complementary, 120 for triadic). Check text colours with the contrast checker and extract colours from a picture with the image colour picker.
Related tools worth a look: the Gradient Generator.
Who this tool is for
- Designers building a brand or UI palette
- Artists and decorators exploring colour schemes
- Students of colour theory
When to use it
- Starting a brand or UI palette.
- Finding complementary or triadic colours.
- Exploring harmony schemes.
- Teaching colour theory.
What each scheme actually means
Named harmony rules use fixed, specific angles around the colour wheel.
Complementary takes the color directly opposite your base on the colour wheel (180° away) - high contrast, often used for accents against a dominant color. Analogous takes colors close to your base (30° either side) - naturally harmonious, since they share similar undertones. Triadic picks three colors evenly spaced 120° apart, and tetradic picks four spaced 90° apart - both give vibrant, balanced palettes with more variety than analogous. Monochromatic keeps the exact same hue and saturation, varying only lightness - the safest option when you want guaranteed harmony with tonal variation.
How the base color is actually converted into a palette
The math runs in HSL, not RGB, so only the hue moves for four of the five schemes.
Whatever you type - hex, rgb()/rgba(), or hsl()/hsla() - is first parsed down to plain RGB, then converted to HSL (hue, saturation, lightness). For complementary, analogous, triadic and tetradic, the generator only rotates the hue by that scheme's fixed angle and leaves saturation and lightness exactly as they were in your base color - so every swatch in the palette keeps the same vividness and brightness as the color you started from, and only the position on the color wheel changes.
Monochromatic works differently
Monochromatic doesn't rotate hue at all. It fixes both hue and saturation from your base color and instead steps lightness through five fixed values - 20%, 35%, 50%, 65% and 80% - to build the five shades. That's why a very dark or very light base color still produces a full five-shade range: the lightness values are fixed points, not offsets from your base color's own lightness.
| Scheme | Swatches | What moves |
|---|---|---|
| Complementary | 2 | Hue rotated 180° |
| Analogous | 3 | Hue rotated -30° / 0° / +30° |
| Triadic | 3 | Hue rotated 0° / 120° / 240° |
| Tetradic | 4 | Hue rotated 0° / 90° / 180° / 270° |
| Monochromatic | 5 | Lightness set to 20% / 35% / 50% / 65% / 80% |
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | A base colour and a scheme. |
| Output | A palette with hex codes and swatches. |
| Schemes | Complementary, analogous, triadic, tetradic and split-complementary. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Colours clash in practice | Harmony is not accessibility. | Check contrast and adjust lightness. |
| Palette is too saturated | Wheel colours share saturation. | Tone them down. |
| Same result every time | It is deterministic. | Change the base colour. |
Assumptions and limitations
- These are standard geometric colour-wheel relationships, not a machine-learning or trend-based palette suggestion - the same base color and scheme will always produce the same palette.
- The generator doesn't check whether the resulting colors have sufficient contrast against each other for text/background use - pair the result with the contrast checker for that.
Frequently asked questions
How do I generate a color palette online for free?
Pick a base color and a harmony scheme, and the matching palette appears instantly with hex codes ready to copy.
What is a complementary color scheme?
Two colors exactly opposite each other on the colour wheel (180° apart) - a high-contrast pairing often used for one dominant color plus an accent.
What is the difference between triadic and tetradic?
Triadic uses three colors spaced 120° apart around the wheel; tetradic uses four spaced 90° apart - both give vibrant, balanced palettes, with tetradic offering more colors to work with.
What does a monochromatic palette give me?
Five shades of the exact same hue and saturation, varying only in lightness - guaranteed to look harmonious together since they're all the same base color.
Is my data uploaded anywhere?
No. The palette is generated entirely in your browser - nothing is sent to a server.
What color formats can I type into the base color field?
Hex (#3a7bd5 or the 3-digit shorthand #36f), rgb()/rgba(), and hsl()/hsla() are all accepted - whichever format you type is parsed and converted, and the color picker swatch updates to match it.
Does saturation or lightness change for complementary, triadic or tetradic?
No - only the hue rotates by the scheme's fixed angle; saturation and lightness stay exactly as your base color for those four schemes. Monochromatic is the exception: it holds hue and saturation fixed and steps lightness through five set values instead.