Color Picker & Converter
HEX
#2f7d6b
RGB
rgb(47, 125, 107)
HSL
hsl(166, 45%, 34%)
Contrast vs white text
4.92:1 — AA
Contrast vs black text
4.27:1 — AA (large text only)
WCAG 2 contrast ratio for this color used as a background behind white or black text. AA needs 4.5:1 (3:1 for large text); AAA needs 7:1.
About Color Picker/Converter
Pick a color visually or type a HEX, RGB or HSL value, and see all three forms plus its WCAG contrast ratio against white and black text at once.
HEX, RGB and HSL describe the exact same color three different ways, and which one a project needs depends on context — HEX for CSS and design tools, RGB for canvas and image code, HSL for anything where you want to adjust lightness or saturation without recalculating three numbers by hand. This converts between all three both ways, including translucent colors (`rgba()`/`hsla()`/8-digit hex).
It also answers a question HEX/RGB/HSL values alone don't: is this color usable? The contrast section runs the same WCAG 2 formula browsers and accessibility auditors use to check whether white or black text would be readable against it — AA needs 4.5:1 (3:1 for large text), AAA needs 7:1.
Parsing accepts both the classic comma-separated CSS syntax (`rgb(51, 102, 255)`) and the newer space-separated form (`rgb(51 102 255 / 0.5)`) — but not named CSS colors like "coral", by design: a hand-typed lookup table of 147 color names is exactly the kind of data where one wrong entry is a quiet, easy-to-miss bug, and the native color picker already covers visual selection.
What you can use it for
- Convert a HEX color from a design file into the RGB or HSL a script needs.
- Check whether a chosen text/background pairing passes WCAG AA or AAA contrast.
- Pick a color visually and get its exact HEX/RGB/HSL values.
- Convert a semi-transparent `rgba()`/`hsla()` color to its 8-digit hex equivalent.
- Read out a color's HSL values to adjust just its lightness or saturation.
How it works, step by step
- 1
Pick or type a color
Use the color swatch, or type a HEX, RGB(A) or HSL(A) value directly.
- 2
Read the conversions
HEX, RGB and HSL update together, each with a copy button.
- 3
Check contrast
See the WCAG ratio and pass/fail level against both white and black text.
Frequently asked questions
Does this support named CSS colors like "coral" or "rebeccapurple"?
No, by design — only HEX, RGB(A) and HSL(A). Use the color picker for visual selection instead; it always gives you an exact HEX value regardless of what the color is called.
What contrast ratio do I need to pass WCAG?
AA (the common legal/practical bar) needs 4.5:1 for normal text or 3:1 for large text (18pt+, or 14pt+ bold). AAA, a stricter level, needs 7:1 for normal text.
Does this support transparent colors?
Yes — rgba(), hsla() and 4-/8-digit hex all carry an alpha channel through the conversion. Contrast is computed as if the color were fully opaque, since contrast against a background only makes sense for a solid color.
Is my color data sent anywhere?
No. Parsing, conversion and the contrast check all run entirely in your browser.