Turn RGB values into a HEX code
Type three numbers and the HEX code appears as you go: rgb(59, 130, 246) is #3B82F6. The field takes commas, spaces and percentages, so you can paste a value straight from a stylesheet or a color picker. The switch under the fields also reads channels given as fractions from 0 to 1.
How do you convert RGB to HEX?
Divide each channel by 16. The quotient is the first character of the pair and the remainder is the second, with the numbers 10 to 15 written as the letters A to F. Channel 59 gives 3 and a remainder of 11, which is the pair 3B.
Formula: write each channel as two hexadecimal characters and join the pairs in the order red, green, blue.
The same arithmetic turns 130 into 82 and 246 into F6, so rgb(59, 130, 246) comes out as #3B82F6. A channel below 16 takes a leading zero so the pair always has two characters, which makes the value 10 read as 0A.
Grays have all three channels equal, so their codes are made of three identical pairs: 51 gives #333333 and 204 gives #CCCCCC. You can shorten a code like that to three characters and the browser expands it again.
The other direction rests on the same number, only you multiply each pair by 16 and add the second character. The HEX to RGB converter does the whole thing for you.
What are RGB values, and what is hexadecimal notation?
RGB describes a color with three numbers, one each for the red, green and blue channel. Every one of them lands between 0 and 255, because that is how many brightness steps a single channel has in twenty-four-bit color. Three channels of 256 steps make 16,777,216 colors between them[1].
Hexadecimal notation gives the same three numbers in a different number system. A channel has 256 steps, and that is exactly what two hexadecimal characters hold, so each channel takes up two places in the code. The whole color comes down to six characters, with no commas and no brackets.
That brevity decides where you meet each notation. HEX codes sit in stylesheets, in color fields in Figma and in brand books. RGB values show up in the Computed tab in a browser, in the color pickers of graphics software, and anywhere the color takes part in a calculation.
The CSS Color Level 4 specification allows four code lengths: three, four, six and eight characters[2]. The three-character version works where both characters of a pair are the same, because the browser expands it by repetition. The four- and eight-character versions add opacity at the end.
Both forms describe the color in the same sRGB space, which W3C adopted for HTML and CSS[1]. A channel written as 255 and the same channel written as FF are exactly the same shade.
HEX codes of the grays used in interfaces
#4D4D4D. Photo: Bill Abbott, CC BY-SA 2.0.| RGB values | HEX code |
|---|---|
| 13, 13, 13 | #0D0D0D |
| 14, 14, 14 | #0E0E0E |
| 15, 15, 15 | #0F0F0F |
| 24, 24, 24 | #181818 |
| 35, 35, 35 | #232323 |
| 36, 36, 36 | #242424 |
| 37, 37, 37 | #252525 |
| 51, 51, 51 | #333333 |
| 60, 60, 60 | #3C3C3C |
| 64, 64, 64 | #404040 |
| 65, 65, 65 | #414141 |
| 66, 66, 66 | #424242 |
| 74, 74, 74 | #4A4A4A |
| 77, 77, 77 | #4D4D4D |
| 82, 82, 82 | #525252 |
| 84, 84, 84 | #545454 |
| 89, 89, 89 | #595959 |
| 97, 97, 97 | #616161 |
| 128, 128, 128 | #808080 |
| 204, 204, 204 | #CCCCCC |
A gray with equal channels always gives a code of three repeated pairs, so #333333 shortens to #333 and #CCCCCC to #CCC.
Which pair of characters does a channel value give?
| Channel value | Character pair |
|---|---|
| 0 | 00 |
| 16 | 10 |
| 32 | 20 |
| 48 | 30 |
| 64 | 40 |
| 80 | 50 |
| 96 | 60 |
| 112 | 70 |
| 128 | 80 |
| 144 | 90 |
| 160 | A0 |
| 176 | B0 |
| 192 | C0 |
| 208 | D0 |
| 224 | E0 |
| 240 | F0 |
| 255 | FF |
Each row is sixteen steps of the channel, which is one step on the first character of the pair.
Channels in 0–1 notation and their HEX codes
| 0–1 notation | RGB values | HEX code |
|---|---|---|
| 0, 0, 0 | 0, 0, 0 | #000000 |
| 0.1, 0.1, 0.1 | 26, 26, 26 | #1A1A1A |
| 0.2, 0.2, 0.2 | 51, 51, 51 | #333333 |
| 0.25, 0.25, 0.25 | 64, 64, 64 | #404040 |
| 0.5, 0.5, 0.5 | 128, 128, 128 | #808080 |
| 0.75, 0.75, 0.75 | 191, 191, 191 | #BFBFBF |
| 0.8, 0.8, 0.8 | 204, 204, 204 | #CCCCCC |
| 0.9, 0.9, 0.9 | 230, 230, 230 | #E6E6E6 |
| 1, 1, 1 | 255, 255, 255 | #FFFFFF |
| 0.2314, 0.5098, 0.9647 | 59, 130, 246 | #3B82F6 |
| 0.9373, 0.2667, 0.2667 | 239, 68, 68 | #EF4444 |
| 0.1333, 0.7725, 0.3686 | 34, 197, 94 | #22C55E |
Multiply the fraction by 255 and round to the nearest whole number. That turns 0.5 into 128 and 0.75 into 191.
Where do you read RGB values in the program you work in?
All three places show the same color, only in a different notation.
Photoshop
Double-click the foreground color square at the bottom of the toolbar. In the Color Picker window the values sit in the R, G and B fields, each in the range 0 to 255.Figma
Select the layer and click the swatch in the Fill section of the right-hand panel. Under the hue and opacity sliders you open the list of notations and pick RGB; Hex is what sits there by default.Browser
Right-click the element, choose Inspect and go to the Computed tab. The browser gives every color property there inrgb()notation, whatever the stylesheet used.
How do you convert RGB to HEX in Excel?
Put the channels in cells A1, B1 and C1 and enter ="#"&DEC2HEX(A1,2)&DEC2HEX(B1,2)&DEC2HEX(C1,2) in a fourth cell. For the values 59, 130 and 246 it returns #3B82F6.
The 2 in each call is the places argument, which pads the result with leading zeros[3]. A color code needs exactly two characters per channel, and a channel with the value 10 would give a bare A without that argument.
Copying the cell down converts a whole column. Google Sheets and LibreOffice Calc use the same function name.
Sources
- sRGB — Wikipedia
- CSS Color Module Level 4 — hex notation — W3C
- DEC2HEX function — Microsoft Support
Every figure in the tables was computed from the unit definitions and checked arithmetically before publication. Historical values and the names of local units come from the sources listed above.
Content last reviewed: · written and checked by the Arteon team
Common questions about converting RGB to HEX
What is the HEX code for rgb(51, 51, 51)?
It is #333333, one of the most used grays for text. The value 51 gives the pair 33, and because all three channels are equal the code shortens to #333.
Does the converter take numbers separated by a space?
Yes. The field reads 59 130 246, 59, 130, 246 and the full rgb(59 130 246 / 50%) notation. Modern CSS separates channels with spaces and puts opacity after a slash, so you can paste that straight from a stylesheet.
What do you do with a value written as rgba?
Type it in whole. The converter reads the fourth number as opacity and adds it to the end of the code, so rgba(59, 130, 246, 0.5) gives #3B82F680.
Can channels be given as percentages?
Yes. The notation 50%, 50%, 50% matches a value of 128 on each channel and gives the code #808080. A hundred percent means 255 and zero percent means 0.
How do you convert RGB to HEX in your head?
Divide the channel by 16. The quotient is the first character of the pair, the remainder is the second, and the numbers 10 to 15 are written as the letters A to F. Channel 160 gives a flat 10 and no remainder, which is the pair A0.
What is the difference between 0–255 and 0–1 notation?
It is the same color on two scales. The 0–255 scale is what CSS and graphics software use, while 0–1 belongs to 3D engines and plotting libraries. The RGB channel notation switch under the fields tells the converter which of the two you are typing.
Can you go back from a HEX code to RGB values?
Yes, and the result is exactly the same, because both forms describe the same three numbers. The Swap order button takes you to the HEX to RGB converter, where you type the code and read the channels.
How do you get a print color out of RGB values?
A press describes color with four inks, so the same three numbers have to go through CMYK. The RGB to CMYK converter handles it and gives the shares of cyan, magenta, yellow and black.
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.