What are complementary colors?

Colors opposite each other on the wheel, 180° apart — for example blue and orange. They create strong contrast and make each other look more vivid.

What is the difference between analogous and triadic?

Analogous colors are neighbours on the wheel (here ±30°), which gives calm, cohesive combinations. Triadic colors are evenly spaced 120° apart, which gives balanced but colorful combinations.

Which color wheel is this?

It is the RGB/HSL hue wheel used on screens, with red at the top, then yellow, green, cyan, blue and magenta clockwise. Traditional painters' wheels (red, yellow, blue) place complements differently.

Color Wheel

Choose a color on the wheel and see which colors go with it.

Drag on the wheel, or focus it and use ← → for hue and ↑ ↓ for saturation (Shift for bigger steps). The large marker is your base color.

Base color

Lightness 56 %Harmony

Open a color in the color picker for shades and contrast, or turn the harmony into a full scheme with the palette generator.

Complementary colors

Base
HEX
#1E90FF
RGB
rgb(30, 144, 255)
HSL
hsl(210, 100%, 55.9%)
+180°
HEX
#FF8D1E
RGB
rgb(255, 141, 30)
HSL
hsl(30, 100%, 55.9%)

How to use the color wheel

Drag on the wheel: the angle sets the hue and the distance from the centre sets the saturation.
Adjust lightness with the slider below the base color field.
Choose a harmony to see which colors go together; the small markers show them on the wheel.
Copy the HEX codes, or open the base color in the color picker.

Color harmonies explained

Complementary: the opposite hue (180°). Maximum hue contrast — great for accents.
Analogous: the neighbours 30° either side. Harmonious and low-contrast.
Triadic: three hues 120° apart. Colorful yet balanced.
Split-complementary: the two hues next to the complement (150° and 210°). Softer than a pure complement.
Tetradic (square): four hues 90° apart. Many options; let one color dominate.

Harmonies only rotate the hue; saturation and lightness stay the same. For readable text, always check the final pair in the contrast checker.

Related color tools

Turn a harmony into a full five-color scheme with the color palette generator, get exact values in the color picker, or convert colors with HEX to RGB and RGB to HEX.

Frequently asked questions

What are complementary colors?: Colors opposite each other on the wheel, 180° apart — for example blue and orange. They create strong contrast and make each other look more vivid.
What is the difference between analogous and triadic?: Analogous colors are neighbours on the wheel (here ±30°), which gives calm, cohesive combinations. Triadic colors are evenly spaced 120° apart, which gives balanced but colorful combinations.
Which color wheel is this?: It is the RGB/HSL hue wheel used on screens, with red at the top, then yellow, green, cyan, blue and magenta clockwise. Traditional painters' wheels (red, yellow, blue) place complements differently.