What are complementary colors?

Two colors directly opposite each other on the color wheel. They create the highest contrast and make each other look more vivid.

What are analogous colors?

Colors that sit next to each other on the wheel. They share a common hue, so they look calm and cohesive together.

How do I use the color wheel to build a palette?

Pick a base color, then choose a harmony — complementary, triadic or analogous — and copy the resulting colors. Color Picker Lab shows each as HEX, RGB, HSL and OKLCH.

Color Wheel

Pick any color and instantly see its harmonies — complementary, analogous, triadic, split-complementary and tetradic — each with copyable HEX, RGB, HSL and OKLCH.

#3B82F6 DodgerBlue

From image

Tints

Shades

Tones

Perceptual 50→950 scale, computed in OKLCH. Copy it as CSS custom properties using relative-color syntax — each stop keeps the base hue and chroma.

--color-50: oklch(from #3B82F6 0.97 c h);
--color-100: oklch(from #3B82F6 0.94 c h);
--color-200: oklch(from #3B82F6 0.87 c h);
--color-300: oklch(from #3B82F6 0.78 c h);
--color-400: oklch(from #3B82F6 0.68 c h);
--color-500: oklch(from #3B82F6 0.58 c h);
--color-600: oklch(from #3B82F6 0.5 c h);
--color-700: oklch(from #3B82F6 0.42 c h);
--color-800: oklch(from #3B82F6 0.34 c h);
--color-900: oklch(from #3B82F6 0.26 c h);
--color-950: oklch(from #3B82F6 0.18 c h);

No saved colors yet. Pick a color and tap Save to keep it here.

Recent

Colors you pick will show up here.

HEX: #3B82F6
HEX8: #3B82F6FF
HEX8 (Android): #FF3B82F6
RGB: rgb(59, 130, 246)
RGB (%): 23%, 51%, 96%
HSL: hsl(217, 91%, 60%)
HSV / HSB: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
OKLCH: oklch(0.6231 0.188 259.81)
OKLCH (%): oklch(62.31% 0.188 259.81)
Decimal: 3900150

A 5.71:1 vs black

A 3.68:1 vs white

AA normal ≥ 4.5 Pass
AA large ≥ 3 Pass
AAA normal ≥ 7 Fail
AAA large ≥ 4.5 Pass

Recommended text color: black

CSS contrast-color() contrast-color(#3B82F6) → black

APCA Lc experimental 69.4 Lc · large / secondary text (white text)

WCAG 2.1 AA/AAA is the compliance floor; APCA is an optional readability metric.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Monochromatic

Roughly 1 in 12 men and 1 in 200 women have some color-vision deficiency. Here is how this color looks under the eight common types.

Dichromacy

Protanopia

#5A5ADA SlateBlue

Deuteranopia

#5650D3 SlateBlue

Tritanopia

#3FC4BF MediumTurquoise

Anomalous trichromacy

Protanomaly

#5A5ADA SlateBlue

Deuteranomaly

#5650D3 SlateBlue

Tritanomaly

#3FC4BF MediumTurquoise

Monochromacy

Achromatopsia

#858585 Gray

Achromatomaly

#858585 Gray

Make colorblind-safe

Adjusted for deuteranomaly — the most common deficiency — so it stays distinguishable.

#3BA1FF DodgerBlue

What is a color wheel?

A color wheel arranges hues in a circle so related colors sit together and opposites sit across from each other. It is the basis for color harmonies — reliable recipes for choosing colors that work well together.

Color harmonies explained

Complementary uses the color directly opposite (highest contrast); analogous uses the neighbors on either side (calm); triadic uses three evenly spaced colors (balanced); split-complementary uses a color plus the two neighbors of its opposite; and tetradic uses four colors in a rectangle. Pick a color above to see each one.

Frequently asked questions

What are complementary colors?: Two colors directly opposite each other on the color wheel. They create the highest contrast and make each other look more vivid.
What are analogous colors?: Colors that sit next to each other on the wheel. They share a common hue, so they look calm and cohesive together.
How do I use the color wheel to build a palette?: Pick a base color, then choose a harmony — complementary, triadic or analogous — and copy the resulting colors. Color Picker Lab shows each as HEX, RGB, HSL and OKLCH.