Hex Color Codes in Web Design
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
| Color | Hex Code | RGB |
|---|---|---|
| Tomato | #FF5733 | 255, 87, 51 |
| Indigo | #6366F1 | 99, 102, 241 |
| Emerald | #10B981 | 16, 185, 129 |
| Amber | #F59E0B | 245, 158, 11 |
| Pink | #EC4899 | 236, 72, 153 |
Converting Hex Colors
Use our hex decoder to convert color codes:
- Remove the # symbol
- Split into RR GG BB pairs
- 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
- Color Picker Tool - Interactive hex color selection
- Web Development Guide - Hex in CSS & HTML
- Hex Calculator - Color math operations