Hex Color Code
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
2. Comprehensive Color Format Comparison Table
| Color Format | Syntax Example | Opacity Support | Gamut Breadth | Best Production Application |
|---|---|---|---|---|
| Hex Code (6-digit) | #0284C7 | Requires 8-digit (#0284C780) | Standard sRGB | Design tokens, legacy CSS, Figma handoff |
| Hex Code (8-digit) | #0284C7CC | Native (last 2 digits) | Standard sRGB | Concise styling with alpha transparency |
| RGB / RGBA | rgb(2, 132, 199 / 0.8) | Native decimal (0.0 to 1.0) | Standard sRGB | Dynamic JavaScript runtime color manipulation |
| HSL / HSLA | hsl(200, 98%, 39%) | Native decimal | Standard sRGB | Theming systems, lightness & saturation variants |
| OKLCH | oklch(0.62 0.16 230) | Native decimal | Wide Gamut (Display P3) | Modern perceptually uniform CSS design systems |
3. Bidirectional Hex Conversion Functions in TypeScript
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.