You've seen them in CSS, design tools, and HTML: #FF5733, #2196F3, #4CAF50. These hex color codes look intimidating but follow consistent rules. Once you can read them at a glance, the entire web becomes more navigable.
The structure
A hex color code is 6 characters (sometimes 3 or 8) representing red, green, and blue intensities:
- Characters 1–2: Red
- Characters 3–4: Green
- Characters 5–6: Blue
Each pair is a hex number from 00 to FF (0 to 255 in decimal). 00 means no light from that channel; FF means maximum.
Examples
- #FF0000: Red channel max, others zero. Pure red.
- #00FF00: Green channel max, others zero. Pure green.
- #0000FF: Blue max, others zero. Pure blue.
- #FFFFFF: All channels max. White.
- #000000: All channels zero. Black.
- #FF5733: R=255, G=87 (mid-low), B=51 (low). Orange-red.
The 3-digit shorthand
If each pair has identical digits, you can shorten:
- #FFAA00 → #FA0
- #33CC99 → #3C9
- #000000 → #000
- #FFFFFF → #FFF
The shorthand only works when each pair is XX. #FA00 isn't valid (4 chars). #FA00FF doesn't shorten cleanly.
The 8-digit form (with alpha)
An 8-character hex includes alpha (transparency):
- #FF5733FF — fully opaque
- #FF5733B3 — 70% opaque
- #FF573300 — fully transparent (invisible)
The alpha pair works like other channels: 00 = transparent, FF = opaque.
Reading hex color codes at a glance
Memorize the rough scale:
| Hex | Decimal | Intensity |
|---|---|---|
| 00 | 0 | None |
| 33 | 51 | Low |
| 66 | 102 | Medium-low |
| 99 | 153 | Medium |
| CC | 204 | Medium-high |
| FF | 255 | Max |
So #66CC99 = R medium-low, G medium-high, B medium = a green-leaning teal. The faster you read these, the faster you can spot what a color will look like.
Common patterns
- Grayscale: #XX XX XX where all three are equal. #888 = medium gray. #DDD = light gray. #222 = nearly black.
- Warm colors: red and green high, blue low. #FF6600 (orange), #FFCC00 (yellow), #CC0000 (dark red).
- Cool colors: blue dominant. #0066CC (medium blue), #6699CC (light blue), #003366 (navy).
- Pastels: all channels above 99. #FFCCCC (pink), #CCFFCC (mint), #CCCCFF (lavender).
- Earth tones: red and green higher, blue lower. #996633 (brown), #CC9966 (tan).
RGB vs Hex: same colors, different notation
#FF5733 and rgb(255, 87, 51) are identical. Different syntaxes for the same color value. Designers and developers use whichever is more convenient:
- Hex: compact, fits in tweets, easy to copy.
- RGB: easier to adjust by feel ("brighten green by 20") since channel values are decimal.
- HSL: better for theming (rotate hue, keep saturation/lightness consistent).
For modern web design, all three are widely supported. Pick by use case.
Why designers prefer hex
- Compactness. 6 chars vs 14+ for rgb().
- Sortability. Hex codes sort lexicographically, which roughly preserves color similarity.
- Tradition. HTML/CSS started with hex; muscle memory.
- Distinct channels. Even at a glance, you can read the three pairs.
Why developers sometimes prefer RGB
- Computed colors: easier in code (just integer math, not hex parsing).
- Alpha: rgba() is more readable than 8-digit hex.
- Adjustments: dim a color by 20% via rgb(255 × 0.8, 87 × 0.8, 51 × 0.8) is straightforward; hex requires intermediate decimal conversions.
HSL: a different approach
HSL (hue, saturation, lightness) describes color differently:
- Hue (0–360°): position on the color wheel. 0=red, 120=green, 240=blue.
- Saturation (0–100%): how vivid. 0% = gray, 100% = pure color.
- Lightness (0–100%): 0% = black, 50% = the pure color, 100% = white.
HSL is excellent for design systems — change hue while keeping saturation and lightness, all colors stay consistent. Many CSS frameworks (Tailwind, Material) use HSL internally for their palettes.
Browser color names
HTML/CSS supports 140+ named colors: red, blue, green, but also tomato, lavender, salmon, cornsilk, gainsboro, and more. They're equivalent to specific hex codes:
- tomato = #FF6347
- lavender = #E6E6FA
- steelblue = #4682B4
Using named colors is fine for prototyping but most production code uses hex for explicitness.
The 16,777,216 colors number
Each channel has 256 values, so total combinations: 256³ = 16,777,216 distinct colors. This is "24-bit color." Modern displays handle this comfortably — humans can distinguish ~10 million.
Some applications use 30-bit or higher color depth for HDR displays, but for web work, 24-bit is universal.
Convert quickly
Our hex/RGB color converter handles any color value. Useful for switching between hex and RGB during design work, or for verifying that your CSS color matches your design tool's color.