Hexadecimal Colors in Web Design
Understanding #RRGGBB
Learn Hex ColorsEvery web designer encounters codes like #FF5733 or #2C3E50. These hexadecimal color codes are a compact way to specify colors using the same number system programmers use for binary data. Understanding hex colors unlocks precise color control in web design.
How Hex Colors Work
RGB Color Model
Digital screens create colors by combining red, green, and blue light.
- Each channel has 256 intensity levels (0-255)
- 0 = no light, 255 = full intensity
- 256 × 256 × 256 = 16.7 million possible colors
Hexadecimal Representation
- 256 values = FF in hex (two hex digits)
- More compact than decimal (255,128,0 vs FF8000)
- Easy to type and remember
Example: #FF5733
- FF = 255 red (maximum)
- 57 = 87 green (moderate)
- 33 = 51 blue (low)
- Result: Bright orange-red color
Common Color Values
| Color | Hex Code | RGB |
|---|---|---|
| Black | #000000 | 0, 0, 0 |
| White | #FFFFFF | 255, 255, 255 |
| Red | #FF0000 | 255, 0, 0 |
| Green | #00FF00 | 0, 255, 0 |
| Blue | #0000FF | 0, 0, 255 |
| Yellow | #FFFF00 | 255, 255, 0 |
| Cyan | #00FFFF | 0, 255, 255 |
| Magenta | #FF00FF | 255, 0, 255 |
| Gray | #808080 | 128, 128, 128 |
Shorthand Hex Colors
CSS allows 3-digit shorthand when both digits in each pair are the same.
How It Works
- #RGB expands to #RRGGBB
- Each digit is doubled
Examples
- #FFF = #FFFFFF (white)
- #000 = #000000 (black)
- #F00 = #FF0000 (red)
- #369 = #336699 (steel blue)
Limitation
#FF5733 cannot be shortened (57 ≠ 55 or 77)
Hex with Alpha (Transparency)
8-Digit Hex: #RRGGBBAA
Modern CSS supports adding alpha channel:
- AA = opacity (00 = transparent, FF = opaque)
- #FF573380 = 50% transparent orange-red
Common Alpha Values
- FF = 100% opaque
- CC = ~80% opaque
- 80 = 50% opaque
- 40 = 25% opaque
- 00 = fully transparent
Converting Hex to RGB
Method
- Take each 2-digit pair
- Convert from hex to decimal
Example: #4A90D9
- 4A = 4×16 + 10 = 74 red
- 90 = 9×16 + 0 = 144 green
- D9 = 13×16 + 9 = 217 blue
- RGB: rgb(74, 144, 217)
Quick Reference
- 00 = 0
- 40 = 64
- 80 = 128
- C0 = 192
- FF = 255
Converting RGB to Hex
Method
- Convert each decimal value (0-255) to hex (00-FF)
- Combine with # prefix
Example: rgb(100, 200, 150)
- 100 = 64 (6×16 + 4)
- 200 = C8 (12×16 + 8)
- 150 = 96 (9×16 + 6)
- Hex: #64C896
Quick Math
- Divide by 16 = first digit
- Remainder = second digit
- 100 ÷ 16 = 6 remainder 4 → 64
Using Hex Colors in CSS
Standard Usage
color: #FF5733;
background-color: #2C3E50;
border: 2px solid #E74C3C;
Alternative CSS Color Formats
rgb(255, 87, 51)- RGB decimalrgba(255, 87, 51, 0.5)- RGB with alphahsl(9, 100%, 60%)- Hue, Saturation, Lightness
When to Use Each
- Hex: Most common, compact
- RGB/RGBA: When calculating colors dynamically
- HSL: When adjusting lightness/saturation
Popular Color Palettes in Hex
Material Design
- Primary Blue: #2196F3
- Green: #4CAF50
- Red: #F44336
- Purple: #9C27B0
Flat UI Colors
- Turquoise: #1ABC9C
- Emerald: #2ECC71
- Wet Asphalt: #34495E
- Alizarin: #E74C3C
Conclusion
Hexadecimal color codes are a compact way to express RGB colors using the base-16 number system. Each pair of digits (00-FF) represents one color channel's intensity from 0-255. Understanding hex colors helps web designers work efficiently with color pickers, style sheets, and design tools. While tools can do the conversion, knowing how hex colors work enables better color manipulation and quicker debugging.