HEX to RGB Converter (and RGB to HEX)
Convert a HEX color code to RGB, or RGB back to HEX, as you type. The converter handles three-, six-, and eight-digit HEX codes with alpha, gives you copy-ready CSS in RGB, RGBA, and HSL, and shows the working for each pair.
- HEX
- RGB
- CSS (modern)
- HSL
| Channel | HEX pair | Working | Decimal |
|---|
How HEX color codes work
A HEX color code is an RGB color written in hexadecimal (base 16). The
six digits after the # are three pairs, one each for red, green, and
blue, and each pair runs from 00 (none of that channel)
to FF (all of it), which is 0 to 255 in ordinary decimal.
To convert HEX to RGB, multiply the first digit of each pair by 16 and
add the second, remembering that A to F stand for 10 to 15. So
#1E90FF splits into 1E, 90, and
FF: 1 × 16 + 14 = 30, 9 × 16 + 0 = 144, and 15 × 16 + 15 =
255, giving rgb(30, 144, 255). The table above shows this
working for whatever color you enter.
Converting RGB to HEX
Going the other way, divide each channel by 16. The whole-number result
is the first digit, and the remainder is the second. 136 ÷ 16 = 8
remainder 8, so 136 is 88; 255 is FF; 0 is
00. Join the three pairs after a # and you have the code:
rgb(255, 136, 0) is #FF8800. Type into the R,
G, and B boxes and the HEX code updates as you go, or paste a whole
rgb() value into the HEX box.
Shorthand, alpha, and case
- Three digits double each digit:
#F80is#FF8800. - Eight digits add an alpha (opacity) pair:
#1E90FF80is about 50% opaque, the same asrgba(30, 144, 255, 0.5). - Case doesn't matter:
#1e90ffand#1E90FFare the same color.
Which format should you use in CSS?
All of them describe identical colors, so it is a matter of
convenience. HEX is compact and what most design tools export. RGB and
HSL are easier to adjust by hand: HSL in particular lets you lighten or
darken a color by changing one number. Modern CSS also accepts the
space-separated form, rgb(30 144 255 / 50%), which the
converter offers alongside the classic comma syntax. To find the HEX
code of a color in a photo or screenshot, use the
color picker from image,
then try the result in a CSS
gradient. The guide to getting
a hex code from an image explains why picked colors sometimes look
slightly off.
Frequently asked questions
How do I convert HEX to RGB?
Split the six-digit code into three pairs and convert each pair from base 16 to a number from 0 to 255. For #1E90FF: 1E is 30, 90 is 144, and FF is 255, so the colour is rgb(30, 144, 255). Type any HEX code above and the converter shows the result and the working for each pair.
How do I convert RGB to HEX?
Convert each channel (0 to 255) to a two-digit base-16 number and join them after a #. For example, rgb(255, 136, 0) becomes FF, 88, and 00, which is #FF8800. Enter the red, green, and blue values above, or paste an rgb() value into the HEX box, and the HEX code updates instantly.
What is a three-digit HEX code?
A shorthand where each digit is doubled: #F80 means #FF8800, and #FFF means #FFFFFF. It only works for colours whose pairs repeat the same digit, which is why most colours need the full six digits.
What does an eight-digit HEX code mean?
The last two digits are alpha, or opacity. #1E90FF80 is the same blue at about 50% opacity, because 80 in base 16 is 128, roughly half of 255. In CSS the same colour can be written as rgba(30, 144, 255, 0.5).
Are HEX and RGB colours exactly the same?
Yes. A HEX code is RGB written in base 16 instead of base 10, so converting between them never changes the colour. Both describe colours in the sRGB colour space used by the web.
Related reading
- How to Get the Hex Code of a Color From an Image (and Why It Looks Wrong)
Three ways to pick a color, the four reasons the result is a shade off, and how hex and RGB relate.