Color Harmonies
See complementary, triadic and other color schemes on a wheel.
Color Harmonies: the tool
Base color and scheme
Hue 358°, saturation 75%, lightness 59%.
Triadic
Three colors evenly spaced around the wheel. Lively, and balanced when one leads.
indianred
limegreen
royalblue
| Color | HEX | RGB | HSL | HSV | Nearest name | Hue | Lightness |
|---|---|---|---|---|---|---|---|
| Color 1 | indianred | 358° | 59% | ||||
| Color 2 | limegreen | 118° | 59% | ||||
| Color 3 | royalblue | 238° | 59% |
How it looks with color-vision deficiency
A model of how these colors tend to look, not a diagnosis. People and screens differ.
- Typical vision
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
No pair of these colors turns hard to tell apart in any of the four deficiencies.
Export as code or data
Letters, digits and dashes.
A color harmony is a set of colors whose positions on the color wheel have a fixed relationship. Choose a base color and this page shows all seven classic schemes at once: complementary, split complementary, analogous, triadic, tetradic, square and monochromatic. Pick one to see its colors placed on the wheel, with their hues and lightness, ready to copy or export.
How it works
Every harmony turns the hue of your base color by fixed angles and leaves saturation and lightness alone. Complementary adds 180 degrees, the opposite side of the wheel. Split complementary adds 150 and 210, the two colors beside the complement. Analogous uses minus 30 and plus 30, the neighbors. Triadic adds 120 and 240. Tetradic, drawn as a rectangle, adds 60, 180 and 240. Square adds 90, 180 and 270. There are 7 schemes in all, including monochromatic.
Monochromatic keeps the hue and changes only the lightness, in 5 steps from 30 points darker to 30 points lighter than your color, so your color sits in the middle. The wheel shows the hue of each color as a numbered point, joined by a line, so you can see the shape of the harmony: a line for two colors, a triangle for three and a rectangle or square for four.
The wheel is the HSL wheel that CSS and most design tools use, drawn with the colors of its hues at 85% saturation. It places red at the top, green a third of the way around and blue two thirds of the way around. The hue and lightness of each color are listed in the table, so nothing is shown only in the drawing.
How to use it
- Enter your base color, or choose it with the picker.
- Press a scheme in the list to see it on the wheel. The small strips preview every scheme for your color.
- Read the table for the HEX, RGB, HSL and HSV values, the hue and the lightness of every color, and press a value to copy it.
- Export the harmony as CSS, Tailwind, JSON or an image, or save it as a palette.
Example
Every scheme for one red, calculated by the same code as the tool above.
What was set
- Base color
- #E5484D
What came out
- Complementary
- #E5484D, #48E5E0
- Split complementary
- #E5484D, #48E591, #489CE5
- Analogous
- #E5489C, #E5484D, #E59248
- Triadic
- #E5484D, #4DE548, #484DE5
- Tetradic (rectangle)
- #E5484D, #E5E048, #48E5E0, #484DE5
- Square
- #E5484D, #9CE548, #48E5E0, #9148E5
- Monochromatic
- #821216, #C51C21, #E5484D, #EF8B8E, #F8CECF
Good to know
- The harmonies are worked out on the HSL wheel. The red, yellow and blue wheel that painters learn puts the same relationships on different hues, so the complement of red is cyan here and green on a painter's wheel.
- Saturation and lightness are kept from the base color, but HSL lightness is not the same as how bright a color looks. A yellow and a blue of equal HSL lightness are very different in brightness.
- A harmony is a set of hues, not a finished palette. It does not tell you how much of each color to use or which color should lead, and it does not check contrast for text.
Questions people ask
What is a complementary color?
It is the color directly opposite yours on the wheel, 180 degrees away. Complementary colors give the strongest hue contrast, so they make each other stand out, and they are often used for a call to action against a calm background.
How do I choose between triadic and tetradic?
Triadic gives three evenly spaced hues and is bold but simple to balance. Tetradic and square give four, which offers more variety and is harder to balance. With either, let one color lead and use the others in smaller amounts.
What is the 60-30-10 rule?
It is a rule of thumb for applying a palette: about 60% of a design in a dominant color, 30% in a secondary color and 10% in an accent. It works well with any harmony, because it makes one color lead instead of letting all compete.
Why are the colors of a harmony not equally bright?
The harmony keeps the same HSL lightness, and the eye does not see equal HSL lightness as equal brightness: yellows and greens look brighter than blues and purples. Adjust the lightness of individual colors afterward in the palette generator.