HEX to RGB Conversion Explained with Examples and Formulas

What are HEX and RGB Color Codes?

HEX and RGB are two ways to represent the same thing: a color on a screen. Every color you see on a digital display is made by mixing red, green, and blue light in different amounts. RGB specifies those amounts directly as numbers from 0 to 255. HEX represents the same numbers using hexadecimal notation.

For example, pure red is rgb(255, 0, 0) in RGB notation and #FF0000 in HEX. Both describe the same color: maximum red, no green, no blue.

How HEX Codes Work

A HEX color code is a six-character string preceded by a hash symbol. The six characters are three pairs: red, green, and blue.

#FF5733
 ^^ ^^ ^^
 R  G  B

FF = Red channel   = 255 in decimal
57 = Green channel = 87 in decimal
33 = Blue channel  = 51 in decimal

So #FF5733 = rgb(255, 87, 51)

The Conversion Formula

Hex to Decimal conversion:
  First digit x 16 + Second digit = Decimal value

Example: #3498DB
  Red:   34 -> (3 x 16) + 4 = 52
  Green: 98 -> (9 x 16) + 8 = 152
  Blue:  DB -> (13 x 16) + 11 = 219

Result: rgb(52, 152, 219)

Common Color Conversions

When to Use HEX vs RGB

• HEX is shorter and more common in design tools like Figma. Use it for solid colors.
• RGB is better when you need transparency via rgba(255, 87, 51, 0.5).
• Modern CSS also supports hex with alpha: #FF573380 but rgba() is more readable.

Shorthand HEX Codes

#FFF = #FFFFFF (white)
#000 = #000000 (black)
#F00 = #FF0000 (red)
#09F = #0099FF (sky blue)