Color wheel, schemes with hex, RGB and HSL.

A color wheel shows the colors of the spectrum in a circle, so you can see which colors sit opposite, next to or evenly spaced from each other. Pick a color on the wheel above, or type a hex code, and choose a scheme. The tool shows the colors of that scheme with hex, RGB and HSL values you can copy. Use it to find a complementary color, build a triad or find the colors beside your main one.

How to use the color wheel

1. Click or drag on the ring to choose a hue, type a hex code under Base color (hex), or move the Hue, Saturation and Lightness sliders.
2. Choose a Color scheme. White dots on the wheel show where the scheme's colors sit.
3. Choose a Wheel: digital or painter, explained below.
4. Press Copy hex on a swatch, Copy all hex for the set, or Copy as CSS variables to paste into a stylesheet.

The schemes

• Complementary: the color opposite yours, 180 degrees away. It gives the strongest contrast.
• Split complementary: the two colors either side of the complement, 150 and 210 degrees away.
• Analogous: the neighbours, 30 degrees either side. They sit close and feel calm.
• Triadic: three colors spaced 120 degrees apart.
• Tetradic: four colors. Square spaces them 90 degrees apart. Rectangle uses pairs of complements, 60 degrees apart.
• Monochromatic: one hue in five steps from darker to lighter.

Worked example

Start with the blue #3b82f6. Its hue is 217.2 degrees, with saturation 91.2% and lightness 59.8%. The other colors keep the saturation and lightness and move the hue by the schemes' angles. On the digital wheel this gives:

The complementary color of this blue on the digital wheel is #f6af3b, a yellow orange at hue 37.2.

Digital wheel or painter wheel

Screens mix red, green and blue light, so on a digital wheel the color opposite red is cyan and the color opposite blue is yellow. Painters mix paint with red, yellow and blue as the main colors, and on that wheel red sits opposite green and blue opposite orange. The two give different complements for the same color. For the blue above, the painter wheel gives the complement at hue 24.3, an orange, instead of the yellow orange at 37.2.

The painter wheel here is a simple stretch of the digital hues to six anchor colors, red, orange, yellow, green, blue and violet at 60 degree steps. Real paint wheels differ in detail, so use it to see the idea, and trust your eye for the final choice.

Using a scheme in a design

• Do not use all colors equally. Give most of the page to one, use a second for support and keep the third for accents.
• Change lightness and saturation to make quieter versions of the colors. Pure colors at the same strength fight each other.
• Check text on color with the color contrast checker.

The six anchor colours on each wheel

The painter wheel places these six at equal 60 degree steps and stretches the digital hues to fit. The digital hue column is where each colour sits on the screen wheel. Between the anchors the tool slides smoothly from one to the next.

Monochromatic, the one without a hue change

The monochromatic scheme keeps the hue and saturation and changes only lightness, in five steps of about 20 points each. For #3b82f6 that gives a dark navy, a deep blue, the base, a light blue and a very pale blue. It is the safest scheme to start with, since the colours cannot clash.

Look up the name of a color in the , or build a whole set with the color palette generator.