Everyday Calculators & Converters
HEX to RGB Converter
Convert HEX to RGB, or RGB to HEX, as you type, and see how readable text would be on the colour.
- Runs in your browser
- Both directions, as you type
Which colour?
Your colour
Type a colour
Enter a HEX code or three RGB values.
Finish the colour to update. Showing the last valid one.
#FF5733
- RGB
- rgb(255, 87, 51)
- HSL
- hsl(11, 100%, 60%)
- CSS
- color: #FF5733;
Text contrast
How it works
Both directions update as you type. Nothing is sent anywhere.
- HEX to RGB
- Each pair of hex digits is one channel from 00 to FF, which is 0 to 255 in decimal. #FF5733 is red 255, green 87, blue 51. In a 3- or 4-digit code each digit is doubled first.
- RGB to HEX
- Each channel, a whole number from 0 to 255, is written as two hex digits. Values outside 0–255 aren’t changed for you: the field explains what’s allowed.
- Transparency
- An 8-digit HEX code ends with two opacity digits; 80 is about 50%. The converter shows it as a percentage and as rgba() / hsla().
- HSL
- Hue in degrees, saturation and lightness in percent, rounded to whole numbers as browsers do.
- Contrast
- The WCAG contrast ratio of the colour against white and against black, rounded down to one decimal. Normal text needs 4.5:1 for AA. A transparent colour is first blended over the background it’s measured on.
Questions
What is a 3-digit HEX colour?
A shorthand where each digit is doubled: #F53 is the same as #FF5533. A 4-digit code works the same way and adds transparency: #F538 is #FF553388.
How does transparency (alpha) work in HEX?
An 8-digit code adds two digits for opacity after the colour: #FF573380 is the same colour at about 50% opacity. In CSS it can also be written as rgba() or hsla(). The converter shows alpha as a percentage.
What is HSL?
Another way to describe the same colour: hue (the position on the colour wheel, 0–360), saturation (how strong the colour is) and lightness (how light or dark). It’s handy for making lighter or darker versions of a colour.
What does the contrast ratio mean?
It compares how light the colour is with white and with black, from 1:1 (no difference) to 21:1 (black on white). Normal-size text needs at least 4.5:1 to pass WCAG AA. The ratio is shown rounded down, so it never looks better than it is.