Color Scheme Generator, Complementary and Triadic, Free
Make a color scheme from one base color in your browser: complementary, split-complementary, analogous, triadic, tetradic, square or monochromatic. Copy hex codes, CSS or JSON. Nothing is uploaded.
Or press the space bar. Locked swatches stay.
rgb(59, 130, 246)
hsl(217, 91%, 60%)
- On white3.67:1AA Large
- On black5.70:1AA
rgb(246, 175, 59)
hsl(37, 91%, 60%)
- On white1.88:1Fail
- On black11.11:1AAA
About the Color Scheme Generator
A colour scheme is a rule for choosing colours that sit well together by their position on the colour wheel. The Color Scheme Generator applies those rules for you. This page opens the same tool as the Color Palette Generator, set to the Complementary scheme, so you see a base colour and its opposite on the wheel straight away. Switch to Split-complementary, Triadic, Tetradic (rectangle), Square, Analogous or Monochromatic to try the other harmonies on the same base colour.
The colours are worked out in your browser. Nothing is uploaded, and no account is needed.
How to use it
Steps
- Type a Base colour such as
tomato,#ff6347orhsl(9, 100%, 64%), or use the colour-picker button. - Read the two swatches that appear for the Complementary scheme.
- Pick another option under Scheme to see a different harmony from the same base.
- Press Copy #rrggbb on a swatch, or use Copy CSS to take the whole set.
The colour wheel in numbers
Colour theory places hues round a circle of 360 degrees: red near 0, green near 120 and blue near 240. A scheme is a set of angles. The tool turns your base colour to each angle and keeps its saturation and lightness, so the swatches differ only in hue:
The offsets are:
- Complementary: 0 and 180
- Split-complementary: 0, 150 and 210
- Triadic: 0, 120 and 240
- Tetradic (rectangle): 0, 60, 180 and 240
- Square: 0, 90, 180 and 270
- Analogous: -60, -30, 0, 30 and 60
Complementary first
Two colours directly opposite each other, 180 degrees apart, give the strongest hue contrast. Take tomato, which is #ff6347 or rgb(255, 99, 71). Its hue is about 9 degrees, so its complement has hue
which is a cyan-teal. Placed side by side the red-orange and the cyan-teal make each other look more vivid. Because lightness and saturation are kept, both swatches stay close in strength, which is why a complementary pair works best with one colour as the main shade and the other as a small accent.
When a pair is too harsh
Split-complementary replaces the opposite colour with its two neighbours, at 150 and 210 degrees. From a base hue of 217 you get 217, 7 and 67, since and . It keeps most of the contrast but is gentler. Triadic spaces three colours evenly, and Square and Tetradic give four. More colours means more variety but more care when you balance them.
Analogous does the opposite: it uses neighbours within 60 degrees of the base, so the set feels calm and unified. Monochromatic keeps one hue and varies only lightness.
Check the pairing
A scheme tells you which hues go together, not whether text is readable on them. Each swatch shows its contrast ratio and a WCAG badge for white and for black text. A ratio of 4.5:1 earns AA, 7:1 earns AAA, and 3:1 is AA Large for big text.
Using the result
Edit the Hex code of any swatch to nudge it, and press Lock to keep it while you try other schemes. The page address records the colours and scheme, so you can send the link to a colleague. To pull a base colour from a photograph, use the Image Color Picker. For the full guide to every scheme, exports and sharing, see the Color Palette Generator, and for the same idea on a random start, the Random Color Palette.
Frequently asked questions
What is a complementary colour?
It is the colour directly opposite another on the colour wheel, 180 degrees away in hue. The tool keeps saturation and lightness and only turns the hue, so the base hsl(217, 91%, 60%) gives a complement with hue 37, an orange.
How do I get more than two colours?
Choose another option under Scheme. Split-complementary gives three colours, Triadic three, Tetradic (rectangle) and Square four, and Analogous five. Monochromatic gives 5 to 9 shades.
Which scheme should I choose?
Choose Complementary for strong contrast, Split-complementary for contrast that is less harsh, and Analogous for a calm, unified look. Triadic, Tetradic and Square give more variety and need more care to balance.
Why do all the swatches look equally strong?
The tool changes only the hue and keeps the base colour's saturation and lightness. If you want a quieter accent, edit its Hex code by hand, then press Lock so it stays.
Does a harmonious scheme guarantee readable text?
No. Hue harmony says nothing about brightness, so check the contrast badges on each swatch. White on black is 21:1, and a ratio of 4.5:1 or more earns AA.
Is my colour sent anywhere?
No. Everything runs in your browser, and nothing is uploaded. The page address stores only the colours and scheme, so you can send it to someone else to show the same result.