CSS HEX Colors

A hex color packs the same red/green/blue mixing idea as RGB into a compact six-character code, which is why it's the format you'll see copied out of most design tools.

In this page:

Hex Color Syntax
The 3-Digit Shorthand
Adding Alpha with 8-Digit Hex
Reading Hex Values at a Glance
Hex vs RGB in Practice

Hex Color Syntax

A hex color starts with # followed by six hexadecimal digits (0-9 and A-F), grouped in pairs for red, green, and blue -- #FF0000 is pure red because FF (255) is the maximum red value and the other two channels are 00. Hex digits are case-insensitive, so #ff0000 and #FF0000 are identical.

Example: Hex Color Syntax

css

<style>
.red { background: #FF0000; }
.lower { background: #ff0000; }
</style>
<div class="red">#FF0000</div>
<div class="lower">#ff0000 — identical color</div>

The 3-Digit Shorthand

When each channel's two digits are identical, CSS allows a 3-digit shorthand: #F00 expands to #FF0000. This only works when both digits of a channel match, so a color like #FF5733 has no valid 3-digit shorthand since none of its channel pairs repeat.

Example: The 3-Digit Shorthand

css

<style>
.short { background: #F00; }
.long { background: #FF0000; }
</style>
<div class="short">#F00</div>
<div class="long">#FF0000 — same color</div>

Adding Alpha with 8-Digit Hex

Modern CSS supports an optional 2-digit alpha channel appended to a hex color: #FF0000FF is fully opaque red, #FF000080 is roughly 50% transparent red. The alpha digits use the same 00-FF range as the color channels, where FF is fully opaque and 00 is fully transparent.

Example: Adding Alpha with 8-Digit Hex

css

<style>
.opaque { background: #FF0000FF; }
.half { background: #FF000080; }
</style>
<div class="opaque">Fully opaque red</div>
<div class="half">~50% transparent red</div>

Reading Hex Values at a Glance

With practice, the first two digits (red), middle two (green), and last two (blue) can be read directly to estimate a color -- high red and low green/blue means a shade of red, roughly equal high values across all three means a light gray or white, and equal low values mean a dark gray or black.

Example: Reading Hex Values at a Glance

css

<style>
.red-shade { background: #CC3333; }
.gray { background: #AAAAAA; }
</style>
<div class="red-shade">High red, low green/blue = red shade</div>
<div class="gray">Equal channels = gray</div>

Hex vs RGB in Practice

Hex codes are the most common format in design handoffs and CSS variables because they're compact and copy-paste friendly, while rgb()/rgba() are often preferred when a value needs to be split into separate numbers for animation or calculation. Both describe the exact same color space, so converting between them never changes the actual color.

Example: Hex vs RGB in Practice

css

<style>
.hex { background: #1a73e8; }
.rgb { background: rgb(26, 115, 232); }
</style>
<div class="hex">#1a73e8</div>
<div class="rgb">rgb(26, 115, 232) — same color</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS RGB Colors Next Lesson → CSS HSL Colors