Mathematical Standards & Specifications

Color Science & Calculation Methodology

Color Pickers uses standardized mathematical models, colorimetry specifications, and W3C guidelines to perform conversions, generate palettes, and evaluate accessibility metrics. All transformations execute client-side inside your browser engine.

1. Foundational Architecture & Precision

Local Browser Execution

Calculations are computed locally using TypeScript logic running inside the user’s JavaScript runtime. Color values and uploaded images are processed on your device and are not transmitted to remote servers.

Standardized Color Spaces

All RGB and HEX operations assume the standard sRGB gamut (IEC 61966-2-1:1999) with D65 reference white, which is the baseline color model for web browsers and display screens.

2. HEX & RGB Conversions

A hexadecimal color code encodes three 8-bit channels (Red, Green, Blue) as base-16 integers ranging from 00 (0) to FF (255).

// HEX to RGB Bit-Shift Algorithm
R = (hexInteger >> 16) & 0xFF
G = (hexInteger >> 8) & 0xFF
B = hexInteger & 0xFF

For 3-digit shorthand syntax (e.g., #F57), each character is doubled (#FF5577) in accordance with the W3C CSS Color Module Level 3 specification before decoding.

3. HSL & HSV Coordinate Transformations

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) represent cylindrical re-mappings of the sRGB cube:

  • Hue ($H$): An angle from 0° to 360° on the color wheel calculated from the dominant RGB channel and channel delta.
  • Lightness ($L$): The arithmetic mean of the maximum and minimum normalized RGB components: $L = (max + min) / 2$.
  • Value ($V$): The maximum normalized RGB component: $V = max(R, G, B)$.
// HSL Saturation Calculation
Δ = max(R, G, B) - min(R, G, B)
if Δ == 0: S = 0
else if L > 0.5: S = Δ / (2 - max - min)
else: S = Δ / (max + min)

4. CMYK Subtractive Ink Approximation

CMYK (Cyan, Magenta, Yellow, Key/Black) values are calculated using standard digital subtractive color simulation.

K = 1 - max(R/255, G/255, B/255)
if K == 1: C = 0, M = 0, Y = 0, K = 100%
else:
C = ((1 - R/255 - K) / (1 - K)) × 100%
M = ((1 - G/255 - K) / (1 - K)) × 100%
Y = ((1 - B/255 - K) / (1 - K)) × 100%

Note: Digital CMYK conversion provides a mathematical model. Physical printing reproduction depends on specific press profiles, paper stock absorption, and ink pigment gamuts (such as SWOP, GRACoL, or FOGRA39).

5. WCAG 2.1 Relative Luminance & Contrast Evaluation

Contrast ratios are evaluated according to the W3C Web Content Accessibility Guidelines (WCAG 2.1 Success Criterion 1.4.3 & 1.4.6).

A. Linear Gamma Expansion (R_linear, G_linear, B_linear)

To calculate luminance, sRGB values (0–255) are normalized to 0.0–1.0 and de-gamma corrected:

c = channel / 255
if c <= 0.04045: c_linear = c / 12.92
else: c_linear = ((c + 0.055) / 1.055) ^ 2.4

B. Relative Luminance ($L$)

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

C. Contrast Ratio Formula

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
// Where L1 is the lighter color luminance and L2 is the darker

D. WCAG 2.1 Conformance Thresholds

Level AA Standard
• Normal Text (< 18pt / 14pt bold): ≥ 4.5:1
• Large Text (≥ 18pt or 14pt bold): ≥ 3.0:1
Level AAA Enhanced
• Normal Text (< 18pt / 14pt bold): ≥ 7.0:1
• Large Text (≥ 18pt or 14pt bold): ≥ 4.5:1

6. Perceptual Uniformity: OKLab & OKLCH

OKLab is a perceptually uniform color space designed by Björn Ottosson (2020) that models human color perception. OKLCH translates OKLab coordinates into intuitive cylindrical components (Lightness, Chroma, Hue angle).

Linear sRGB is transformed into cone responses (LMS space) using the forward matrix, processed via cubic non-linearity (cubic root x^(1/3)), and mapped onto the orthogonal L, a, b axes.

7. Standardized Color Naming Hierarchy

To maintain consistency across Color-Pickers.com, color names are resolved through a centralized classification rule:

  1. Official CSS Color Name: Used exclusively when a HEX code exactly matches one of the 148 W3C CSS Color Module Level 4 standardized color keywords (e.g. #FF0000 is "Red", #0000FF is "Blue").
  2. Approximate Color Name: When a color does not match an exact official W3C CSS keyword, the resolver computes Euclidean distance across RGB color space to return the closest named shade, explicitly designated as an approximate descriptor.
Test in WCAG Contrast Checker →About Color Pickers →