The color wheel
Tap any wedge to pick. Sliders below adjust hue, saturation and lightness. Conversions and the harmony palettes update live.
Red
Primary · Warm · Hue 0°
HEX
#ff0000
RGB
255, 0, 0
HSL
0°, 100%, 50%
CMYK
0, 100, 100, 0
Harmonies
Built off the current hue. Tap a swatch to set it as the new color.
Color harmonies
Six classic palette types. Each is a geometric relationship on the wheel.
Mixer & conversions
RGB sliders mix light (additive); CMYK sliders mix paint (subtractive). The two end at black or white from opposite directions.
#000000
Additive vs subtractive. Screens emit light: starting at black, more light = whiter. Paints absorb light: starting at white, more pigment = blacker. That's why your screen mixes red+green to make yellow but paint mixes red+yellow+blue to make near-black.
Contrast checker
WCAG 2.1 demands 4.5:1 for normal text and 3:1 for large text. The ratio is computed from relative luminance.
Foreground
Background
Sample text · headline 24px
0:1
The luminance formula is non-linear: each channel is gamma-corrected, then weighted by human eye sensitivity (R 0.2126, G 0.7152, B 0.0722). Why green pulls the most weight: our eyes peak around green light.
Color-blindness simulation
Around 8% of men and 0.5% of women have some form. Pick a hue to see how each form perceives it.
#ff0000
Three cones, three types. Most colorblindness is red/green confusion (protan/deutan); blue/yellow (tritan) is rare. The simulation transforms RGB through standard cone-response matrices — not perfect, but close to what each person sees.
Named colors
Standard CSS color names. Tap any swatch to make it the current color.
Color drill
0
Right
0
Asked
0
Streak
0
Best
Question
—
Daily challenge
Eight color questions. New set at midnight.
1/8
Question
0
Correct
0
Day streak
Question
—