How to convert hex to RGB
- Type a hex code, an RGB value or an HSL value.
- Check the swatch to confirm it is the colour you expect.
- Use 8 digit hex if you need transparency, and read it back as rgba.
- Copy the CSS value you need.
How a hex code maps to RGB
A hex colour is three pairs of characters: red, green and blue. Each pair is a number in base 16 from 00 to FF, which is 0 to 255 in ordinary numbers. To convert a pair, multiply the first character by 16 and add the second, where A to F stand for 10 to 15.
Take #FF8800. FF is 15 x 16 + 15 = 255, 88 is 8 x 16 + 8 = 136, and 00 is 0. So the colour is rgb(255, 136, 0), a bright orange.
- Three digit hex is shorthand where each character is doubled, so #fff is #ffffff (white) and #f80 is #ff8800
- Eight digit hex adds a fourth pair for opacity, so #FF880080 is about 50 percent opaque and becomes rgba(255, 136, 0, 0.5)
When HSL is the easier choice
HSL describes a colour as hue, saturation and lightness. Hue is a position on the colour wheel from 0 to 360 degrees, where 0 is red, 120 green and 240 blue. Saturation runs from grey at 0 percent to full colour at 100 percent. Lightness runs from black at 0 percent to white at 100 percent, with the pure colour at 50 percent.
That makes HSL handy for building a set of related colours. Keep the hue fixed and change the lightness to get hover states, borders and backgrounds that clearly belong together. Teal, for example, is #008080, rgb(0, 128, 128) or hsl(180, 100%, 25%). Raise the lightness to 90 percent and you get a pale teal background in the same family.
Hex is still the most common format in brand guidelines and design tools, so it is usually the best one to store and share.
Questions people ask
What does #fff mean?
It is short for #ffffff, which is white. Each of the three characters is doubled to make the full six digit code.
How do I add transparency to a hex colour?
Add a fourth pair on the end. 00 is fully transparent and FF fully opaque, so 80 is about half. Modern browsers support 8 digit hex in CSS.
Are hex codes case sensitive?
No. #FF8800 and #ff8800 are the same colour.
Why does my colour look different in print?
Hex, RGB and HSL describe colours for screens. Printers use CMYK inks, which cannot reproduce every screen colour, especially bright oranges, greens and blues.