What is RGB to HEX conversion?
RGB to HEX conversion rewrites a color's red, green and blue values, each from 0 to 255, as a six-digit hexadecimal code. rgb(30, 144, 255) becomes #1E90FF. The color doesn't change, only the notation. HEX codes are the usual format for design handoffs, brand guidelines and HTML attributes, so this conversion comes up whenever a color picked in code needs to go somewhere else.
Both notations are defined in the W3C's CSS Color Module Level 4.
How to use the converter
- Enter three RGB values, for example
rgb(30, 144, 255)or just30, 144, 255. - Click Convert.
- Check the color swatch under the output, then copy the HEX code.
The swatch is filled with the converted color, which makes it easy to catch a swapped or mistyped value before you use it.
Worked example
To convert rgb(30, 144, 255), convert each channel to base 16 separately. Divide by 16: the whole-number part is the first hex digit and the remainder is the second (with 10 to 15 written as A to F).
| Channel | Decimal | ÷ 16 | HEX |
|---|---|---|---|
| Red | 30 | 1 remainder 14 | 1E |
| Green | 144 | 9 remainder 0 | 90 |
| Blue | 255 | 15 remainder 15 | FF |
Joined together: #1E90FF. Small values always need two digits, so rgb(1, 2, 3) is #010203, not #123.
More conversions
| RGB | HEX |
|---|---|
0, 0, 0 |
#000000 |
255, 255, 255 |
#FFFFFF |
128, 128, 128 |
#808080 |
255, 99, 71 |
#FF6347 |
46 139 87 |
#2E8B57 |
rgb(102, 51, 153) |
#663399 |
The output is always the full six-digit form, even when a three-digit shorthand exists (#FFFFFF rather than #FFF).
Input the converter understands
The converter looks for the first three numbers in your input separated by commas or spaces. That's why it handles most ways RGB gets written:
| Input | Result |
|---|---|
rgb(30, 144, 255) |
#1E90FF |
30,144,255 |
#1E90FF |
rgb(30 144 255 / 50%) |
#1E90FF (alpha dropped) |
rgba(30, 144, 255, 0.5) |
#1E90FF (alpha dropped) |
256, 0, 0 |
Error: each value must be 0 to 255 |
30, 144 |
Error: three values needed |
rgb(100%, 0%, 0%) |
Error: percentages not supported |
hsl(210, 100%, 56%) |
Error: HSL isn't RGB |
Stick to plain whole numbers from 0 to 255. The tool reads runs of digits rather than parsing full CSS, so decimals, minus signs and numbers longer than three digits aren't understood and can produce the wrong color without an error. Round decimals and replace negative values with 0 before converting, and glance at the swatch to confirm the result.
Adding transparency
CSS Color 4 allows an eight-digit HEX code where the last pair is the alpha channel. The converter doesn't produce these, but they're easy to build: multiply the opacity (0 to 1) by 255, round it, and convert that to hex. 50% opacity is 128, or 80, so semi-transparent dodger blue is #1E90FF80. Not every design tool reads eight-digit codes, so check before handing one off.
Related tools
- HEX to RGB converter: go the other way.
- Color picker: choose a color visually and copy its codes.
- Online CSS editor: edit stylesheets with syntax highlighting.
Last updated