Tools / Color Converter
Color Converter: HEX, RGB and HSL
Type a value in any field and the others update instantly. Pick a colour visually or check whether your text stays readable on white and black.
Contrast ratios follow the WCAG 2.1 formula — 4.5:1 is the AA threshold for normal text.
Why three notations for one colour?
HEX is compact and used in HTML and CSS, RGB shows the red, green and blue channels directly, and HSL describes hue, saturation and lightness — much easier when you want a lighter or more muted variant of the same colour.
How to use this tool
- Paste a HEX value, or type an rgb() or hsl() string.
- Any other field updates as soon as the value is valid.
- Use the colour picker when you want to choose visually.
- Copy the notation your code needs.
FAQ
Why does my HSL value come back rounded?
RGB channels are integers from 0 to 255, so some HSL values fall between two representable colours. The tool shows the HSL of the rounded RGB result.
What does the contrast ratio mean?
It compares the luminance of your colour with white and black. 4.5:1 passes WCAG AA for normal text, 7:1 passes AAA, and 3:1 is the minimum for large text.
Does it support alpha or 8-digit HEX?
This converter works with opaque colours: 3-digit and 6-digit HEX, rgb() and hsl(). Transparency is left out so the contrast check stays meaningful.
Is anything sent to a server?
No. All conversions are arithmetic performed in your browser.