Quick answer

How to use the free Color Picker

To pick a color for free, use the picker or type a HEX value to get RGB, HSL, matching shades, tints, and a WCAG contrast rating instantly. All color conversion happens in your browser.

Foreground #11BA82, rgb(17, 186, 130), hsl(160, 83%, 40%). Contrast 2.51 to 1, fails AA.

RGB
HSL
HEX
RGB
HSL
WCAG contrast checker
Large sample text
Normal sample text — #11ba82 on #ffffff
Contrast ratio
2.51:1
AA · normal textFail · ≥4.5:1
AA · large textFail · ≥3:1
AAA · normal textFail · ≥7:1
AAA · large textFail · ≥4.5:1

Editing foreground. AA requires 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or ≥24px). AAA requires 7:1 and 4.5:1 respectively.

Questions

Frequently asked questions

What color formats does it support?

Pick any color and instantly get HEX, RGB and HSL values. Click any value to copy it.

What is the WCAG contrast checker for?

It shows the contrast ratio of your color against black/white text and whether it passes WCAG AA (4.5:1) or AAA (7:1) for accessible, readable text.

How do I make shades and tints?

The palette row generates lighter tints and darker shades of your color — click any swatch to make it the active color.

Is anything sent to a server?

No. All conversions and contrast checks run in your browser.

Free online color picker

Pick any colour and instantly get its HEX, RGB and HSL values, matching shades and tints, and a WCAG contrast rating. Everything runs in your browser — perfect for designers and developers building palettes and checking accessibility.

How to use the color picker

  • Pick a colour with the picker or type a HEX value.
  • Read the HEX, RGB and HSL values — click any to copy.
  • Browse the auto-generated shades and tints.
  • Check the WCAG contrast rating for text on that colour.

HEX vs RGB vs HSL

HEX (#RRGGBB) is common in design tools, RGB is easy in code, and HSL (hue/saturation/lightness) is best for creating consistent shades. Having all three at once saves constant conversion.

Accessibility

For readable text, aim for a contrast ratio of at least 4.5:1 (WCAG AA) for normal text and 3:1 for large text. The built-in checker tells you instantly whether a pairing passes.

Frequently asked questions

How do I convert HEX to RGB? Enter or pick a colour in the ToolCrix color picker and the RGB and HSL values appear instantly, ready to copy with one click.

Does the color picker check WCAG contrast? Yes — the ToolCrix color picker shows a WCAG contrast rating for text on the selected colour, flagging AA and AAA passes.

Can it generate shades and tints? Yes — the ToolCrix color picker auto-generates lighter tints and darker shades of any colour, ideal for building a consistent palette.

What colour formats does the picker show? The ToolCrix color picker displays HEX, RGB and HSL simultaneously, so designers and developers never need a separate converter.

GuideColor Picker: HEX, RGB, HSL & Building Color PalettesRead the full guide →