Convert Hex Color Codes to RGB

Hex color codes are the most common way to specify colors in web development. A 6-digit hex color like #FF5733 encodes three separate 8-bit values for the red, green, and blue channels.

Step-by-step example — converting #FF5733 to RGB:

1. Split into three 2-digit pairs: FF, 57, 33
2. Convert each pair from hex to decimal:
   • Red: FF = 15×16 + 15 = 255
   • Green: 57 = 5×16 + 7 = 87
   • Blue: 33 = 3×16 + 3 = 51
3. Result: rgb(255, 87, 51)

Shorthand 3-digit hex notation:

CSS supports 3-digit shorthand where each digit is doubled: #F53 expands to #FF5533. This means:

• #FFF = #FFFFFF = rgb(255, 255, 255) (white)
• #000 = #000000 = rgb(0, 0, 0) (black)
• #F00 = #FF0000 = rgb(255, 0, 0) (red)

8-digit hex with alpha channel:

Modern CSS also supports #RRGGBBAA format, where the last two digits represent opacity: #FF573380 means the color at 50% opacity (80₁₆ = 128₁₀, and 128/255 = 0.502).

The math behind it:

Each color channel is stored as one byte (8 bits), giving values from 0 to 255. Two hex digits perfectly represent one byte: 00 to FF. The total color space contains 256³ = 16,777,216 possible colors. This is why hex is the preferred notation — it compactly represents each byte as exactly two characters, making it easy to read and manipulate individual color channels.