Color HEX
Understanding hexadecimal color codes and notation
What Is Hexadecimal Color?
A HEX color code is a way of expressing a color using hexadecimal (base-16) notation. It uses the digits 0–9 and letters A–F to represent values from 0 to 255. Each color is written as a # followed by six hex digits: two for red, two for green, and two for blue.
How Hex Digits Map to 0–255
Each pair of hex digits represents a number from 00 (0 in decimal) to FF (255 in decimal). The formula is: first_digit × 16 + second_digit. For example, 6C = 6×16 + 12 = 108.
| Hex | Decimal | Hex | Decimal |
|---|---|---|---|
| 00 | 0 | 80 | 128 |
| 1A | 26 | 99 | 153 |
| 33 | 51 | B3 | 179 |
| 4D | 77 | CC | 204 |
| 66 | 102 | E6 | 230 |
| 7F | 127 | FF | 255 |
Interactive HEX Breakdown
Hex Analyzer
#6C63FF
Red
6C
= 108 / 255
Green
63
= 99 / 255
Blue
FF
= 255 / 255
RGB108, 99, 255
HSL243°, 100%, 69%
Shorthand Notation: #RGB vs #RRGGBB
When each pair of hex digits has identical characters (like FF, 00, or AA), you can use shorthand — just three digits. The browser doubles each digit automatically.
| Shorthand | Full Form | Swatch |
|---|---|---|
| #F00 | #FF0000 | |
| #0F0 | #00FF00 | |
| #00F | #0000FF | |
| #FFF | #FFFFFF | |
| #000 | #000000 | |
| #F80 | #FF8800 | |
| #ABC | #AABBCC | |
| #369 | #336699 |
Common HEX Colors
Red#FF0000
Green#008000
Blue#0000FF
Yellow#FFFF00
Cyan#00FFFF
Magenta#FF00FF
Orange#FFA500
Purple#800080
Navy#000080
Teal#008080
Coral#FF7F50
Tomato#FF6347
Gold#FFD700
Indigo#4B0082
Lime#00FF00
Silver#C0C0C0
Try It — CSS HEX Syntax
Live Editor
.element {
background-color: #4285F4;
color: #ffffff;
padding: 24px;
}#4285F4
Fun fact: HEX colors also support an optional 8th digit for alpha transparency. For example,
#FF000080 is a 50% transparent red. The alpha value 80 hex = 128 decimal ≈ 50%.