What's the difference between HEX, RGB, and HSL?

They describe the same colors differently: HEX and RGB specify red/green/blue channels (HEX in hexadecimal), while HSL uses hue (0–360°), saturation, and lightness — far more intuitive for adjusting a color's tone.

What contrast ratio do I need for accessibility?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+/14pt bold). AAA raises that to 7:1 and 4.5:1 respectively.

Color Converter

Convert any CSS color between HEX, RGB, and HSL notation. Paste a value in any format — #6366f1, rgb(99 102 241), hsl(239 84% 67%) — or pick from the color wheel, and get every notation with one-click copy, a live swatch, and the WCAG contrast ratio against black and white text so you know immediately whether the color is readable.

Design Tools

Color (any CSS format)

Picker

HEX: #6366f1
RGB: rgb(99, 102, 241)
HSL: hsl(239, 84%, 67%)

Contrast vs white text

4.46:1 AA large only

Contrast vs black text

4.7:1 ✓ AA

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How to use

3 clear steps.

Paste a color in any CSS format, or use the color picker.
Read the HEX, RGB, and HSL values — copy any of them.
Check the contrast ratios to pick readable text colors.

Good to know

Frequently asked questions

What's the difference between HEX, RGB, and HSL?: They describe the same colors differently: HEX and RGB specify red/green/blue channels (HEX in hexadecimal), while HSL uses hue (0–360°), saturation, and lightness — far more intuitive for adjusting a color's tone.
What contrast ratio do I need for accessibility?: WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+/14pt bold). AAA raises that to 7:1 and 4.5:1 respectively.