RGB to HEX Converter

RGB to HEX Convertor: What is RGB to HEX conversion?

RGB and HEX are two ways of writing the same color—there's no change in the color itself; just how it's written in code.

RGB refers to a colour as three numbers: Red, Green, Blue – each one varying from 0 to 255 indicating the amount of light of that colour that is added in. It is the default mode of most photo-editing programs (Photoshop, Figma, Illustrator) and is intuitive because you can view each channel individually.

HEX does the same, but writes those three numbers as a single 6 character code, in base-16 (hexadecimal), preceded by a # — rgb(220, 54, 54) is written as #DC3636. It is the way that most stylesheets use it when writing CSS and HTML, and requires less space than rgb() each time.

They both display the same color, just a notation convention change — not a color change.

Process of the conversion.

Each channel (0–255) is represented as a 2-digit hex number, then the three pairs are concatenated:

1. Convert the Red value into a two digit (00 – FF) hex number.
2. Convert the Green value into two hex digits (00 - FF)
3. Change the Blue value to 2 hex digits (00 to FF)
4. Add a # at the beginning and join them up, #RRGGBB

Example: rgb(220, 54, 54) →
220 in hex = DC
54 in hex = 36
54 in hex = 36 → #DC3636

The range of each hex digit is 0-9 then A-F so 2 digits can represent 0-255 exactly (16 x 16 = 256 possible values per channel) and HEX and RGB colors can always convert back and forth without loss of precision.

Common Color Conversions (Reference Table)

Hex to RGBA: Transparency Issues

The standard six-digit hex color notation doesn't have a transparent component, so if your color has transparency (alpha) value, like rgba(220, 54, 54, 0.5), it won't work. There are 2 ways to deal with it:

• Modern CSS also adds a 4th pair of digits to the hex to handle transparency, #DC363680 and the last 2 digits are the transparency - 00 is transparent, FF is opaque. It is well supported by the current versions of Chrome, Firefox, Safari, and Edge, but may not be recognised by older versions of browsers.
• If you want a guaranteed compatibility, then don't convert the color, it will be rgba() instead of HEX8.

Three-Digit HEX Shorthand

When all three pairs of channels are the same, a shortened 3 digit hex code can be used in the CSS, for example #33ff99 can be shortened to #3f9. It will only work if the two digits in each pair are the same (e.g. #DC3636 cannot be shortened because DC is not a repeated digit). The hex form is always valid, and is the default output of any RGB-to-HEX conversion, while the three-digit form is a short-hand that only works for a limited number of colors.

The time to use RGB vs. HEX.

In reality, most designers will be working in RGB when creating their designs, and only switch to HEX when it's time to pass it off to the developer or to compile it into CSS — that's when this is needed.

Frequently Asked Questions