8-Digit HEX Colors With Alpha

The Evolution of Hex Colors

For decades, CSS supported only 3-digit and 6-digit hex notation — #RGB and #RRGGBB — with no way to specify transparency. To add alpha, you had to switch to rgba() notation:

/* Old approach: mix notation styles */
background: #ff6600;
background: rgba(255, 102, 0, 0.8); /* must convert hex to decimal */

Modern CSS adds two more hex formats: 8-digit (#RRGGBBAA) and 4-digit (#RGBA). These let you specify transparency without leaving hex notation or converting to decimal values.

8-Digit Hex Syntax

The last two digits represent the alpha channel in hexadecimal:

background: #ff6600ff; /* fully opaque orange */
background: #ff6600cc; /* orange at 80% opacity */
background: #ff660080; /* orange at 50% opacity */
background: #ff660000; /* fully transparent orange */

Alpha Value Conversion

The alpha channel is a hex number from 00 to ff, representing 0% to 100% opacity:

For quick mental math, 80 is approximately 50%, cc is approximately 80%, and ff is fully opaque.

Converting Percentage to Hex

To convert a percentage to hex alpha:

function percentToHexAlpha(percent) {
  return Math.round(percent * 2.55).toString(16).padStart(2, '0');
}
// percentToHexAlpha(50) → '80'
// percentToHexAlpha(80) → 'cc'

4-Digit Shorthand With Alpha

Just as #RGB expands to #RRGGBB, #RGBA expands to #RRGGBBAA by doubling each digit:

background: #f60c; /* #ff6600cc — orange at 80% */
background: #f660; /* #ff666600 — transparent */
background: #0f0a; /* #00ff00aa — green at 67% */

The same readability caveat from 3-digit shorthand applies: only use 4-digit shorthand when the color-plus-alpha combination is immediately recognizable.

Browser Support

8-digit and 4-digit hex colors are supported in all modern browsers:

If you need to support older browsers, include a fallback:

background: rgba(255, 102, 0, 0.8); /* fallback */
background: #ff6600cc;               /* modern */

Practical Applications

Overlay Tints

Hex-with-alpha simplifies overlay backgrounds where you previously needed a separate pseudo-element:

/* Before: extra element */
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* After: single property */
.overlay {
  background: #00000080;
}

Hover States

Add transparency on hover without a separate rgba declaration:

.button {
  background: #6366f1;       /* solid indigo */
}

.button:hover {
  background: #6366f1cc;     /* slightly transparent on hover */
}

Design System Tokens

Consistent alpha values become easier to express when your design tokens stay in hex:

:root {
  --color-primary: #6366f1;
  --color-primary-subtle: #6366f120; /* 12% opacity */
  --color-primary-hover: #6366f1cc;  /* 80% opacity */
}

Hex Alpha vs rgba()

Both are valid CSS. Use hex-with-alpha when your workflow is already hex-centric (design tokens, Figma exports). Use rgba() when you need maximum readability or legacy browser support.

Key Takeaways

• 8-digit hex #RRGGBBAA adds a 2-digit alpha channel after the RGB channels.
• 4-digit shorthand #RGBA expands each digit by doubling it.
• Alpha ranges from 00 (transparent) to ff (opaque) — the same scale as color channels.
• Common values: 80 ≈ 50%, cc ≈ 80%, ff = 100%.
• Supported in all modern browsers; add rgba() fallbacks for older ones.
• Use hex-with-alpha when your workflow already uses hex — no need to switch notation just for transparency.

Try It Yourself

Convert hex colors with alpha to RGB and HSL formats using the Hex to RGB Converter.