Color Harmony Generator

Seven palettes from one base color: turn the wheel, then try them on a screen

The color harmony generator starts from a single color you have already chosen and picks other colors a fixed number of degrees away on the color wheel. It shows seven harmonies side by side (complementary, analogous, triadic, split complementary, square, rectangle and monochromatic), so you can compare them at a glance instead of opening each one to see which feels closest to what you want.

Once the colors are chosen, the next question is how to divide them in practice. So the tool also shows a sample screen painted as 60% background, 30% card and 10% button, and for each color it reports whether white or black text reads better, using the contrast ratio.

When to use it

• When one color is already fixed: if a logo or a school or club color cannot change, choosing the rest is the hard part. A harmony rule narrows the choice to a few candidates by angle on the wheel, so you get a starting point without wandering through every possible color.
• When only one spot should stand out: for the key line on a slide or the sign-up button on a poster, the complement (directly opposite the base color) or the split complement (the two colors beside it) works well as the accent.
• When you need several colors that are easy to tell apart: chart series or calendar categories, say 3 or 4 of them, are less likely to be confused in a triadic or square palette, where hues sit 120° or 90° apart. Color alone is hard to read for people with different color vision, so add labels or patterns as well.
• When you need to explain why two colors go together: you can tell a client or a team, "these two colors are opposite on the wheel, so the contrast is strong." Enter the color you already have as the base and see which angles the others land on.

How to use it

1. Enter a base color. Select the color picker, or type HEX (#E07A5F), rgb(224 122 95) or hsl(13 68% 63%) in the text field. Dragging the dot on the color wheel also changes the hue of the base color.
2. In All 7 harmonies at a glance, compare the stripes and select the palette you like. The swatches at the top and the dots on the wheel switch to that palette.
3. Set the overall mood with the saturation and lightness sliders. Both apply to every color in the palette, so you can make it pale like a pastel or dark and calm while the angles between the colors stay the same.
4. In Try it as 60·30·10, press "Rotate main color" to choose which color takes the wide background. The list on the right shows the text color to put on each color and its contrast.
5. Take it with you. Selecting a swatch copies that color's HEX, and the buttons below export a HEX list, CSS variables, a PNG image or a link. The 12 most recent base colors are saved only in this browser.

The seven harmonies and their angles

This tool takes the HSL value of the base color and turns only the hue (H) by the rule, leaving saturation (S) and lightness (L) as they are. Only the monochromatic palette does the opposite: it keeps the hue and changes lightness in steps of 20. The table below shows the actual results for the base color #E07A5F (hsl 13° 68% 63%).

When the base lightness is above 75%, a monochromatic palette has no room to go lighter, so it makes two steps only on the dark side (−40 and −20). Below 25%, it makes two steps only on the light side (+20 and +40). This convention keeps the same color from appearing twice near white or black, as it did in the older version.

Why the complement differs from site to site: there is more than one color wheel

Enter the same red and one tool may answer with a cyan-leaning color while a textbook says green. Neither is wrong; they use different color wheels. The National Gallery of Art's art education material lists red, yellow and blue as the primary colors of paint, and red, green and blue as the primary colors of light used in televisions and computer screens. For the paint wheel it gives red and green, yellow and purple, and blue and orange as examples of complementary pairs.

This tool uses the screen wheel because you take the result away as HEX and CSS to use on a screen. W3C CSS Color 4 defines the hue angle of hsl() so that 0° is red, 120° is green and 240° is blue, and the angles here follow that definition exactly. The Munsell system places five principal hues, red (R), yellow (Y), green (G), blue (B) and purple (P), and the five intermediate hues between them (YR, GY, BG, PB and RP) at even intervals around a ring, so drawing the circle in that order puts BG opposite R. If you are choosing colors to carry over to paint or print, keep in mind that the complement on an artist's wheel can differ from the result here.

The same lightness number can look different to the eye

Equal HSL lightness (L) does not mean equal brightness to a person. Put white text on yellow #FFFF00 and on blue #0000FF, both at 50% lightness, and the WCAG contrast comes out very different.

That is why a palette made only by turning the hue often feels uneven in brightness, and its colors often have low contrast against each other. In the default split complementary example (#E07A5F, #5FE0BB and #5F85E0), the contrast between the colors is 1.8:1, 1.2:1 and 2.1:1, all short of 3:1. Put black text on the same three colors and you get 7.1:1, 12.8:1 and 5.9:1, which is plenty for reading. Rather than layering palette colors as text on background, it is safer to paint the background in a palette color and keep the text white or black.

Try it as 60·30·10

Even with every color chosen, splitting the area evenly tends to look busy. The 60-30-10 rule, widely used in interior design, suggests 60% main color on the largest surface, 30% secondary color next, and 10% accent color on small highlights. The sample screen in this tool is drawn so that the background (main color), the card (secondary color) and the button strip at the bottom (accent color) cover exactly 60, 30 and 10 percent.

• Two-color palettes have no accent strip, so the split is 70% background and 30% card.
• Four-color palettes paint a small strip under the card in the fourth color, for a split of 60, 25, 10 and 5.
• The 2-color and 4-color splits are conventions set by this tool, and the 60-30-10 rule itself is a starting point, not a number you must follow.

"Rotate main color" moves the roles one step along while the colors stay the same. The same three colors can give a very different impression depending on which one takes the background, so press it a few times and compare before you decide.

Putting text on a palette color

The list on the right picks whichever of white or black text has the higher contrast on each color and rates it against WCAG 2.2. Contrast ratios are shown truncated to one decimal place, so 4.48:1 is never rounded up to 4.5:1 to pass.

• Body text OK: 4.5:1 or higher (1.4.3 Contrast Minimum).
• Large text only: 3:1 or higher but below 4.5:1. Fine for big headings, not enough for body text.
• Too low: below 3:1.
• Button against background: an interactive element such as a button needs at least 3:1 against the color next to it for its shape to be distinguishable (1.4.11 Non-text Contrast). If it falls short, add a border or an underline.

Even with enough contrast, color alone should not carry meaning. WCAG 1.4.1 says not to use color as the only way of conveying information, so when you separate red for errors from green for success, add text or an icon too.

Common mistakes

• Entering white, black or gray as the base: a neutral color has no hue, so every rule gives the same color. For gray, raise the saturation slider; for white or black, also move the lightness slider away from 100% or 0%. The monochromatic palette, which changes only lightness, also works.
• Painting four colors in equal areas: square and rectangle palettes have many colors, and unless you pick one as the main color and use the others in small amounts, the eye has nowhere to settle.
• Using complementary colors as text and background: the hue contrast is strong, but if the lightness is similar the text looks blurred and the contrast ratio is low. Keep the text white or black.
• Treating a different complement on another site as an error: the screen wheel and the artist's wheel put different colors opposite each other. Check which wheel is being used first.
• Sending a screen HEX straight to a printer: print makes color with CMYK ink, so vivid screen colors may not come out the same. Use the RGB to CMYK converter to preview the printed color first.

Limits and cautions

• A harmony rule only fixes the relationship between hue angles. It does not guarantee the colors look good together, so make the final call on the screen where they will actually be used.
• Saturation and lightness stay the same as the base color, so the visible brightness differs from color to color, and the contrast between colors can be low.
• The monochromatic palette changes only HSL lightness and keeps saturation. At very light or very dark steps, a color may look duller or deeper than the original.
• The same HEX looks different depending on monitor settings, screen brightness, dark mode and the lighting around you.
• The contrast rating looks only at the WCAG 2.2 ratio. It does not account for actual text size and weight, or for differences in color vision. To see how a palette looks under different color vision, also try the simulation in the Color Blind Test.

As of The CSS specification, WCAG and the art education material were checked on October 20, 2026. The HEX values and contrast ratios in the tables were calculated directly with this tool's own rules.

Sources

• 01W3C: CSS Color Module Level 4 — HSLhsl() hue angle: 0deg red, 120deg green, 240deg blue
• 02W3C: WCAG 2.21.4.1 Use of Color, 1.4.3 contrast 4.5:1 (3:1 for large text), 1.4.11 non-text contrast 3:1
• 03National Gallery of Art: The Elements of Art – ColorPaint primaries red, yellow, blue; light primaries on screens red, green, blue; complement examples red–green, yellow–purple, blue–orange
• 04Adobe Express: The color wheel explainedThe RYB wheel is for artists and paint, the RGB wheel for screens (May 28, 2026)
• 05ScanHue: Complementary vs Analogous vs Triadic: Color Harmony BasicsHarmonies as HSL wheel angles: complementary 180°, analogous ±30°, triadic 120°, split complementary 150° and 210°, and how the painter's RYB wheel differs (July 15, 2026)
• 06NIST: Hue (H) — Munsell color systemPrincipal hues R, Y, G, B, P and intermediate hues YR, GY, BG, PB, RP (ASTM E1732)
• 07BEHR: The 60-30-10 RuleA widely used interior design guideline: 60% main, 30% secondary, 10% accent color (May 20, 2025)
• 08ScanHue: The 60-30-10 Rule: Balance Any Color PaletteApplying 60-30-10 to screens (background, cards, buttons); the 10% accent still has to meet WCAG contrast (July 29, 2026)

Frequently asked questions

Tools to use with this one