You've seen them everywhere: #FF0000, #3B82F6, #1A1A2E. These are hex color codes — the standard language for expressing color in web design, CSS, design tools like Figma, and most graphics software. If you've ever wondered what those letters and numbers actually mean, this guide explains it all from scratch.
What does "hex" mean?
Hex is short for hexadecimal — a base-16 number system. Regular numbers are base-10 (digits 0–9). Hexadecimal adds six more digits using letters: A, B, C, D, E, F — where A=10, B=11, C=12, D=13, E=14, F=15.
This means a single hex digit can represent 16 values, and two hex digits together can represent 16 × 16 = 256 values (0–255). That's exactly the range needed for a single color channel.
Anatomy of a hex color code
Every hex color has exactly 4 components:
- # — just a prefix that signals "this is a hex color"
- First two digits — Red channel (00 to FF = 0 to 255)
- Middle two digits — Green channel (00 to FF = 0 to 255)
- Last two digits — Blue channel (00 to FF = 0 to 255)
Together, those three pairs encode 16,777,216 possible colors — the full RGB color space at 8 bits per channel.
Reference colors — memorize these landmarks
| Color | Hex | RGB | What to notice |
|---|---|---|---|
| Pure Red | #FF0000 | rgb(255,0,0) | Full Red, zero Green+Blue |
| Pure Green | #00FF00 | rgb(0,255,0) | Full Green, zero others |
| Pure Blue | #0000FF | rgb(0,0,255) | Full Blue, zero others |
| White | #FFFFFF | rgb(255,255,255) | All channels max |
| Black | #000000 | rgb(0,0,0) | All channels zero |
| Mid Gray | #808080 | rgb(128,128,128) | All channels equal (80 hex = 128) |
| Coral | #FF6B6B | rgb(255,107,107) | Full red, moderate green+blue |
| Sky Blue | #0EA5E9 | rgb(14,165,233) | Very low red, high green+blue |
#FF0000 = all red. #00FFFF = no red + full green+blue = cyan. #FFFFFF = everything at max = white.
How to read hex in your head
You don't need to calculate exact decimal values to read hex colors. Here's a faster mental model:
- 00 = 0 — the channel is completely off
- 80 = 128 — half intensity (middle gray)
- FF = 255 — the channel is fully on
- Higher pairs = brighter for that channel; lower pairs = darker
- Equal pairs = some shade of gray
So #FF8000 reads as: full red + half green + no blue = orange. No calculator needed.
The 3-digit shorthand
When each of the three color pairs has both identical digits (like FF, AA, or 33), you can write just one digit per channel. The browser doubles it automatically.
| Short | Full hex | Color |
|---|---|---|
| #FFF | #FFFFFF | White |
| #000 | #000000 | Black |
| #F00 | #FF0000 | Red |
| #09C | #0099CC | Sky Blue |
| #FAC | #FFAACC | Pink |
You can't shorten #FF6B6B because the middle pair (6B) does not repeat — 6 ≠ B.
Hex with transparency — the 8-digit format
Modern CSS supports an optional fourth pair of digits for the alpha (opacity) channel:
#FF6B6B— fully opaque coral red#FF6B6BFF— same, with explicit 100% opacity (FF = 255)#FF6B6B80— coral red at ~50% opacity (80 hex ≈ 128 decimal ≈ 50%)#FF6B6B00— fully transparent (invisible)
Hex in CSS — how to actually use it
Hex codes work anywhere a CSS color value is accepted:
• color: #FF6B6B; — text color
• background: #1A1A2E; — background
• border: 2px solid #6366f1; — borders
• box-shadow: 0 4px 20px #6366f140; — shadow with opacity (8-digit hex)
When you need a semi-transparent version of a hex color without the 8-digit format, convert to RGBA: our hex to RGB converter shows the RGBA value for any hex code instantly.
Popular colors and their hex codes
Convert any hex color instantly
Paste a hex code and get RGB, RGBA, HSL, HSV — all at once, with one-click copy.
Open the Converter →Related Articles
The Complete Guide to Hex to RGB Conversion — the full formula, worked examples, and code in JavaScript, Python, and CSS.
Hex to RGB in JavaScript — 5 Methods — copy-ready code for every use case.