Color Palette Generator from One Base Color
Pick one color you already know you want, choose how the rest should relate to it, and get five hexes you can paste into a stylesheet. Every swatch is a button — click it to copy.
Your palette
The label on each swatch is drawn in black or white, whichever is more readable on that color.
What the harmony names actually mean
Every option here is one rule applied to a circle. Hue runs 0–360 degrees, your base color sits somewhere on it, and the harmony decides where the other swatches land.
- Complementary — the hue 180 degrees away. Maximum separation, which is why it works for a call-to-action button against a branded background, and why a whole page built from it feels loud.
- Analogous — neighbours within 60 degrees. Calm and coherent, with the built-in problem that nothing stands out. If you need an accent, steal it from another rule.
- Split complementary — instead of the exact opposite, the two hues on either side of it. You keep most of the contrast and lose the vibrating quality that pure complements have at full saturation.
- Triadic and square — three or four hues spaced evenly around the wheel. Both give you a lot of color, and both need one of the hues to dominate or the result looks like a toy.
- Monochromatic — one hue, five lightnesses. The safest choice, and the one that most often needs a borrowed accent color to stop looking flat.
One thing that surprises people: this is the RGB wheel, not the color wheel you were taught in art class. On the RGB wheel the opposite of blue is yellow. On the red-yellow-blue wheel painters use, the opposite of blue is orange. Neither is wrong, they are different models, but if a complementary result looks unfamiliar that is usually why.
Five hexes is not a palette yet
A working interface palette needs three things this tool does not produce.
Proportion. The classic guidance is roughly 60% of the surface in a dominant color, 30% in a secondary one, 10% in the accent. Five swatches shown at equal size hide that entirely, so a palette that looks balanced here can be overwhelming once it is on a real page.
Neutrals. Almost every pixel of a real product is gray, white or near-black: text, borders, backgrounds, disabled states. No harmony rule generates those. Build them separately, and mix a little of your base hue into them — grays with a few points of saturation borrowed from the brand hue look intentional, while pure #808080 looks like a placeholder.
States. Hover, active, focus, disabled and selected all need their own values, usually derived by shifting lightness up or down from the base by 6–10 points. Plan for four or five steps per important color, not one.
Where this generator falls short
It works in HSL, which means the lightness numbers are mathematical, not perceptual. Yellow at 50% lightness looks far brighter than blue at 50% lightness, because your eye is much more sensitive to green than to blue. In a triadic or square palette the yellow-ish swatch will usually look like it is glowing next to the others. Adjust it by hand; every designer does.
A near-gray base defeats it completely. If your base has very low saturation, rotating the hue changes almost nothing, and you will get five swatches that look identical. The tool will still show them, and the hex codes really are different. They are just not different enough to use. Start from a saturated color and desaturate afterwards.
Harmony also says nothing about legibility or about color blindness. Two swatches can be 120 degrees apart and still be indistinguishable to someone with deuteranomaly, the most common form of red-green color vision deficiency. And a color that pairs beautifully with your base can be unreadable as text on it. Check every text-on-background pair separately before shipping.
Naming the variables you export
The export uses positional names, --palette-1 through --palette-5, because the tool has no idea what the colors are for. Rename them by role before you commit: --surface, --accent, --accent-hover, --danger.
Resist naming them by hue. A variable called --blue-500 is a small time bomb: the day the brand changes to green, either the name lies or you touch every file that uses it. Role names survive a rebrand, hue names do not.
Frequently asked questions
How many colors should a palette have?
For an interface, one dominant color, one accent and a family of four to six neutrals covers most of it. Five hues is already more than most products use well. Extra colors are easier to add later than to remove.
Which harmony should I pick if I do not know?
Analogous for something calm, complementary if you need one element to demand attention. Both are hard to get wrong. Triadic and square are the ones that need a confident hand, because three or four strong hues will fight unless one clearly leads.
Why do all five swatches look almost the same?
Your base color is close to gray. Hue rotation only has an effect when there is saturation to rotate, so a desaturated base produces five near-identical colors. Start from a vivid version of the color and reduce the saturation afterwards.
Can I extract a palette from an image here?
Not in this tool. It works from a single base color you provide. If you have an image, pick the dominant color out of it with any color picker, paste that hex in, and use it as the base.
Are these colors accessible?
Not automatically. A harmony rule arranges hues and knows nothing about contrast. Test each text-and-background pair against the WCAG thresholds before you use it, and never rely on hue alone to carry meaning.
Last updated September 19, 2026