Color Wheel

Click the wheel to pick a hue, adjust saturation and lightness, and explore color harmonies.

Presets:

Selected: #ff0000Contrast vs White: 4.0:1Contrast vs Black: 5.3:1

Hue: 0°

Saturation: 100%

Lightness: 50%

Selected Color

HEX#ff0000

RGBrgb(255, 0, 0)

HSLhsl(0, 100%, 50%)

Color Harmonies

Complementary

#00ffff

hsl(180, 100%, 50%)

Triadic

#00ff00

hsl(120, 100%, 50%)

#0000ff

hsl(240, 100%, 50%)

Analogous

#ff0080

hsl(330, 100%, 50%)

#ff8000

hsl(30, 100%, 50%)

Split-Complementary

#00ff80

hsl(150, 100%, 50%)

#0080ff

hsl(210, 100%, 50%)

Interactive Color Wheel

The color wheel uses a CSS conic-gradient to render the full hue spectrum. Clicking anywhere on the wheel calculates the hue angle using Math.atan2, plus a 90° correction: a conic-gradient starts at 12 o'clock while atan2 measures 0° at 3 o'clock, so without it the wheel and the maths that reads it sit a quarter turn apart. Saturation and lightness are controlled independently with sliders. Color harmonies are calculated by rotating the selected hue by fixed angles: complementary (+180°), triadic (+120°, +240°), analogous (±30°), and split-complementary (+150°, +210°). All computations run entirely in your browser.

Built and maintained by Meet Shah · Last updated 2 August 2026

What this tool is used for

Exploring complementary or triadic relationships around a chosen hue.
Finding a starting palette from one brand colour.
Understanding why two colours clash by seeing their positions.
Picking an accent that sits a deliberate distance from a base colour.
Teaching colour relationships with a visual rather than a table.

Frequently Asked Questions

Why do the RGB and RYB wheels disagree?: Because they model different physics. RGB is additive — mixing light — so red's complement is cyan. RYB is the subtractive painter's wheel, where red's complement is green. Both are called complementary and they name different colours, which is the root of most colour-theory confusion.
What are the standard harmonies?: Complementary at 180°, analogous within about 30°, triadic at 120°, split-complementary taking the two neighbours of the complement, and tetradic as a rectangle. They are relationships between hue angles, which is why they transfer to any base colour.
Why does a hue wheel not show equal brightness?: Because hue and perceived lightness are independent, and human vision is far more sensitive to green than to blue. A wheel at constant HSL lightness looks bright at yellow and dark at blue — which is what perceptual spaces such as OKLCH were built to correct.
Can hue be averaged?: Not arithmetically. It is an angle, so the mean of 350° and 10° is 180° — cyan — when the answer should be red. Circular means require converting to vectors and back, which is why naive hue interpolation produces a detour through the wrong side of the wheel.
Does harmony imply accessibility?: No, and they are independent. Two complementary hues at the same lightness have almost no luminance contrast, so text in one on the other is unreadable however harmonious the pair. Contrast is a separate measurement with its own thresholds.

Common errors and gotchas

Treating a harmony rule as a guarantee, when contrast and context decide whether a pairing works.
Picking colours by hue alone and ignoring lightness, which is what makes text legible.
Assuming an RGB wheel matches perceptual spacing, which it does not.
Choosing a palette without checking contrast ratios for text.
Overlooking colour vision deficiency, where several harmonies collapse to the same appearance.