Color Harmony Generator

// Every harmony for one base color

Start with a hex color and the page calculates all twelve relationships immediately. The active strip gives you the colors to copy now. The All harmonies list keeps every other result visible, so comparing complementary, triadic, analogous, split complementary, tetradic, and monochromatic schemes does not require changing a menu and trying to remember the previous result.

The familiar rules are simple positions around a hue circle. A complement sits 180 degrees from the base. A triad uses 0, 120, and 240 degrees. Split complementary replaces the direct opposite with the two colors on either side of it, at 150 and 210 degrees. Analogous colors stay close at minus 30, 0, and plus 30 degrees. Tetradic and pentadic divide the circle into four or five equal steps.

The less common rows are useful when the standard schemes feel predictable. Double complementary forms two opposing pairs. Compound pairs two nearby hues with their complements. Analogous accent adds one opposite color to an analogous trio. Golden ratio advances by the 137.5 degree golden angle. Near complementary stops at 165 degrees for contrast that is less direct than a true opposite.

// Why these hue rotations use OKLCH

HSL makes hue rotation easy, but its lightness number does not track perceived brightness. A fully saturated yellow and a fully saturated blue can both say 50 percent lightness while the yellow looks dramatically lighter. Hold that HSL number steady across a harmony and some members can dominate while others appear to sink.

OKLCH separates perceived lightness, chroma, and hue more usefully. This generator converts the base color to OKLCH, changes the hue angle, and holds lightness steady. The resulting colors keep a more even visual weight, especially when a scheme crosses from warm yellows and oranges into blues and purples.

Some OKLCH coordinates cannot be displayed in sRGB. Saturated colors hit that boundary often after a hue rotation. Instead of clipping red, green, or blue channels and quietly shifting the hue, the generator lowers chroma until the color fits while preserving the requested hue and lightness. That is why the displayed hex can be less vivid than the base at some positions, and why the relationship remains accurate.

// Turning a harmony into a usable palette

A harmony describes relationships between hues. It does not guarantee readable text, enough light and dark range, or a balanced interface by itself. For a website, pick one color as the dominant surface or brand color, a second for supporting areas, and the strongest contrast as an accent. The 60-30-10 split is a useful starting heuristic, not a rule: roughly 60 percent dominant, 30 percent supporting, and 10 percent accent.

Check any text and background pair with the contrast checker before shipping it. Equal OKLCH lightness is useful for keeping a hue set visually even, but text needs a deliberate lightness difference from its background. Harmony and accessibility answer different questions.

Each row copies hex, RGB, or OKLCH and can hand one color to the palette generator as a locked starting point. Copy all hex values for a design file, copy the CSS custom properties for a stylesheet, or download the labeled PNG. The PNG is rendered on the page first, so the file you download is visible before it leaves the tool.

// fair questions

How do I find a color's complement?

Rotate its hue by 180 degrees. This page performs that rotation in OKLCH, which holds perceived lightness steady instead of trusting HSL's uneven lightness scale. Enter the color as hex and choose Complementary. The first swatch is the base and the second is its opposite. A neutral gray has little or no chroma, so changing its hue produces little or no visible difference.

What is the difference between triadic and split complementary?

A triadic scheme uses three hues spaced evenly at 0, 120, and 240 degrees. It spreads color around the whole circle and tends to feel broad and energetic. Split complementary keeps the base, skips the exact opposite, and uses the two neighboring hues at 150 and 210 degrees. It keeps strong contrast but usually feels less tense than a direct complementary pair.

Which color harmony should I use for a website?

Start with analogous for a restrained interface, split complementary for a controlled accent, or triadic when three distinct roles need to remain easy to tell apart. Then assign proportions rather than using every color equally. A 60-30-10 split is a practical first pass. Always check actual text and background pairs for contrast, because a harmonious pair can still be unreadable.

Why do my HSL rotated colors look darker?

HSL lightness is arithmetic on RGB channels, not a model of how bright a color looks. Yellow and blue at the same HSL lightness are visibly different in brightness. Rotating hue while holding HSL lightness constant therefore creates an uneven set. OKLCH was fitted to perceived lightness, so keeping its L value steady produces colors with a more consistent visual weight.

Can I export a color harmony as CSS?

Yes. Copy CSS variables writes a :root block with --harmony-1, --harmony-2, and so on in the same order as the active strip. You can also copy all hex values, copy hex, RGB, or OKLCH from any individual row, or download a labeled PNG that is previewed on the page first.

Do my colors leave the browser?

No. Harmony generation, gamut fitting, copying, and PNG rendering all happen on your device. Nothing is uploaded, no account is required, and the only time a color travels is when you choose to copy, download, or open it in another tool on this site.