How to Convert RGB to Hex (and Back Again)
2 min read
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
- Take the red channel and divide it by 16. The whole number is the first hex character, the remainder is the second.
- Repeat for green and blue.
- Convert 10–15 to A–F, join the pairs, and prefix with
#.
For 220: 220 ÷ 16 = 13 remainder 12, which is D and C → DC. 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.