Hex Color Codes in Web Design

Understanding RGB & Hexadecimal Color Notation

What Are Hex Color Codes?

Hex color codes represent RGB (Red, Green, Blue) values in hexadecimal format. Each color component uses 2 hex digits (00-FF), providing 256 shades per channel and 16.7 million total colors.

Hex Color Structure

#RRGGBB Format:
#FF0000 = Red   (R:255, G:0,   B:0)
#00FF00 = Green (R:0,   G:255, B:0)
#0000FF = Blue  (R:0,   G:0,   B:255)
#FFFFFF = White (R:255, G:255, B:255)
#000000 = Black (R:0,   G:0,   B:0)

Short Hex Notation

When both digits in each channel are identical, use shorthand:

#FFFFFF → #FFF (white)
#000000 → #000 (black)
#FF0000 → #F00 (red)
#00FF00 → #0F0 (green)
#0000FF → #00F (blue)

Popular Hex Colors

ColorHex CodeRGB
Tomato#FF5733255, 87, 51
Indigo#6366F199, 102, 241
Emerald#10B98116, 185, 129
Amber#F59E0B245, 158, 11
Pink#EC4899236, 72, 153

Converting Hex Colors

Use our hex decoder to convert color codes:

  1. Remove the # symbol
  2. Split into RR GG BB pairs
  3. Convert each pair from hex to decimal (00-FF → 0-255)
#3B82F6 (Blue shade)
↓
3B 82 F6
↓
Decimal: 59, 130, 246
Result: rgb(59, 130, 246)

Hex Colors in CSS

/* Full Hex */
.button { background-color: #6366F1; }

/* Short Hex */
.text { color: #FFF; }

/* With Alpha (RGBA) */
.overlay { background-color: #6366F1CC; }
/* CC = 80% opacity in hex */

Color Mixing with Hex

Average hex values to mix colors:

Red   #FF0000 (255, 0,   0)
Blue  #0000FF (0,   0, 255)
↓
Mix:  #7F007F (127, 0, 127) = Purple

Accessibility & Contrast

Ensure sufficient contrast between text and background colors:

  • WCAG AA: 4.5:1 contrast ratio for normal text
  • WCAG AAA: 7:1 contrast ratio for normal text
  • Tools: Use color contrast checkers with hex codes

💡 Pro Tip

Use color picker tools alongside our hex decoder for precise color selection. Test accessibility with contrast analyzers before finalizing your palette.

Related Resources

Try Hex Decoder →