RGB to HEX Converter

Turn red, green and blue numbers into the six-digit hex code that CSS, HTML and design tools expect.

Example conversion

rgb(220, 20, 60) converts to #dc143c

About RGB to HEX conversion

RGB and HEX hold exactly the same information - three channels of red, green and blue - written two different ways. RGB writes them as decimal numbers from 0 to 255. HEX writes them as base-16 pairs glued together behind a hash, so rgb(13, 110, 253) becomes #0d6efd. Nothing is approximated and nothing is lost; this is a change of notation, not a change of color space.

Hex won on the web because it is compact and unambiguous. Two hexadecimal digits cover the whole 0-255 range of one channel, so any color fits in six characters that copy and paste cleanly into a stylesheet, an HTML attribute or a design tool. That is why almost every color picker, brand guide and CSS file you meet speaks hex, even though the underlying model is still plain RGB.

When should you use RGB to HEX?

Writing CSS or HTML - hex is the conventional notation in stylesheets, and shorter than the equivalent rgb() function.
Moving a color out of an image editor - tools that report RGB sliders when you need a code for the web.
Filling in a design tool or brand document - Figma, Canva and most brand guides expect hex.
Reading values out of code - a script, canvas routine or API that produced RGB numbers you now need as a color code.

How the conversion works

Each channel is converted from decimal to hexadecimal on its own and padded to two digits. Take rgb(13, 110, 253):

13 in hex is d, padded to 0d
110 in hex is 6e
253 in hex is fd

Concatenate them behind a hash and you get #0d6efd. Because hexadecimal is base 16, the two digits run from 00 (0) to ff (255), covering every possible channel value exactly once. Upper and lower case mean the same thing to a browser - #0D6EFD and #0d6efd are identical - so pick one and stay consistent.

RGB vs HEX

Same model, different notation - both describe red, green and blue channels; only the number base differs.
Readability - RGB is easier to reason about by eye, since "110" means more than "6e" to most people.
Compactness - hex is shorter to write and easier to paste around without separators getting mangled.
Transparency - rgb() pairs naturally with rgba() for opacity, while hex needs the eight-digit form (#0d6efdcc) that older browsers do not understand.
Scripting - RGB numbers can be used in arithmetic directly; hex usually has to be parsed first.

Named CSS colors in RGB and HEX

The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.

Frequently asked questions

Is any color quality lost converting RGB to HEX?

None at all. Hex is just base-16 notation for the same three channels, so the conversion is exact in both directions. Every RGB value from 0-255 maps to exactly one two-digit hex pair.

What does each pair of hex digits mean?

Reading left to right after the hash: the first pair is red, the second green, the third blue. In #0d6efd that is red 0d (13), green 6e (110) and blue fd (253) - a strong blue.

When can I use a three-digit shorthand hex code?

Only when both digits in each pair are the same. #ffcc00 can be written #fc0, but #0d6efd cannot be shortened at all. That means only 4,096 of the 16.7 million possible colors have a shorthand form.

Should I write hex in upper or lower case?

Either works - browsers and design tools treat them identically. Lowercase is the more common convention in modern CSS codebases and in most linters' default rules.

How do I add transparency to a hex color?

Add a fourth pair for alpha: #0d6efd80 is the same blue at about 50% opacity. If you need broader browser support, convert to RGB with the HEX to RGB converter and use rgba(13, 110, 253, 0.5) instead.

Menu