Each has a use. Hex is the universal storage format that copies cleanly into any tool. rgb() is what programmatic code generates and consumes. hsl() lets a designer adjust lightness or saturation independently — exactly what you want for design-token variants (hover states, theme adjustments).

What does the WCAG contrast check measure?

The ratio between the relative luminance of two colours, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 AA requires 4.5:1 for body text, 3:1 for large text and UI components. The formula is in WCAG 2.1 §1.4.3.

Does the picker support OKLCH?

Not yet — hex, RGB, and HSL cover 95% of working use cases. For OKLCH and the wider perceptual-colour discussion, see our CSS color formats guide. You can also paste an OKLCH value into a CSS preprocessor; modern browsers convert internally.

Why is hex sometimes 4 digits instead of 6?

Three- and four-digit hex (e.g. #F60, #F60A) is a shorthand where each digit is doubled. #F60 = #FF6600. The 4-digit form includes alpha. Most modern code uses the full 6/8-digit form for clarity; both are valid CSS.

Does the picker save my history?

No. Everything runs in your browser; nothing is sent to a server or stored across pages.

Color Picker

Pick once, get every format. Plus a live WCAG contrast read against white and black.

The picker below renders the chosen colour and computes its representations in three formats: hex, rgb(), and hsl(). Beside each format, a one-tap copy button. Below that, the live WCAG contrast ratio against pure white and pure black — useful for sanity-checking text and background pairings. See our CSS color formats guide for when to pick which.

Hex

rgb(59 130 246)

hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

Pick a color
Click the colour preview to use the system colour picker, or type a hex / RGB value directly.
Copy the format you need
Hex for storage and design files. rgb() for code that computes channels. hsl() for design-token hue rotations.
Check the contrast
The two contrast badges show WCAG ratio against pure white and pure black. Use them to verify text colour pairings.

WCAG contrast cheat sheet

Ratio	Level	Use for
≥ 7:1	AAA body	High-stakes legal or accessibility-critical text
≥ 4.5:1	AA body	Standard body text. The legal floor in most jurisdictions.
≥ 3:1	AA large	Text ≥ 18pt or ≥ 14pt bold; UI components, focus indicators.
< 3:1	Fails AA	Decorative only, or pair with another visual signal.

Frequently asked questions

Why three formats?: Each has a use. Hex is the universal storage format that copies cleanly into any tool. rgb() is what programmatic code generates and consumes. hsl() lets a designer adjust lightness or saturation independently — exactly what you want for design-token variants (hover states, theme adjustments).
What does the WCAG contrast check measure?: The ratio between the relative luminance of two colours, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 AA requires 4.5:1 for body text, 3:1 for large text and UI components. The formula is in WCAG 2.1 §1.4.3.
Does the picker support OKLCH?: Not yet — hex, RGB, and HSL cover 95% of working use cases. For OKLCH and the wider perceptual-colour discussion, see our CSS color formats guide. You can also paste an OKLCH value into a CSS preprocessor; modern browsers convert internally.
Why is hex sometimes 4 digits instead of 6?: Three- and four-digit hex (e.g. #F60, #F60A) is a shorthand where each digit is doubled. #F60 = #FF6600. The 4-digit form includes alpha. Most modern code uses the full 6/8-digit form for clarity; both are valid CSS.
Does the picker save my history?: No. Everything runs in your browser; nothing is sent to a server or stored across pages.

About

Why HSL feels more intuitive

RGB describes a colour as three independent channels of light intensity. HSL describes it as hue (the colour itself), saturation (how vivid), and lightness (how bright). Designers think in hue/saturation/lightness because human perception works that way — 'a bit darker' is one number to change in HSL, three coordinated changes in RGB. The catch is that HSL's lightness isn't perceptually uniform across hues (50% lightness yellow looks brighter than 50% lightness blue). For perceptually-uniform work, OKLCH is the modern answer.

When contrast checking isn't enough

Two colours can hit 4.5:1 contrast and still be hard for colour-blind users to distinguish (think red-green pairs at similar luminance). Always pair colour with another signal: an icon, a label, an underline. The contrast check is necessary but not sufficient for accessible design.