◐

Color Picker & Contrast Checker

Pick a color, convert between HEX, RGB and HSL, and check WCAG contrast ratio between text and background. Free online color tool.

Text color#1E1B4BBackground#FDE68A

RGB: rgb(30, 27, 75)

HSL: hsl(244, 47%, 20%)

The quick brown fox jumps over the lazy dog

12.84:1

Contrast ratio

Pass

AA normal (4.5)

Pass

AA large (3)

Pass

AAA (7)

Related tools

▣

QR Code GeneratorCreate QR codes with custom colors and error correction.

⬚

Image CropperCrop images to 1:1, 4:5, 16:9 and more.

Lorem Ipsum GeneratorGenerate placeholder text in paragraphs, sentences or words.

⇄

Unit ConverterConvert length, weight, temperature, volume and more.

What is the color picker?

Pick colors, convert between HEX, RGB and HSL, and check the WCAG contrast ratio between text and background colors.

How to use the Color Picker & Contrast Checker

Pick or type a text and background color.
Copy the HEX, RGB or HSL value.
Check the contrast ratio against WCAG AA and AAA.

Common uses

Choosing accessible color combinations
Converting design colors to CSS
Checking brand colors

Frequently asked questions

What contrast ratio is required?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1.

How do I convert HEX to RGB?

Enter the HEX value and the RGB and HSL values appear instantly.

What is HSL?

Hue, Saturation and Lightness — a color format that is easier to adjust by hand.

Also known as: contrast checker, hex to rgb, rgb to hex, hsl converter, wcag contrast checker, color contrast ratio, hex color picker.

More tools