Color Picker

Popular

Color

Click the hexagon to open picker

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

OKLCHoklch(0.600 0.364 217)

CMYKcmyk(76%, 47%, 0%, 4%)

Extract from image

Drop an image to extract its palette

JPG, PNG, WebP, GIF — fills the saved palette below

Files are processed locally — they never leave your browser.

WCAG Contrast Ratio

White3.68:1

✗ Normal (AA)✓ Large (AA)✗ Strict (AAA)

Black5.71:1

✓ Normal (AA)✓ Large (AA)✗ Strict (AAA)

Custom Contrast Test

Foreground

Background

Ratio3.68:1

The quick brown fox

jumps over the lazy dog.

✗ Normal (AA)✓ Large (AA)✗ Strict (AAA)

Tints & Shades

Click a shade to select it, then save to palette

Saved Palette

No colors saved yet

Color Harmonies

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

About Color Picker

The Color Picker lets you select any color, extract a 5-color palette from an uploaded image, and instantly convert between HEX, RGB, HSL, OKLCH, and CMYK formats. It calculates WCAG contrast ratios against any background color to help you meet accessibility standards, and uses k-means clustering to pull the dominant colors from any photo or logo. Use it to match brand colors, build design systems, or verify AA and AAA compliance.

How it Works

1The Normal, Large, and Strict badges correspond to official **Web Content Accessibility Guidelines (WCAG) 2.1** color recommendations.
2**Normal (AA)** tests standard text. It passes if the foreground/background color combo has a contrast ratio of at least 4.5:1.
3**Large (AA)** tests larger text elements (headers). It has a lower bar, passing if the contrast ratio hits at least 3.0:1.
4**Strict (AAA)** is the highest tier of accessibility compliance for standard text. This ensures maximum legibility, requiring a stiff contrast ratio of 7.0:1 or more.

Frequently Asked Questions

What color formats does it support?

HEX (#RRGGBB), RGB, HSL, OKLCH, and CMYK. All formats update in real time as you pick a color or type a value in any format field.

What is the WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. The AA standard requires 4.5:1 for normal text and 3:1 for large text. The AAA standard requires 7:1.

What is OKLCH?

OKLCH is a modern perceptually uniform CSS color space defining colors by Lightness, Chroma, and Hue. Unlike HSL, equal numeric changes in OKLCH produce visually equal changes in color, making it ideal for generating accessible color palettes.

Can I enter a HEX code directly?

Yes. Type or paste any 3 or 6-digit HEX code and all other color format values update automatically.

About Color Picker

How it Works

1The Normal, Large, and Strict badges correspond to official **Web Content Accessibility Guidelines (WCAG) 2.1** color recommendations.

2**Normal (AA)** tests standard text. It passes if the foreground/background color combo has a contrast ratio of at least 4.5:1.

3**Large (AA)** tests larger text elements (headers). It has a lower bar, passing if the contrast ratio hits at least 3.0:1.

4**Strict (AAA)** is the highest tier of accessibility compliance for standard text. This ensures maximum legibility, requiring a stiff contrast ratio of 7.0:1 or more.

Command Palette

About Color Picker

How it Works

Frequently Asked Questions

About Color Picker

How it Works

Frequently Asked Questions