HEX Shorthand Color Codes Guide

What Are HEX Shorthand Codes?

Standard hex color codes use six hexadecimal digits — two each for red, green, and blue: #RRGGBB. Shorthand codes compress this to three digits by duplicating each digit: #RGB becomes #RRGGBB.

/* These are equivalent */
color: #f00;      /* #ff0000 */
color: #0f0;      /* #00ff00 */
color: #00f;      /* #0000ff */
color: #abc;      /* #aabbcc */

Each shorthand digit is repeated to fill the two-digit slot for that channel. The shorthand #3a5 expands to #33aa55, not #300a50.

When Shorthand Works

Shorthand codes work when both digits of each channel are identical. There are only 16 values per channel where this is true: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd, ee, ff.

That gives you 16 × 16 × 16 = 4,096 colors representable in shorthand — a tiny fraction of the 16.7 million colors available in full notation.

When Shorthand Does Not Work

Most colors require distinct digits in at least one channel and cannot be represented in shorthand:

/* No shorthand equivalent exists for these */
color: #d94f4f;   /* Not #d4f (#dd44ff — completely different color) */
color: #1e40af;   /* Not #14a (#1144aa — completely different color) */

The critical mistake is assuming you can truncate each channel to one digit. #d94f4f shortened to #d4f produces #dd44ff, a purple — not the red you intended.

Shorthand in CSS Practice

Acceptable Uses

/* Common named colors where shorthand is instantly recognizable */
background: #fff;
border-color: #000;
color: #333;

These are universally understood by developers and reduce visual noise in stylesheets.

Problematic Uses

/* Obscure shorthands that require mental expansion */
background: #b8d; /* What color is this? Most developers cannot tell at a glance */
color: #6a4;     /* Requires mental math to expand to #66aa44 */

If a shorthand is not immediately recognizable (#fff, #000, #f00, #333), use the full six-digit form for readability.

Shorthand and Alpha Transparency

The shorthand system extends to the 8-digit hex format with alpha (#RRGGBBAA). A 4-digit shorthand #RGBA expands to #RRGGBBAA:

/* 4-digit shorthand with alpha */
color: #fff8;   /* #ffffff88 — white at ~53% opacity */
color: #000c;   /* #000000cc — black at ~80% opacity */
color: #f00a;   /* #ff0000aa — red at ~67% opacity */

Browser support for 8-digit hex (and therefore 4-digit shorthand with alpha) is strong in modern browsers but verify your target environments.

Conversion Rules

To convert between shorthand and full notation:

// Expand 3-digit shorthand to 6-digit
function expandHex(short) {
  return short.replace(/([0-9a-f])/gi, '$1$1');
}
// expandHex('f80') → 'ff8800'

// Compress 6-digit to 3-digit shorthand (when possible)
function compressHex(full) {
  if (full[0] === full[1] && full[2] === full[3] && full[4] === full[5]) {
    return full[0] + full[2] + full[4];
  }
  return full; // Not compressible
}
// compressHex('ff8800') → 'f80'
// compressHex('d94f4f') → 'd94f4f' (unchanged)

Key Takeaways

• Shorthand hex duplicates each digit: #RGB → #RRGGBB. It does not truncate or pad.
• Only 4,096 out of 16.7 million colors can be represented in shorthand.
• Never truncate a 6-digit code to 3 digits — the resulting color is completely different.
• Use shorthand only for universally recognizable values like #fff, #000, and #333.
• 4-digit shorthand (#RGBA) extends the system to include alpha transparency.
• When in doubt, use the full 6-digit or 8-digit form for clarity.

Try It Yourself

Convert between hex, RGB, and HSL color formats with the Hex to RGB Converter.