HEX to RGB Color Converter
Translate colors between HEX, RGB, and HSL formats. Your work stays on this device whenever possible.
How to use HEX to RGB Color Converter
- Enter a code in 'HEX / HEXA Color' (3, 4, 6 or 8 digits), or use the 'Color Picker'.
- Drag 'Alpha Transparency' to set opacity between 0 and 100 percent.
- Press 'Convert Color', or 'Pick from Screen (EyeDropper)' where the browser supports it.
- Read the HEX, HEXA, RGB, HSL, HWB and CMYK lines and the ready-made CSS custom properties.
- Check the contrast badges against white and black, and look at the ten shade swatches below.
Worked example
Enter #2563EB with alpha at 100%. The tool reports HEX #2563eb, RGB rgb(37, 99, 235), HSL hsl(221, 83%, 53%), HWB hwb(221 15% 8%) and CMYK cmyk(84%, 58%, 0%, 8%). Contrast against white is 5.17:1, an AA pass, and against black is 4.06:1, a fail for normal text.
When to use this tool
- Turning a brand hex code into rgb() for a spreadsheet or design token file.
- Checking whether white text on a blue button clears the AA contrast threshold.
Important limitations
This does not manage print profiles, HDR, or wide-gamut color. Rounded HSL values can cause a one-step RGB difference.
Frequently asked questions
Can I type an rgb() or hsl() value?
No. Despite the page title, the input takes HEX only. RGB and HSL are outputs, so a string like rgb(37,99,235) shows an error about a valid 3, 4, 6 or 8-digit code.
Where does the alpha value come from?
From the slider alone. Alpha digits in a 4 or 8-digit code are parsed but not used, so #2563EB80 still reports full opacity until you move the slider.
How accurate are the CMYK and HSL numbers?
They are whole-number rounded formula results, so converting back can differ by one unit. CMYK is a simple math conversion without a print color profile.
What do the contrast badges test?
Relative luminance is compared against white and against black: 4.5:1 earns AA and 7:1 earns AAA for normal-size text. The 3:1 threshold that applies to large text is not shown as a separate badge.
Why does clicking a shade swatch misbehave?
A click writes an hsl() string into the HEX box, and the converter rejects that format with an error. Hover over the swatch to read its value in the tooltip, then copy it from there.