rgbhexconverters

How to Convert RGB to Hex (and Back Again)

2 min read

How to Convert RGB to Hex (and Back Again)

RGB and hex codes are the two color formats you will meet most often in CSS, HTML and design tools. They both describe the same three numbers — the red, green and blue channels of a color — just written differently. Once you understand that, converting between them becomes easy.

What RGB and hex codes actually are

An RGB value lists each channel as a decimal number from 0 to 255, for example rgb(220, 20, 60).

A hex code writes those same three channels in base 16 and joins them with a #, for example #DC143C. Each pair of characters is one channel:

  • DC = 220 (red)
  • 14 = 20 (green)
  • 3C = 60 (blue)

Because each hex character holds 16 values, two characters cover all 256 possible channel values — which is why six digits can describe 16,777,216 colors.

Convert RGB to hex by hand

  1. Take the red channel and divide it by 16. The whole number is the first hex character, the remainder is the second.
  2. Repeat for green and blue.
  3. Convert 10–15 to A–F, join the pairs, and prefix with #.

For 220: 220 ÷ 16 = 13 remainder 12, which is D and CDC. That is how rgb(220, 20, 60) becomes #DC143C (Crimson).

Convert hex to RGB by hand

Reverse the process: convert each pair back from base 16 to decimal. #DC143C is (13×16+12, 1×16+4, 3×16+12) = rgb(220, 20, 60).

Do it instantly instead

Hand-converting every color is tedious, so designers use a converter. The RGB to Hex converter turns three channel sliders into a live hex code, and the Hex to RGB converter does the reverse — both also show the HSL values and give you one-click copy for CSS.

Need to start from a visual color instead? Use the color picker to dial in any shade, or explore 350+ named colors with their exact codes in the color library.

A quick reference

Common conversions: white #FFFFFF = rgb(255, 255, 255), black #000000 = rgb(0, 0, 0), and pure red #FF0000 = rgb(255, 0, 0).
/* Both of these are the same Crimson color */
color: rgb(220, 20, 60);
color: #dc143c;

The next time you see a hex code in a design file and need an RGB value for a canvas API — or the other way around — remember it is just base-16 arithmetic, and our converters do it for you in real time.