Color Converter (HEX / RGB / HSL)
Convert a color between HEX, RGB and HSL and see its relative luminance, which tells you whether dark or light text will read better on it. Accepts #RGB, #RRGGBB and rgb(12, 34, 56) input for quick checks while styling.
How to use
- Enter a color as #RRGGBB, #RGB or rgb(12, 34, 56).
- The result lists HEX, RGB, HSL and the relative luminance, plus a dark-or-light text hint.
- Tweak one channel and enter it again to compare neighbouring values.
FAQ
Does it accept transparency or HSL input?
Only partly. An rgba() value keeps the first three channels and ignores alpha, and an 8-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.
Further reading