Interactive Color Wheel
Pick any hue on the color wheel, see its HEX, RGB and HSL codes, and find matching colors with complementary, analogous, triadic, split-complementary and tetradic harmonies. Below, explore the traditional 12-color artist’s wheel used for mixing paint.
Digital color wheel tool
Click or drag on the wheel. Keyboard: arrows (hold Shift for bigger steps).
Harmony colors
How to Use the Color Wheel
- Choose a hue by clicking or dragging on the wheel, or with the Hue slider. The distance from the center sets the saturation.
- Adjust lightness with the Lightness slider, or type a HEX code to start from an existing color.
- Pick a harmony. Markers on the wheel show where the matching colors sit.
- Copy the codes you need, or click Use on a harmony color to make it the new base color.
Color Theory Basics
A color wheel arranges hues in a circle so you can see how they relate. Colors next to each other share a common base and look calm together. Colors on opposite sides contrast strongly and make each other look brighter.
Every color can also be described by three properties: hue (its position on the wheel), saturation (how intense or gray it is) and lightness (how light or dark it is). The digital wheel above lets you change all three.
Color Harmonies on the Wheel
| Harmony | Position on the wheel | Effect |
|---|---|---|
| Complementary | Opposite hue (180°) | Maximum contrast |
| Analogous | Neighbors at 30° on each side | Calm and natural |
| Triadic | Three hues 120° apart | Vibrant and balanced |
| Split-complementary | The two neighbors of the complement (150° and 210°) | Strong contrast, less tension |
| Tetradic | Two complementary pairs, 60° apart (rectangle) | Rich and varied |
Want a full five-color palette with locks and PNG export? Use the Random Color Palette Generator. For ready-made palette ideas, see our color palettes.
The 12-Color Wheel for Painters
The traditional artist’s wheel is based on red, yellow and blue (RYB) pigments. It shows how paint colors are mixed. Select a color on the wheel to see how it is made.
Select a color
Click a segment, or use Tab to move through the 12 colors and press Enter.
Primary, Secondary and Tertiary Colors
- Primary colors (red, yellow, blue) cannot be mixed from other paint colors.
- Secondary colors (orange, green, violet) are made by mixing two primaries.
- Tertiary colors (yellow-orange, red-orange, red-violet, blue-violet, blue-green, yellow-green) mix a primary with the secondary next to it.
See real mixing results for each pair in our color mixing chart.
Digital Wheel vs. Artist’s Wheel
The two wheels answer different questions, so their opposite colors are not the same.
Digital wheel (HSL / RGB)
Built on red, green and blue light. Use it for screens, websites and digital design.
Complement of red: cyan.
Artist’s wheel (RYB)
Built on red, yellow and blue pigments. Use it for mixing paint and traditional art.
Complement of red: green.
Frequently Asked Questions
What is a color wheel?
A color wheel is a circle of hues that shows how colors relate to each other. Designers and artists use it to find colors that contrast or blend well.
How many colors are on a color wheel?
The classic artist’s wheel has 12 colors: 3 primary, 3 secondary and 6 tertiary. A digital wheel shows every hue, all 360 degrees of it.
What is the complementary color of blue?
On a digital (RGB) wheel, the complement of pure blue is yellow. On the artist’s RYB wheel, the complement of blue is orange, which is why painters mix blue and orange to get rich browns and grays.
Why are there two different color wheels?
Light and paint mix differently. Screens add red, green and blue light together, while paint pigments absorb light. Use the digital wheel for screen colors and the RYB wheel for mixing paint.
How do I use the color wheel to pick a color scheme?
Choose your main color, then pick a harmony: complementary for strong contrast, analogous for a calm look, or triadic for a lively, balanced scheme. Copy the codes and use them in your design.
Sources
- W3C — CSS Color Module Level 4: official definitions of the RGB, HEX and HSL color formats used by the digital wheel.
- W3C — Understanding WCAG 2.2: Contrast (Minimum): recommended contrast ratios for readable text.
More Color Tools and Guides
Follow ColorMixLab on Facebook
Watch color mixing videos and discover new color combinations every week.
Follow Us on Facebook