Color Converter: Moving Between HEX, RGB, and HSL
Enter #2F6FEB or rgb(47, 111, 235) and you get all three notations plus a brightness figure. While styling, that saves a trip to a design tool and answers whether a button needs white or black text.
Open the tool：Color Converter (HEX / RGB / HSL)
When color formats need converting
A design hands over HEX, but CSS often wants rgb() for alpha or gradients; an old project has HSL values that need to go into a config that only accepts HEX. When the formats disagree, changing one color means hopping between several tools.
The other common need is contrast: given a brand colour, should a button use white or black text? The tool returns a relative luminance and a suggestion, which is rough but enough to rule out combinations that clearly fail to read.
- Design HEX into CSS rgb()
- Legacy HSL values back to HEX
- Deciding between dark and light text on a button
How to convert without mistakes
It accepts #RGB, #RRGGBB, and rgb(12, 34, 56); a three-digit value expands to six digits first. An rgba() value keeps only its first three channels and drops the alpha, and an eight-digit hex returns a format error, so strip the last two digits first.
HSL is output only, never input. Relative luminance applies the WCAG coefficients (0.2126R + 0.7152G + 0.0722B) and divides by 255; above 0.5 the tool suggests dark text, otherwise light. It does not linearise sRGB, so this is a rough guide, not a contrast ratio.
- HEX and rgb() input, HSL output only
- rgba alpha is ignored; eight-digit HEX errors
- Above 0.5 luminance suggests dark text
Where it stops, and what to use instead
It does not compute the WCAG contrast ratio or check whether a pairing reaches a threshold such as 4.5 to 1. Formal accessibility review belongs in browser dev tools or a dedicated contrast checker, using the actual foreground and background pair.
It also has no CMYK, HSV, Lab, or P3 support, no gamut mapping, and no gamma handling. Print work and brand colour management need design software or a colour management tool; for web styling, a quick conversion is all this is for.
- No WCAG contrast ratio
- No CMYK, Lab, or P3
- Print and brand colour need a colour management tool
FAQ
Does it accept transparency or HSL input?
Only partly. An rgba() value keeps the first three channels and ignores alpha, and an eight-digit hex returns a format error. HSL is output only, not accepted as input.
How should I read the relative luminance?
It applies the WCAG coefficients (0.2126R + 0.7152G + 0.0722B) and divides by 255. Above 0.5 the tool suggests dark text. For accessibility compliance, check the WCAG contrast ratio rather than this single number.
Why does a 3-digit value work?
It expands to six digits first, so #abc becomes #aabbcc, matching what design tools do. That means #f00 and #ff0000 produce exactly the same result.
Related tool：Color Converter (HEX / RGB / HSL)