What this is
Picking one color is easy. Picking four that look right together is the hard part. This tool starts from a single base color and works out the companion colors for you.
It uses the classic harmony rules that designers have relied on for a long time: complementary, analogous, triadic, split complementary, tetradic, and monochromatic. Each rule moves around the color wheel in a fixed way, so the results stay related instead of clashing.
Where this is useful
- Choosing an accent color for a website when you already have a brand color.
- Setting up chart colors that stay distinct but still look like one set.
- Building a slide deck theme from a logo color.
- Finding a shade range for buttons, hover states, and borders using the monochromatic rule.
- Sketching a room, poster, or illustration palette before you commit to paint or print.
How to use this tool
Type a hex code into the base color field, or use the color square next to it to pick one by eye. Three digit shorthand like #0b8 works, and the leading hash is optional.
Then choose a harmony rule. The palette updates right away and shows each color with its hex code and how far it sits from the base.
Copy a single color with the button under its swatch, or copy the whole list at once with the button above the palette. The base color panel also shows the RGB and HSL values, which is handy when you need to paste the color into a different kind of field.
Frequently asked questions
Which harmony rule should I pick? Complementary gives you the strongest contrast, so it suits an accent color against a main color. Analogous and monochromatic are calmer and work well for backgrounds and surfaces. Triadic and tetradic give you more variety, which helps when you need several categories to stay apart.
Does my color leave my browser? No. Everything runs in the page, and nothing is uploaded or stored.
Why does my base color appear in the middle of the monochromatic set? The monochromatic rule keeps your hue and changes only the lightness, two steps darker and two steps lighter. Your original color sits in the middle so you can see both directions at once.
Are these colors accessible for text? Not automatically. Harmony rules describe how colors relate, not how readable they are. Check any text and background pair against a contrast ratio before shipping it.