Complementary
Opposite hues make a clear accent pair. Let one color cover more space.
Pick a base color, choose a harmony, and copy your palette. Drag around the wheel to change hue; move toward the center for softer colors.
01 / Choose your base
02 / Find the relationship
Opposite hues make a clear accent pair. Let one color cover more space.
A color wheel arranges hues around a circle. This tool uses RGB colors with HSL controls for screen design. Hue sets your position around the circle, saturation sets the intensity, and lightness adjusts the palette from dark to light. Choose a relationship below to compare its colors with the same base hue.
Opposite hues make a clear accent pair. Let one color cover more space.
Neighboring hues keep a palette close. Use lightness to separate surfaces.
Three evenly spaced hues. Choose one lead color and two smaller accents.
Two hues flank the opposite color, giving you two accent choices.
Two complementary pairs. Keep one pair dominant to avoid competition.
Four evenly spaced hues. Start with small accents on a neutral surface.
One hue at different lightness levels. Useful for layered surfaces and tonal artwork.
RGB describes light on screens, with red, green and blue as primary colors. Traditional RYB wheels use red, yellow and blue for art instruction. Their opposite hues differ. This wheel rotates HSL hue and does not predict how physical paints mix.
A tint adds white, a shade adds black, and a tone adds gray. Here, lightness and saturation let you adjust the palette directly. Lower saturation makes colors quieter; changing lightness helps separate large surfaces from small details.
Gray has zero saturation, so changing hue does not add color. Increase saturation to see the harmony.
Both use two complementary pairs. Here, tetradic uses offsets of 0°, 60°, 180° and 240°. Square spaces all four hues by 90°.
No. Opposite hues can have similar luminance. Test the actual text and background combination in a contrast checker.
Use these hue relationships as a starting point for screen palettes. A harmony does not guarantee readable text, suitable print output, or accurate paint mixing. Check actual foreground and background colors in the contrast checker. This wheel uses sRGB and HSL, so it does not create wide-gamut colors or simulate pigment mixtures.