Color Wheel
Drag around the wheel to choose a base color and instantly see its complementary, analogous, triadic and other harmonies. Switch between the screen RGB wheel and the painter's RYB wheel and copy the HEX codes.
Drag on the wheel (or use the arrow keys when it is focused) to move the base color. Distance from the center sets saturation.
How to use the Color Wheel
- Pick a base color by dragging on the wheel, typing a HEX code or using the color picker; the brightness slider darkens the whole wheel.
- Choose a harmony such as Complementary, Triadic or Analogous; the matching colors appear as markers on the wheel.
- Switch the wheel to RYB if you mix paint or want the traditional art-class color relationships.
- Fine-tune the angle for analogous, split complementary and tetradic schemes.
- Copy a color by clicking its swatch, or press Copy palette or Export CSS to take all of them.
Color harmonies at a glance
| Harmony | Hue angles from the base | Red on the RGB wheel | Red on the RYB wheel |
|---|---|---|---|
| Complementary | 0°, 180° | #ff0000, #00ffff | red, green |
| Analogous | −30°, 0°, +30° | #ff0080, #ff0000, #ff8000 | red-violet, red, red-orange |
| Triadic | 0°, 120°, 240° | #ff0000, #00ff00, #0000ff | red, yellow, blue |
| Split complementary | 0°, 150°, 210° | #ff0000, #00ff80, #0080ff | red, yellow-green, blue-green |
| Tetradic (rectangle) | 0°, 60°, 180°, 240° | #ff0000, #ffff00, #00ffff, #0000ff | red, orange, green, blue |
| Square | 0°, 90°, 180°, 270° | #ff0000, #80ff00, #00ffff, #8000ff | red, yellow-orange, green, blue-violet |
| Monochromatic | 0° with different saturation and brightness | tints and shades of one hue | |
How the wheel is built
The wheel uses the HSV model: the angle is the hue (0° red at the top, increasing clockwise), the distance from the center is the saturation (gray in the middle, full color at the edge) and the slider sets the brightness (value). A harmony color is found by rotating the hue angle and keeping saturation and brightness, then converting back to RGB. For example, hue 90° at full saturation and brightness gives R = 255 × 0.5 = 128, G = 255, B = 0, so #80ff00.
In RYB mode the angles are measured on the painter's wheel, which is then mapped to screen hues: red 0° → 0°, orange 60° → 35°, yellow 120° → 60°, green 180° → 120°, blue 240° → 240° and purple 300° → 285°, with smooth interpolation in between. That is why the RYB complement of red is green and the complement of yellow is purple, as taught in art class.
Tips for using harmonies
- Follow the 60-30-10 rule: one dominant color for about 60% of the design, a secondary color for 30% and an accent for 10%.
- Complementary colors vibrate when placed side by side at full saturation; lower the saturation or brightness of one of them for text and backgrounds.
- Check contrast before using harmony colors for text; a contrast checker tells you whether a pair meets WCAG guidelines.
- Use the monochromatic scheme for dashboards and forms where calm, consistent color matters more than variety.
Frequently asked questions
What is the complementary color of red?
On the screen RGB wheel the opposite of red (#ff0000) is cyan (#00ffff). On the traditional painter's RYB wheel the complement of red is green. Switch the Wheel menu to see both.
What is the difference between the RGB and RYB color wheels?
The RGB wheel is based on how screens mix light, with red, green and blue as primaries; it is the right choice for web and app design. The RYB wheel is the artist's wheel with red, yellow and blue as primaries, used for paint and in color theory classes. The harmonies are the same angles, but the colors they land on differ.
What are triadic colors?
Three colors spaced 120 degrees apart on the wheel. On the RGB wheel, red's triad is green and blue; on the RYB wheel it is yellow and blue. Triads look lively, so use one as the main color and the other two as accents.
When should I use analogous colors?
Analogous colors sit next to each other on the wheel, for example 30 degrees apart. They create calm, cohesive designs and are common in nature, such as the oranges and yellows of a sunset. Add a neutral or a small complementary accent for contrast.
What is a split complementary scheme?
Instead of the color directly opposite the base, it uses the two colors on either side of it (by default 30 degrees away). You keep strong contrast but with less tension than a pure complementary pair.
Why do the harmony colors share the same saturation and brightness?
Harmonies are defined by hue angles, so the tool keeps your base color's saturation and brightness for every color. Use the monochromatic scheme for lighter and darker variations, or tweak any color in a color shades generator.