Boneyard Tools

Color harmony and the color wheel

How the HSL wheel arranges hue, what complementary, triadic and analogous schemes are, and why screen colors differ from paint.

Open the Complementary Color Calculator →

Hue, saturation and lightness

Every color on screen can be described by three values: hue, saturation and lightness, or HSL. Hue is the position around a 360 degree wheel, where 0 is red, 120 is green and 240 is blue. Saturation is how vivid the color is, from grey at 0 percent to fully colorful at 100 percent, and lightness runs from black through the pure hue to white. Because a color scheme is really a set of hue angles, working in HSL makes it easy to build one: hold saturation and lightness steady and just rotate the hue.

Complementary pairs

A complementary scheme uses two hues 180 degrees apart, on opposite sides of the wheel. The pairing produces the strongest contrast available, so complements make each other look brighter and are effective for highlights against a dominant color. Used at full strength across large areas they can feel harsh, so a common approach is to let one hue dominate and use its complement only for small accents such as buttons or links.

Triadic and analogous schemes

A triadic scheme takes three hues spaced 120 degrees apart, giving a lively, balanced set where no color dominates by angle. It tends to look energetic, and designers often pick one as the main color and use the other two sparingly. An analogous scheme instead uses neighbours a small step apart, here 30 degrees to each side, which share a family feeling and read as calm and cohesive. Analogous palettes are common in nature and work well for backgrounds and gradients.

Screen colors are not paint colors

The wheel this tool uses is the additive RGB wheel that displays and light sources follow, where red, green and blue are the primaries and red sits opposite cyan. The color wheel taught in art classes is the subtractive RYB wheel for mixing pigment, where red, yellow and blue are primaries and red sits opposite green. Both are valid, but they answer different questions, so a digital complement will not always match what a painter expects.

Frequently asked questions

Should I use a complement across a whole page?

Usually not at full strength. High-contrast complements are best kept for accents. Let one hue lead and reserve its complement for small elements you want to stand out.

Do these schemes work for accessible text contrast?

Not directly. Harmony schemes rotate hue but keep lightness the same, while readable text depends on a lightness or luminance difference. Check text against its background with a contrast ratio tool as well.

Can I build a scheme from a brand color?

Yes. Enter your brand hex as the base and the complement, triadic and analogous results give you matching accent and supporting colors that share its saturation and lightness.