Color Specs
High-Value Technical Documentation Layer
Reference-grade notes for designers, frontend engineers, accessibility reviewers, and indexing systems that need precise color-model context.
The Mathematical Foundations of Digital Color Models
RGB is an additive model where red, green, and blue light combine in normalized channels from 0 to 1. A standard 8-bit CSS value maps each channel to channel / 255, so rgb(56, 189, 248) becomes approximately (0.220, 0.741, 0.973). HEX is the same channel data encoded in base 16.
CMYK is subtractive and estimates ink coverage. A common conversion is K = 1 - max(R,G,B), then C = (1 - R - K) / (1 - K), M = (1 - G - K) / (1 - K), and Y = (1 - B - K) / (1 - K). True print output still depends on ICC profiles, substrate, ink limits, and proofing conditions.
HSL and HSV project RGB into cylindrical coordinates. Hue is measured in degrees around the color wheel. HSL lightness uses (max + min) / 2, while HSV value uses max(R,G,B). OKLCH describes color as perceptual lightness, chroma, and hue, making palette ramps more visually consistent than direct channel interpolation in sRGB.
WCAG 2.1 Accessibility Standards & Contrast Ratios
WCAG contrast compares relative luminance for text and interface colors. sRGB channels are linearized using c / 12.92 when c <= 0.04045, otherwise ((c + 0.055) / 1.055) ^ 2.4. Relative luminance is then 0.2126R + 0.7152G + 0.0722B.
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text or significant UI components. AAA raises normal text to 7:1 and large text to 4.5:1.
Strong accessibility work also accounts for focus states, hover states, disabled controls, chart labels, validation feedback, and color-blind-safe encodings that pair color with position, text, icons, or patterns.
Modern CSS Color Modules (sRGB vs Display P3 vs OKLCH)
Classic CSS color values such as HEX, RGB, and HSL are normally interpreted in the sRGB color space. sRGB remains the most interoperable target for websites, screenshots, design tokens, and email-safe assets.
Wide-gamut displays can show colors outside the sRGB triangle. CSS Color Level 4 introduces functional notation such as color(display-p3 0.2 0.8 0.9), lab(), lch(), oklab(), and oklch(). These spaces are useful for richer UI accents, perceptual adjustments, and future-proof color systems.
Production CSS should include fallback behavior when a critical color depends on wide-gamut rendering. For stable design tokens, many teams define sRGB fallbacks first, then layer OKLCH or Display P3 in progressive-enhancement rules.
Developer Code Snippets for Color Conversion
// JavaScript: HEX to RGB
function hexToRgb(hex) {
const clean = hex.replace('#', '');
const full = clean.length === 3
? clean.split('').map(x => x + x).join('')
: clean;
const value = parseInt(full.slice(0, 6), 16);
return {
r: (value >> 16) & 255,
g: (value >> 8) & 255,
b: value & 255
};
}
# Python: RGB to HEX
def rgb_to_hex(r, g, b):
return "#{:02X}{:02X}{:02X}".format(r, g, b)
// PHP: relative luminance
function luminance($r, $g, $b) {
$map = function ($v) {
$c = $v / 255;
return $c <= 0.04045 ? $c / 12.92 : pow(($c + 0.055) / 1.055, 2.4);
};
return 0.2126 * $map($r) + 0.7152 * $map($g) + 0.0722 * $map($b);
}