Hex to RGB Converter

How to use this tool

Type or paste a hex code, with or without the #, and the RGB value appears at the top with HSL and CMYK. To go the other way, type red, green and blue values from 0 to 255 and the hex code updates, or choose a color with the picker.

The two swatches show your color behind white and black text, and the cards give every format ready to copy. Below, the channel chart shows how much red, green and blue the color holds, and the palette gives lighter tints and darker shades you can open in turn.

How hex color codes work

Screens make colors by mixing red, green and blue light, each at a level from 0 to 255. A hex code writes those three levels in base 16, where the digits run 0 to 9 and then A to F for 10 to 15. Two base 16 digits cover exactly 0 to 255, so six digits hold a complete color: #RRGGBB.

To read a pair, multiply the first digit by 16 and add the second. Shorthand codes with three digits double each one, and a fourth pair, when there is one, sets the opacity. HSL describes the same color by hue, saturation and lightness, which is easier for making lighter or darker versions, while CMYK is the ink mix used in print.

Common colors in hex, RGB and HSL

A worked example you can check on paper

Convert #1E90FF. The pairs are 1E, 90 and FF. 1E is 1 x 16 + 14 = 30, 90 is 9 x 16 + 0 = 144, and FF is 15 x 16 + 15 = 255, so the color is rgb(30, 144, 255), the named CSS color dodgerblue.

For HSL, the largest channel is blue at 255 and the smallest red at 30. Lightness is the average of the two as fractions of 255, (1 + 0.118) / 2 = 55.9%, and the hue, worked from the gaps between the channels, comes out at 210°, a sky blue: hsl(210, 100%, 56%).

Mistakes that catch people out

Mixing up the alpha position. CSS reads #RRGGBBAA, but Android and some design tools read #AARRGGBB, so 80FF0000 is not the same color in both.

Swapping red and blue. Some Windows programs store colors as blue, green, red, so a value copied from them can come out with red and blue swapped.

Trusting CMYK for print. A plain formula cannot match a real press. Printers use color profiles, and bright screen colors such as #00FF00 often cannot be printed at all.

Picking text color by eye. Mid tones such as #FF5733 fool the eye; check the contrast ratio before putting text on a colored background.

Popular calculations

Each opens the converter with that color, and the code can be changed once it is open.

Named CSS colors

Popular web colors

Grays

With transparency

How this was checked

The engine was tested in Node against known conversions, such as #FF5733 to rgb(255, 87, 51) and hsl(11, 100%, 60%), #1E90FF to dodgerblue, and #808080 to a contrast ratio of 3.95 against white, the same figure published contrast checkers give. Shorthand, 8 digit and invalid codes were all checked, and every named color in the CSS list is matched exactly.

Every address in the lists above was then opened and checked for a distinct title, the right values, charts that render, and clean CSV, image and print output containing only that color, at desktop, tablet and phone widths.

Common questions

How do I convert hex to RGB?

Split the six digits into three pairs and convert each pair from base 16: the first digit times 16 plus the second. #FF5733 gives FF = 255, 57 = 87 and 33 = 51, so rgb(255, 87, 51).

What is #FFFFFF in RGB?

rgb(255, 255, 255), pure white, with every channel at full brightness. #000000 is rgb(0, 0, 0), black, and #808080 is rgb(128, 128, 128), a middle gray.

How do I convert RGB to hex?

Turn each value from 0 to 255 into two hex digits: divide by 16 for the first digit and use the remainder for the second. 87 is 5 x 16 + 7, so 57; 255 is FF and 51 is 33, giving #FF5733. Type the numbers into the red, green and blue boxes to do it here.

What does an 8 digit hex code mean?

The last pair is the alpha, or opacity: FF is solid and 00 is fully transparent. #FF000080 is red at 128 out of 255, about 50% opacity. CSS puts alpha last, #RRGGBBAA, while Android puts it first, #AARRGGBB.

What is a 3 digit hex code?

A shorthand where each digit is doubled: #F80 means #FF8800 and #FFF means #FFFFFF. It only works for colors whose pairs are made of matching digits.

Which text color reads best on my color?

The one with the higher contrast ratio. WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. On #FF5733, black text scores 6.66 to 1 and white only 3.15 to 1, so black is the better choice.

Related Calculators and Reference

• Binary, Hex and Decimal Converter: any number between bases.
• Aspect Ratio Calculator: image and screen sizes.
• Mbps to MB/s Converter: download speeds and times.
• Paper Size Calculator: print sizes in inches and millimeters.
• W3C: Understanding Contrast Minimum: the contrast ratio rules used here.