Developer Tools8 min readUpdated: 2026-10-12

Hex Color Code

Definition

A Hex Color Code is a 6-digit or 8-digit base-16 hexadecimal string prefixed with a hash mark (#) representing the precise intensity of Red, Green, Blue, and optional Alpha channels in the 24-bit sRGB color space.

Hex Color Code: Technical Breakdown

Originating in the earliest specifications of HTML 3.2 and CSS 1, hexadecimal color notation provides a compact, human-readable ASCII representation of digital color values. Because computer graphics chips process pixel color channels using 8-bit integers (ranging from 0 to 255 in base-10), each channel maps perfectly to exactly two hexadecimal digits (ranging from 00 to FF in base-16). When combined across Red, Green, and Blue channels, 6-digit hex notation can describe 16,777,216 discrete true-color hues (256 × 256 × 256 = 2^24). In modern CSS Color Module Level 4, hexadecimal notation also natively supports an optional fourth 2-digit alpha channel (#RRGGBBAA) governing opacity.

Key Technical Specifications

  • Mathematical Base: Base-16 positional numeral system utilizing digits 0–9 and alphabetic symbols A–F (where A=10, B=11, C=12, D=13, E=14, F=15).
  • Channel Allocation: Pairs of 2 hex digits represent Red (#RR....), Green (#..GG..), and Blue (#....BB) channels with integer values from 0 (0x00) to 255 (0xFF).
  • Shorthand Format: 3-digit shorthand (#RGB) expands symmetrically: #F0A becomes #FF00AA.
  • 8-Digit Alpha Channel: Supported across modern web browsers (#RRGGBBAA), where 00 represents 0% opacity (fully transparent) and FF represents 100% opacity (fully opaque).
  • Color Space Alignment: Standard web Hex codes default to the IEC 61966-2-1 sRGB color space gamut.

1. The Mathematics of Base-16 Hexadecimal Color Decoding

To understand how a hexadecimal code translates into physical light emitting from an OLED or LCD subpixel, consider the mathematical conversion formula: Each 2-character hex byte consists of a high-order nibble ($d_1$) and a low-order nibble ($d_0$): $$\text{Decimal Intensity} = (d_1 \times 16^1) + (d_0 \times 16^0) = (d_1 \times 16) + d_0$$ Let us convert the hex code `#3B82F6` (Tailwind Blue 500): • Red Channel (`3B`): $(3 \times 16) + 11 = 48 + 11 = 59$ (out of 255) • Green Channel (`82`): $(8 \times 16) + 2 = 128 + 2 = 130$ (out of 255) • Blue Channel (`F6`): $(15 \times 16) + 6 = 240 + 6 = 246$ (out of 255) Resulting in CSS RGB equivalent: `rgb(59, 130, 246)`.

2. Comprehensive Color Format Comparison Table

Comparing Hexadecimal against competing CSS color notation formats:
Color FormatSyntax ExampleOpacity SupportGamut BreadthBest Production Application
Hex Code (6-digit)#0284C7Requires 8-digit (#0284C780)Standard sRGBDesign tokens, legacy CSS, Figma handoff
Hex Code (8-digit)#0284C7CCNative (last 2 digits)Standard sRGBConcise styling with alpha transparency
RGB / RGBArgb(2, 132, 199 / 0.8)Native decimal (0.0 to 1.0)Standard sRGBDynamic JavaScript runtime color manipulation
HSL / HSLAhsl(200, 98%, 39%)Native decimalStandard sRGBTheming systems, lightness & saturation variants
OKLCHoklch(0.62 0.16 230)Native decimalWide Gamut (Display P3)Modern perceptually uniform CSS design systems

3. Bidirectional Hex Conversion Functions in TypeScript

Production JavaScript and TypeScript utility functions for converting RGB tuples to Hex strings and parsing Hex strings into RGB channel objects:
colorConverters.tstypescript
export interface RgbColor {
  r: number;
  g: number;
  b: number;
  a?: number;
}

export function rgbToHex(r: number, g: number, b: number, a?: number): string {
  const clamp = (val: number) => Math.max(0, Math.min(255, Math.round(val)));
  const toHexByte = (n: number) => clamp(n).toString(16).padStart(2, '0').toUpperCase();

  let hex = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
  if (typeof a === 'number') {
    const alphaByte = Math.round(Math.max(0, Math.min(1, a)) * 255);
    hex += toHexByte(alphaByte);
  }
  return hex;
}

export function hexToRgb(hex: string): RgbColor | null {
  let clean = hex.replace(/^#/, '').trim();
  if (clean.length === 3 || clean.length === 4) {
    clean = clean.split('').map(c => c + c).join('');
  }
  if (clean.length !== 6 && clean.length !== 8) return null;

  const num = parseInt(clean, 16);
  if (isNaN(num)) return null;

  if (clean.length === 6) {
    return {
      r: (num >> 16) & 255,
      g: (num >> 8) & 255,
      b: num & 255
    };
  }

  return {
    r: (num >> 24) & 255,
    g: (num >> 16) & 255,
    b: (num >> 8) & 255,
    a: Math.round(((num & 255) / 255) * 100) / 100
  };
}

Hex Color Code Misconceptions

❌ Myth: “Hex color codes are case-sensitive in CSS and HTML.”

✅ Reality: False. Hex codes are completely case-insensitive in web standards: #3b82f6, #3B82F6, and #3B82f6 evaluate identically in browser rendering engines.

❌ Myth: “Three-digit hex codes like #123 expand by appending zeros to #123000.”

✅ Reality: False. The W3C specification dictates character duplication: #123 expands to #112233, and #ABC expands to #AABBCC.

❌ Myth: “Hex codes can reproduce every color human eyes can perceive.”

✅ Reality: False. Traditional Hex codes map to the 8-bit sRGB color gamut, which covers only approximately 35% of the visible spectrum. Wider gamuts like DCI-P3 and Rec. 2020 require modern color functions like oklch() or color(display-p3).

Tools for Hex Color Code

Apply this concept directly using our free client-side browser utilities:

Hex Color Code FAQs

Why does web design favor Hex codes over RGB or HSL?

Hex codes offer unmatched brevity (7 characters including the hash mark), making them compact for CSS files, configuration objects, SVG attributes, and copy-pasting between design suites like Figma and IDE code editors.

How do I calculate 50% opacity in an 8-digit Hex code?

Multiply 255 by 0.50, which equals 127.5 (rounded to 128). Convert 128 to hexadecimal: 128 / 16 = 8 with remainder 0, giving '80'. Appending '80' to any 6-digit hex code yields exactly 50% opacity (e.g., #00000080 is 50% semi-transparent black).

What is web-safe color hex notation?

In the 1990s when computer monitors only displayed 256 indexed colors, designers used a palette of 216 'web-safe' colors whose hex values only used multiples of 33 in hexadecimal (00, 33, 66, 99, CC, FF). Modern 24-bit and 30-bit displays have rendered web-safe restrictions obsolete.

Concepts for Hex Color Code

Guides for Hex Color Code