Convert between hex, RGB and HSL with a live swatch, sample a color from screen, and check WCAG contrast. In the browser.
Convert between hex, RGB and HSL, and check text contrast against white and black for WCAG accessibility.
What the color picker does
Enter a color as hex, RGB or HSL and the other two forms update instantly, with a live swatch. On supported browsers the Pick from screen button samples a color from anywhere on screen. It also reports WCAG contrast for white and black text on your color.
Frequently asked questions
What is a good contrast ratio?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text. The tool marks each as pass or fail.
Why does Pick from screen not appear?
It relies on the browser EyeDropper API, which some browsers do not support yet. The manual fields always work.
Is anything uploaded?
No. All conversion happens in the page.
How to use it
- Type a hex code, RGB triplet, or HSL values into the corresponding input field. The other formats recalculate automatically, and the color swatch updates immediately.
- Watch the live swatch show the selected colour. Verify the converted values appear in all three format boxes below the swatch.
- If your browser supports the EyeDropper API, click the Pick from screen button and select any area on your display. The sampled colour fills all input fields and the swatch.
- Check the WCAG contrast section. It reports the contrast ratio between your colour and both white and black text, marking each as pass or fail against the 4.5:1 and 3:1 thresholds.
Where it comes in handy
A web developer needs to set a background colour of #2c3e50 and must confirm the text colour meets accessibility standards. The tool shows white text achieves a contrast ratio of 10.25:1, which passes WCAG AA for normal text, while black text scores only 1.27:1 and fails.
An illustrator exports assets for print at 300 DPI and requires CMYK values. Although this tool works with RGB and HSL, the developer can use the RGB output (44, 62, 80) in a separate conversion utility, ensuring the colour remains consistent across digital and physical media.
A designer creating a UI component specifies a primary button colour using HSL values of hsl(210, 70%, 50%). The tool instantly converts this to hex #2979ff and RGB (41, 121, 255), allowing the developer to copy the correct format directly into CSS or design software.
Worth knowing
- The Pick from screen feature requires browser support for the EyeDropper API. If unavailable, the button will not appear, and manual entry remains the only method.
- Conversions between hex, RGB, and HSL may involve rounding. HSL saturation and lightness values are rounded to one decimal place, which can cause slight discrepancies when converting back and forth repeatedly.
- WCAG contrast is calculated for normal text (16px and 14px bold) and large text (18px or 14px bold). Colours with very low luminance, such as pure black (#000000), will always fail contrast against black text and pass only against white.