How to Convert HEX to RGB (And Why Designers Need Both)

Every color on screen is just three numbers — red, green, and blue. HEX and RGB are two ways to write those same numbers. Understanding the conversion helps you work fluently across CSS, design tools, and code.

The conversion

HEX to RGB:
  #FF5733
  ├── FF = Red   → 255
  ├── 57 = Green → 87
  └── 33 = Blue  → 51

  Result: rgb(255, 87, 51)

Formula:
  Each HEX pair = hexadecimal number converted to decimal (0–255)
  First digit × 16 + Second digit = decimal value

RGB to HEX:
  Each RGB value (0–255) → convert to 2-digit hexadecimal
  Concatenate: #RRGGBB

Hexadecimal crash course

HEX uses 16 symbols: 0–9 and A–F (A=10, B=11, C=12, D=13, E=14, F=15)

Two-digit HEX to decimal:
  FF = 15×16 + 15 = 255
  80 = 8×16 + 0 = 128
  00 = 0×16 + 0 = 0
  A3 = 10×16 + 3 = 163
  
Decimal to HEX:
  200 ÷ 16 = 12 remainder 8 → C8
  45 ÷ 16 = 2 remainder 13 → 2D

Worked example

Convert #2E86AB to RGB:

2E: 2×16 + 14 = 46   → Red = 46
86: 8×16 + 6 = 134   → Green = 134
AB: 10×16 + 11 = 171 → Blue = 171

Result: rgb(46, 134, 171)

Convert rgb(220, 50, 100) to HEX:

220: 220÷16 = 13 remainder 12 → DC
50:  50÷16 = 3 remainder 2 → 32
100: 100÷16 = 6 remainder 4 → 64

Result: #DC3264

When to use HEX vs. RGB

Format	Best for	Example
HEX	CSS shorthand, design specs, brand guidelines	#FF5733
RGB	When you need opacity (RGBA), CSS functions	rgb(255, 87, 51)
RGBA	Transparency/opacity	rgba(255, 87, 51, 0.5)
HSL	Adjusting lightness/saturation intuitively	hsl(11, 100%, 60%)

Shorthand HEX

When each pair has repeated digits, you can shorten:

• #FF5500 → #F50
• #AABBCC → #ABC
• #112233 → #123

Not all HEX values can be shortened — #2E86AB has no shorthand.

Tips for working with colors

• Use HEX in CSS for consistency (most common in stylesheets)
• Switch to RGBA when you need transparency — there’s no “HEXA opacity” shorthand in older browsers
• Modern CSS supports 8-digit HEX (#FF573380 = 50% opacity) but RGBA is more readable
• HSL is better for creating color variations (adjust the L value for lighter/darker)
• Accessibility: ensure 4.5:1 contrast ratio between text and background colors
• Brand colors should be documented in HEX — it’s the universal design standard

Convert colors instantly between formats with OurDailyCalc’s HEX to RGB converter — paste any color code and get HEX, RGB, and HSL values.

TL;DR

• HEX = #RRGGBB where each pair is a hexadecimal value (0–255)
• Convert: multiply first digit by 16, add second digit
• HEX is compact for CSS; RGB/RGBA is needed for opacity
• Modern CSS supports both equally well
• Use HSL when you need to create variations of a base color