How do I make a color scheme with the wheel?

Pick a scheme, then drag the handle until the base color is right, or type a hex you already have. The other positions follow automatically and the swatches underneath update as you go. Click any swatch to copy its hex, or copy the whole scheme as CSS custom properties.

Why does this wheel say the complement of red is cyan, not green?

School color wheels are built for paint, where red, yellow and blue are treated as primaries and green lands opposite red. Screens mix light instead, with red, green and blue as primaries, and on that wheel the color opposite red is cyan. Both wheels are internally consistent; this one is the wheel your display actually uses, so its complements cancel to grey when mixed as light.

Which color scheme should I choose?

Monochromatic is the safest and hardest to get wrong. Analogous stays calm and cohesive. Complementary and triadic bring contrast but want one clearly dominant color, or they compete. Tetradic offers the most variety and takes the most restraint. If the colors are for an interface, check the text pairs in the contrast checker before committing.

Can I use these colors in CSS?

Yes. Copy CSS puts the current scheme on your clipboard as custom properties, ready to paste into a stylesheet, and every hex can be copied on its own. The address bar tracks the wheel as you move it, so sharing an exact scheme is just sharing the link.

Color wheel

Drag the handle and watch the scheme follow. A color wheel arranges every hue in a circle, which turns color relationships into geometry: neighbours blend, opposites contrast, and every classic scheme is a fixed set of angles. Pick a scheme, set your base color, and copy the result.

Color scheme

Three colors spaced evenly around the wheel. Strong and lively, and usually best with one dominant color and two accents.

Start from a color

Saturation 64%

Brightness 100%

Drag the wheel or use the arrow keys on the marked handle. Hue 251°.

Check contrast

The six schemes, and when to reach for each

Harmonies are positions on the wheel rather than matters of taste, which is why they keep working across very different designs. Each example below is built on the same violet, so the differences you see are the schemes themselves.

Complementary

Two colors from opposite sides of the wheel. They make each other look more vivid, which is why the pairing is used for anything that needs to stand out.

Analogous

Three neighbours on the wheel. Nothing competes, so the result reads calm and settled, closer to how colour behaves in nature.

Split complementary

The base plus the two colors either side of its complement. It keeps most of the contrast while being much easier to balance.

Triadic

Three colors spaced evenly around the wheel. Strong and lively, and usually best with one dominant color and two accents.

Tetradic

Two complementary pairs, forming a rectangle on the wheel. The richest scheme available, and the hardest to keep from shouting.

Monochromatic

One hue at different lightness levels. Effortlessly cohesive, and the safest way to build a palette around a brand color.

Reading the wheel

Hue is only one of three axes

The circle shows hue: the quality that makes red red. The other two axes sit on the sliders. Saturation runs from the pure hue down to grey, and brightness from the full color down to black. Two colors can share a hue and still feel unrelated, which is usually a saturation gap rather than a hue problem. When a scheme looks almost right, try moving those sliders before reaching for a different hue.

This is the light wheel, not the paint wheel

The wheel taught with paint puts red, yellow and blue at equal spacing and green opposite red. A display mixes light, not pigment, so its primaries are red, green and blue, and the color opposite red becomes cyan. Neither wheel is wrong; they model different physics. Everything on this site uses the light wheel, because that is the one your screen renders and the one hsl() in CSS is built on.

Warm and cool are halves of the circle

Reds, oranges and yellows read as warm; blues, cyans and most greens read as cool. The split matters because warm colors advance and cool colors recede, which is a cheap way to control what a design leads with. It is the same effect that makes a warm white screen feel like lamplight and a cool one feel like an office.

Using a scheme without it shouting

A scheme names the colors, not the amounts. The old interior-design ratio still serves: roughly 60 percent of the design in a near-neutral built from the dominant color, 30 in the secondary, 10 in the loudest accent. Complementary pairs at full saturation and equal area vibrate against each other, so let one side win. And before any color carries text, check the pair in the contrast checker.

Common questions

What is a color wheel?: A color wheel arranges every hue in a circle, so that the relationships between colors become distances and angles. Neighbours blend, opposites contrast, and every classic color scheme is a fixed set of positions on the circle. That is what makes it a working tool rather than a diagram.
How do I make a color scheme with the wheel?: Pick a scheme, then drag the handle until the base color is right, or type a hex you already have. The other positions follow automatically and the swatches underneath update as you go. Click any swatch to copy its hex, or copy the whole scheme as CSS custom properties.
What are complementary colors?: Two colors from opposite sides of the wheel, 180 degrees apart. Placed next to each other they make each other look more vivid, which is why the pairing turns up wherever something needs to stand out: warning signs, sports kits, call-to-action buttons.
Why does this wheel say the complement of red is cyan, not green?: School color wheels are built for paint, where red, yellow and blue are treated as primaries and green lands opposite red. Screens mix light instead, with red, green and blue as primaries, and on that wheel the color opposite red is cyan. Both wheels are internally consistent; this one is the wheel your display actually uses, so its complements cancel to grey when mixed as light.
Which color scheme should I choose?: Monochromatic is the safest and hardest to get wrong. Analogous stays calm and cohesive. Complementary and triadic bring contrast but want one clearly dominant color, or they compete. Tetradic offers the most variety and takes the most restraint. If the colors are for an interface, check the text pairs in the contrast checker before committing.
Can I use these colors in CSS?: Yes. Copy CSS puts the current scheme on your clipboard as custom properties, ready to paste into a stylesheet, and every hex can be copied on its own. The address bar tracks the wheel as you move it, so sharing an exact scheme is just sharing the link.

All tools