How hex codes become RGB
A hex code is three numbers wearing a disguise. Split it into pairs and convert each pair from hexadecimal (base 16) to ordinary decimal, and you get the red, green and blue values:
Each pair runs from 00 (none of that colour) to FF (all of it, 255). To convert a pair by hand, multiply the first digit by 16 and add the second, remembering that A to F stand for 10 to 15.
Worked examples
Hex, RGB or HSL: which to use
All three describe the same colours. Hex is the compact classic you will meet in design tools and brand guidelines. The rgb() form is easier to read and to generate in code, and rgba() adds opacity. HSL (hue, saturation, lightness) is the most human of the three: want a darker version of the same colour, or its pastel cousin? Adjust lightness or saturation and the hue stays put, which is why design systems increasingly think in HSL.
Frequently asked questions
What is a hex colour code?
A hex code is a six-character code describing a colour as three pairs: red, green and blue. Each pair is a hexadecimal (base-16) number from 00 to FF, which is 0 to 255 in decimal. So #D7263D means red 215, green 38, blue 61.
How do I convert hex to RGB by hand?
Split the code into pairs and convert each pair from base 16. Multiply the first digit by 16 and add the second, where A to F stand for 10 to 15. For example D7 is 13 × 16 + 7 = 215.
What do three-digit hex codes like #F0C mean?
They are shorthand where each digit is doubled. #F0C expands to #FF00CC. This tool accepts both three and six digit codes.
When should I use hex and when RGB?
They describe exactly the same colours, so it is mostly convention. Hex is compact and common in CSS and design tools. The rgb() form is easier to read and to manipulate in code, and rgba() adds an opacity channel.
What about hex codes with eight digits?
An eight-digit code like #D7263D80 includes a fourth pair for alpha (opacity), where 00 is fully transparent and FF is fully opaque. 80 is about 50% opacity. The first six digits convert exactly as normal.