How to pick a color and get HEX, RGB and HSL
To pick a color and get its HEX, RGB and HSL values, open the ToolCrix Color Picker and choose a colour with the picker or type a HEX value. All three formats update instantly — click any to copy. The tool also shows matching shades, tints, and a WCAG contrast rating for accessibility.
Need to pick a colour and get its HEX, RGB and HSL values — plus matching shades and an accessibility check? This free browser color picker does it all instantly, with a built-in WCAG contrast checker so your colours stay readable.
Why designers and developers need a good color picker
Colours live in different formats: designers think in HEX, CSS often uses RGB or HSL, and you constantly need to convert between them. A picker that shows all three at once saves time.
Accessibility matters too — text must have enough contrast against its background to be readable (and to pass WCAG). A built-in contrast checker tells you instantly whether a pairing passes.
How to use it (step by step)
- Open 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.
What you can use it for
- Building a brand or website colour palette.
- Converting a HEX colour to RGB or HSL for CSS.
- Generating lighter/darker shades for hover and active states.
- Checking text contrast for accessibility compliance.
- Matching a colour you found in a design.
HEX vs RGB vs HSL
- HEX — compact #RRGGBB, common in design tools.
- RGB — red/green/blue channels, easy for code.
- HSL — hue/saturation/lightness, best for creating shades.
Tips
- Use HSL when you want consistent shades — just change lightness.
- Aim for a 4.5:1 contrast ratio for normal text (AA).
- Build a palette from one base colour plus its tints/shades.
- Copy values in the exact format your CSS needs.
Frequently Asked Questions
How do I convert HEX to RGB?
Enter or pick a colour in the ToolCrix Color Picker and it shows the RGB (and HSL) values instantly, ready to copy.
What is a good contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
Is the color picker free?
Yes — free, instant and private, with no sign-up.
Can it generate shades and tints?
Yes. It automatically creates lighter and darker variations of your chosen colour.
Does it check accessibility?
Yes, it shows a WCAG contrast rating for text on the selected colour.
How do I convert HEX to RGB quickly?
Open the ToolCrix Color Picker, enter or pick a HEX value, and the RGB (and HSL) values appear instantly, ready to copy. No math, no extra steps.
What's a passing WCAG contrast ratio?
Aim for 4.5:1 for normal body text and 3:1 for large text to meet WCAG AA. The Color Picker shows the rating in real time so you can check designs as you build them.
Try it now: open the free Color Picker or the Image Compressor, or browse more guides.