What is HEX to RGB conversion?
HEX to RGB conversion turns a hexadecimal color code such as #1e90ff into its red, green and blue components as decimal numbers from 0 to 255, here rgb(30, 144, 255). Both notations describe exactly the same sRGB color. HEX is compact and common in design tools, while RGB is easier to read and to adjust in code.
Both formats are defined in the W3C's CSS Color Module Level 4, and every browser understands both.
How to use the converter
- Type or paste a HEX code into the input box, with or without the
#. - Click Convert.
- Copy the
rgb(...)value from the output panel and paste it straight into your CSS.
The input is forgiving about format: #1e90ff, 1E90FF and #1e90ff with stray spaces around it all convert to the same value.
Worked example
Take #1E90FF (the CSS named color dodgerblue). A HEX code is three pairs of base-16 digits, one each for red, green and blue:
| Channel | HEX pair | Calculation | Decimal |
|---|---|---|---|
| Red | 1E |
1 × 16 + 14 | 30 |
| Green | 90 |
9 × 16 + 0 | 144 |
| Blue | FF |
15 × 16 + 15 | 255 |
In hexadecimal, A to F stand for 10 to 15, so E is 14 and F is 15. The result is rgb(30, 144, 255).
Shorthand 3-digit codes
CSS lets you write a color as three digits when each pair repeats. The converter expands them the same way, by doubling each digit:
| Shorthand | Expanded | RGB |
|---|---|---|
#fff |
#ffffff |
rgb(255, 255, 255) |
#000 |
#000000 |
rgb(0, 0, 0) |
#f0f |
#ff00ff |
rgb(255, 0, 255) |
#abc |
#aabbcc |
rgb(170, 187, 204) |
Note that #abc doesn't mean #0a0b0c. Doubling is the rule, not zero-padding.
More examples
| HEX | RGB | Color |
|---|---|---|
#ff6347 |
rgb(255, 99, 71) |
tomato |
#2e8b57 |
rgb(46, 139, 87) |
seagreen |
#663399 |
rgb(102, 51, 153) |
rebeccapurple |
#808080 |
rgb(128, 128, 128) |
gray |
What the converter rejects
You'll see "Enter a valid 3- or 6-digit HEX color" if the input:
- has the wrong number of digits, for example
#ff00or#1e90f, - contains a character that isn't 0–9 or a–f, such as
#1e90fg(a common typo), - has more than one
#, - is an 8-digit or 4-digit code with alpha, such as
#ff000080.
CSS Color 4 added those alpha forms, where the last pair (or last digit) sets opacity. This converter ignores transparency entirely and doesn't output rgba(). To convert #ff000080, remove 80 and convert #ff0000, then add the alpha yourself: 80 in hex is 128, or about 50% opacity.
It also doesn't take color names like tomato, or convert to HSL or CMYK. For picking a color visually and getting several formats at once, use the color picker.
When to use RGB instead of HEX
The two are interchangeable in CSS, so the choice is mostly about readability. RGB is handy when you want to tweak one channel or add transparency, since modern CSS accepts rgb(30 144 255 / 50%). HEX is shorter and is what most design tools export.
Related tools
- RGB to HEX converter: the reverse conversion, with a color preview.
- Color picker: choose a color and copy its code.
- Online CSS editor: edit stylesheets with syntax highlighting once you have your color values.
Last updated