Pixel360How to convert HEX to RGB
A hex color code is just three numbers written in base 16 (hexadecimal). Each pair of digits is one channel: red, green, then blue. Base 16 uses the digits 0–9 and the letters a–f, where a = 10 and f = 15. To convert hex to RGB, turn each pair into a decimal number:
value = (first digit × 16) + second digit
Two hex digits can hold 16 × 16 = 256 values, which is exactly the 0–255 range of an RGB channel. That is why #000000 is black, #ffffff is white, and every color in between maps one-to-one onto rgb().
Worked examples
- #4f46e5: 4f = 4 × 16 + 15 = 79, 46 = 4 × 16 + 6 = 70, e5 = 14 × 16 + 5 = 229, giving rgb(79, 70, 229).
- Shorthand #f80: each digit is doubled, so it means #ff8800, which is rgb(255, 136, 0).
- With alpha, #4f46e580: the last pair, 80, is 128. Alpha = 128 ÷ 255 ≈ 0.502, so rgb(79 70 229 / 0.502).
- RGB to hex, rgb(30, 144, 255): 30 = 1e, 144 = 90, 255 = ff, so #1e90ff.
HEX, RGB and HSL: which should you use?
All three describe the same sRGB colors, so the choice is about readability and workflow:
- HEX is compact and is what most design tools export. It is the easiest format to copy between Figma, code and documentation.
- RGB is handy when you need transparency or when JavaScript calculates the channels, for example in a canvas or a color picker.
- HSL is the easiest to adjust by hand. Keep the hue, change the lightness, and you get a matching palette of tints and shades. It is also convenient with CSS custom properties.
Converting to HSL involves rounding hue to whole degrees and saturation and lightness to whole percentages, so converting an HSL value back to hex can be off by one in a channel. Keep the hex or RGB value as your source of truth.
CSS named colors with HEX and RGB values
These are the exact values defined in the CSS Color Module Level 4 specification.
| Name | Swatch | HEX | RGB |
|---|---|---|---|
| black | #000000 | rgb(0, 0, 0) | |
| white | #ffffff | rgb(255, 255, 255) | |
| red | #ff0000 | rgb(255, 0, 0) | |
| lime | #00ff00 | rgb(0, 255, 0) | |
| blue | #0000ff | rgb(0, 0, 255) | |
| yellow | #ffff00 | rgb(255, 255, 0) | |
| cyan / aqua | #00ffff | rgb(0, 255, 255) | |
| magenta / fuchsia | #ff00ff | rgb(255, 0, 255) | |
| silver | #c0c0c0 | rgb(192, 192, 192) | |
| gray | #808080 | rgb(128, 128, 128) | |
| maroon | #800000 | rgb(128, 0, 0) | |
| olive | #808000 | rgb(128, 128, 0) | |
| green | #008000 | rgb(0, 128, 0) | |
| purple | #800080 | rgb(128, 0, 128) | |
| teal | #008080 | rgb(0, 128, 128) | |
| navy | #000080 | rgb(0, 0, 128) | |
| orange | #ffa500 | rgb(255, 165, 0) | |
| gold | #ffd700 | rgb(255, 215, 0) | |
| tomato | #ff6347 | rgb(255, 99, 71) | |
| coral | #ff7f50 | rgb(255, 127, 80) | |
| crimson | #dc143c | rgb(220, 20, 60) | |
| indigo | #4b0082 | rgb(75, 0, 130) | |
| rebeccapurple | #663399 | rgb(102, 51, 153) | |
| dodgerblue | #1e90ff | rgb(30, 144, 255) | |
| slategray | #708090 | rgb(112, 128, 144) |
Note that CSS green is #008000, not pure green. Pure green, #00ff00, is called lime.
Hex alpha (opacity) reference
To add transparency to a 6-digit hex code, append the two-digit alpha value: opacity × 255, rounded, then converted to hex. For example, 50% opacity is 0.5 × 255 = 127.5, which rounds to 128, or 80 in hex.
| Opacity | Hex suffix | Opacity | Hex suffix |
|---|---|---|---|
| 100% | ff | 40% | 66 |
| 90% | e6 | 30% | 4d |
| 80% | cc | 25% | 40 |
| 75% | bf | 20% | 33 |
| 70% | b3 | 10% | 1a |
| 60% | 99 | 0% | 00 |
| 50% | 80 |
Common mistakes
- Confusing the 4-digit and 8-digit forms.
#f80cis shorthand for#ff8800cc, where the last digit is alpha, not a fourth color channel. - Using percentages for alpha in hex. Hex alpha runs from 00 to ff, so 50% opacity is about 80 (128), not 50. Hex 50 is 80 ÷ 255 ≈ 31% opacity.
- Dropping leading zeros. rgb(5, 10, 15) is #050a0f. Writing #5a0f is a different, 4-digit shorthand color.
- Assuming similar hex codes look similar. A small change in the first pair (red) shifts the color more visibly than the same change in the last pair (blue), because the eye is more sensitive to some channels.
Once you have the RGB values, check whether your text and background pass WCAG with the color contrast checker. Building a type scale for the same design? Try the golden ratio calculator.
Frequently asked questions
How do I convert RGB to hex?
Convert each channel (0 to 255) to a two-digit base-16 number and join them. For rgb(30, 144, 255): 30 = 1e, 144 = 90, 255 = ff, so the hex code is #1e90ff. Pad single digits with a zero, so 5 becomes 05.
What is the difference between rgb() and rgba() in CSS?
In modern CSS there is none: rgb() accepts an optional alpha value and rgba() is kept as an alias. You can write rgb(79 70 229 / 0.5) with spaces, or the older comma form rgba(79, 70, 229, 0.5). Both work in all current browsers.
What does an 8-digit hex code mean?
The last two digits are the alpha (opacity) channel, from 00 (fully transparent) to ff (fully opaque). #4f46e580 is the same color as #4f46e5 at 128 ÷ 255 ≈ 50.2% opacity.
Are hex color codes case sensitive?
No. #FF6347, #ff6347 and #Ff6347 are the same color in CSS. Many style guides prefer lowercase for consistency.
Why is HSL useful if hex and RGB already exist?
HSL describes a color by hue, saturation and lightness, which matches how people think about adjusting color. To make a lighter tint you raise the lightness value instead of changing three channels at once.