Hex Color Codes Explained: What #FF5733 Actually Means

Hex color codes look cryptic, but once you understand the hexadecimal number system they're completely transparent. #FF5733 is just three numbers — red, green, and blue — written in base 16. This guide explains exactly how to read and write any hex color.

The Hexadecimal Number System

Everyday counting uses base 10: digits 0–9. Hexadecimal uses base 16: digits 0–9 plus letters A–F, where A=10, B=11, C=12, D=13, E=14, F=15.

This matters because computers represent color channels as 8-bit values (0–255). Writing 255 in hex is FF, because F×16 + F = 15×16 + 15 = 240 + 15 = 255. The hex notation compresses an 8-bit value into exactly two characters, which is convenient.

Breaking Down #FF5733

A six-digit hex color code (#RRGGBB) is three pairs of hex digits, each encoding one colour channel:

• FF → Red channel = 255 (maximum red)
• 57 → Green channel = 5×16 + 7 = 87 (moderate green)
• 33 → Blue channel = 3×16 + 3 = 51 (low blue)

So #FF5733 = rgb(255, 87, 51) — a vivid orange-red. High red, medium-low green, minimal blue. Once you internalise the pairs, you can roughly read any hex color at a glance.

The Three-Digit Shorthand

When both digits in each pair are identical, CSS allows a three-digit shorthand. #RGB expands to #RRGGBB by doubling each digit:

• #FFF → #FFFFFF (white)
• #000 → #000000 (black)
• #F00 → #FF0000 (pure red)
• #0F0 → #00FF00 (pure green)
• #09C → #0099CC (a medium blue)

This shorthand only works when each channel is a repeated digit pair. #FF5733 cannot be shortened because 57 and 33 are not repeated pairs.

Hex Colours with Opacity: #RRGGBBAA

CSS Color Level 4 introduced an eight-digit hex format that adds an alpha (opacity) channel: #RRGGBBAA. The fourth pair follows the same 00–FF scale, where 00 = fully transparent and FF = fully opaque.

• #FF573380 → rgb(255, 87, 51) at ~50% opacity (80 hex = 128 decimal ≈ 50%)
• #00000066 → black at ~40% opacity
• #FFFFFF00 → white fully transparent (invisible)

Browser support for 8-digit hex is excellent as of 2025. The four-digit shorthand also works: #RGBA expands to #RRGGBBAA.

Reading Common Hex Colors Mentally

You don't need to do the full math every time. Learn these anchors and you can estimate any hex color:

• #FF0000 — Pure red
• #00FF00 — Pure green (lime)
• #0000FF — Pure blue
• #FFFF00 — Yellow (max red + green, no blue)
• #FF00FF — Magenta (red + blue)
• #00FFFF — Cyan (green + blue)
• #FFFFFF — White (all channels max)
• #000000 — Black (all channels zero)
• #808080 — Mid grey (80 hex = 128, exactly halfway)

From these anchors, you can navigate: a hex code with high first pair and low second and third is a shade of red. Equal first and second pairs with low third is yellow. Equal high values across all three channels is light grey approaching white.

Hex vs RGB vs HSL

All three formats describe the same colours. The question is which is easier to reason about for a given task:

• Hex — compact, copy-paste friendly, universally supported. Best for specifying exact colours in code.
• RGB — direct channel manipulation. Easier to understand than hex for humans doing math, but more verbose in CSS.
• HSL — Hue (0–360° on the colour wheel), Saturation (0–100%), Lightness (0–100%). Most human-readable for making colours lighter, darker, or more muted. Easy to generate colour variations: same hue, different lightness.

In practice: use hex when specifying a precise brand colour from a design system, use HSL when building a colour system programmatically (e.g., generating hover states by adjusting lightness by ±10%).

Why Design Tools Output Hex

Figma, Sketch, and Adobe XD all output hex colours by default because hex is the format developers are most familiar with and CSS has supported it since the beginning. The CSS spec added rgb() notation later, and hsl() later still. Hex has no functional advantage over rgb() in modern CSS — it is purely conventional.

That convention is worth following: when you share design specs with developers, hex is the lingua franca. When you write CSS for a colour system with many related shades, HSL is often cleaner.