Menu

Β·14 min read

The Math Behind Colors: From RGB to Delta E

Behind every color picker, every accessibility checker, and every "do these colors match?" question lies mathematics. This guide walks through the essential formulas that power digital color β€” with real calculations you can follow along with.

1. RGB to HSL Conversion

RGB (Red, Green, Blue) describes color as the amount of each primary light, while HSL (Hue, Saturation, Lightness) describes color in terms humans find more intuitive. Converting between them is one of the most common operations in color software. The algorithm was formalized by Alvy Ray Smith (co-founder of Pixar) in 1978.

Step 1: Normalize RGB values to [0, 1]

R' = R / 255

G' = G / 255

B' = B / 255

Step 2: Find the min and max of (R', G', B')

Cmax = max(R', G', B')

Cmin = min(R', G', B')

Ξ” = Cmax βˆ’ Cmin

Step 3: Calculate Lightness

L = (Cmax + Cmin) / 2

Step 4: Calculate Saturation

If Ξ” = 0: S = 0

Otherwise: S = Ξ” / (1 βˆ’ |2L βˆ’ 1|)

Step 5: Calculate Hue (in degrees)

If Ξ” = 0: H = 0

If Cmax = R': H = 60 Γ— ((G' βˆ’ B') / Ξ” mod 6)

If Cmax = G': H = 60 Γ— ((B' βˆ’ R') / Ξ” + 2)

If Cmax = B': H = 60 Γ— ((R' βˆ’ G') / Ξ” + 4)

Worked example: Let's convert #E74C3C (R=231, G=76, B=60):

R' = 231/255 = 0.906, G' = 76/255 = 0.298, B' = 60/255 = 0.235

Cmax = 0.906, Cmin = 0.235, Ξ” = 0.671

L = (0.906 + 0.235) / 2 = 0.571 = 57.1%

S = 0.671 / (1 βˆ’ |2(0.571) βˆ’ 1|) = 0.671 / 0.858 = 0.782 = 78.2%

H = 60 Γ— ((0.298 βˆ’ 0.235) / 0.671 mod 6) = 60 Γ— 0.094 = 5.6Β°

Result: hsl(6Β°, 78%, 57%)

You can verify this instantly with our Color Converter tool.

2. Relative Luminance

Relative luminance measures the perceived brightness of a color, accounting for human vision's different sensitivity to red, green, and blue. It is defined by the W3C based on the ITU-R BT.709 standard (the same standard used for HDTV):

L = 0.2126 Γ— R + 0.7152 Γ— G + 0.0722 Γ— B

But there is a catch β€” you cannot just plug in your 0–255 RGB values. First, you must apply inverse gamma correction (linearization). sRGB values are gamma-encoded to match the non-linear response of CRT monitors (a legacy from the 1990s that persists today):

For each channel c (R, G, B), where c_sRGB = channel / 255:

If c_sRGB ≀ 0.04045:

c_linear = c_sRGB / 12.92

Else:

c_linear = ((c_sRGB + 0.055) / 1.055) ^ 2.4

Why those specific coefficients (0.2126, 0.7152, 0.0722)? They reflect the spectral sensitivity of the human eye. We are most sensitive to green light, moderately sensitive to red, and least sensitive to blue. The coefficients come from the CIE 1931 standard observer and were formalized for digital use in the BT.709 specification.

Worked example: Relative luminance of #3498DB (R=52, G=152, B=219):

R_sRGB = 52/255 = 0.204 β†’ R_lin = ((0.204 + 0.055)/1.055)^2.4 = 0.034

G_sRGB = 152/255 = 0.596 β†’ G_lin = ((0.596 + 0.055)/1.055)^2.4 = 0.318

B_sRGB = 219/255 = 0.859 β†’ B_lin = ((0.859 + 0.055)/1.055)^2.4 = 0.708

L = 0.2126(0.034) + 0.7152(0.318) + 0.0722(0.708)

L = 0.007 + 0.227 + 0.051 = 0.285

3. WCAG Contrast Ratio

The Web Content Accessibility Guidelines (WCAG 2.1) define contrast ratio as the measure of readability between foreground and background colors. This formula, rooted in the work of the W3C Web Accessibility Initiative, determines whether text is accessible to people with visual impairments:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where:

L1 = relative luminance of the lighter color

L2 = relative luminance of the darker color

0.05 accounts for ambient light reflectance

The WCAG thresholds are:

  • AA Normal text: β‰₯ 4.5:1
  • AA Large text (18px+ bold or 24px+): β‰₯ 3:1
  • AAA Normal text: β‰₯ 7:1
  • AAA Large text: β‰₯ 4.5:1

Worked example: White text (#FFFFFF) on #3498DB background:

L_white = 1.000 (maximum)

L_blue = 0.285 (calculated above)

Contrast = (1.000 + 0.05) / (0.285 + 0.05)

Contrast = 1.05 / 0.335 = 3.13:1

Result: FAILS AA for normal text (needs 4.5:1)

PASSES AA for large text (needs 3:1)

This is a common accessibility mistake β€” bright blues that look fine to most people but fail contrast requirements. Our Color Wheel lets you check contrast ratios when building palettes.

4. CIE Delta E: Measuring Color Difference

When you need to answer "how different are these two colors?", RGB Euclidean distance is unreliable because RGB is not perceptually uniform. A 10-unit difference in the green channel looks much bigger than a 10-unit difference in the blue channel. This is why the CIE (Commission Internationale de l'Γ‰clairage) developed the Delta E metric in the L*a*b* color space.

CIE76 Delta E (the simplest version, introduced in 1976):

Ξ”E*ab = √[(L*₁ βˆ’ L*β‚‚)Β² + (a*₁ βˆ’ a*β‚‚)Β² + (b*₁ βˆ’ b*β‚‚)Β²]

The interpretation thresholds (based on Mahy et al., 1994):

Ξ”E < 1.0: Not perceptible by human eye

Ξ”E 1–2: Perceptible through close observation

Ξ”E 2–10: Perceptible at a glance

Ξ”E 11–49: Colors are more similar than different

Ξ”E 50–100: Colors are completely different

The CIE76 formula has known issues β€” it overweights chroma differences in saturated blues and underweights them in low-chroma regions. This led to improved versions:

  • CIE94 (1994) β€” adds weighting factors for lightness, chroma, and hue
  • CIEDE2000 β€” the current gold standard, with corrections for hue rotation in the blue region and a 5-term formula. Developed by Gaurav Sharma, Wencheng Wu, and Edul Dalal (published in Color Research and Application, 2005)

CIEDE2000 (simplified structure):

Ξ”Eβ‚€β‚€ = √[(Ξ”L'/k_L S_L)Β² + (Ξ”C'/k_C S_C)Β² + (Ξ”H'/k_H S_H)Β² + R_T(Ξ”C'/k_C S_C)(Ξ”H'/k_H S_H)]

5. Color Mixing: Additive vs. Subtractive

The mathematics of color mixing differs fundamentally depending on whether you are mixing light (additive) or pigment (subtractive). James Clerk Maxwell demonstrated additive mixing in his 1861 color photography experiment, while the subtractive model was formalized by Hermann von Helmholtz.

Additive mixing (screens, projectors):

Result_R = min(255, R1 + R2)

Result_G = min(255, G1 + G2)

Result_B = min(255, B1 + B2)

Red light + Green light = Yellow light

Red light + Blue light = Magenta light

All three at full = White light

Alpha compositing (Porter-Duff, 1984): When blending semi-transparent colors on screen, the formula used is:

C_out = (C_fg Γ— Ξ±_fg + C_bg Γ— Ξ±_bg Γ— (1 βˆ’ Ξ±_fg)) / Ξ±_out

Ξ±_out = Ξ±_fg + Ξ±_bg Γ— (1 βˆ’ Ξ±_fg)

Thomas Porter and Tom Duff developed this at Lucasfilm in 1984. Their paper "Compositing Digital Images" is one of the most cited works in computer graphics.

6. Hex to RGB (and Back)

Hex color codes are simply RGB values written in base-16 (hexadecimal) notation. The conversion is straightforward:

#3498DB β†’ R = 0x34 = 52, G = 0x98 = 152, B = 0xDB = 219

General formula (hex to decimal for each pair):

value = (first_digit Γ— 16) + second_digit

Reverse (decimal to hex):

first_digit = value &div; 16 (integer division)

second_digit = value mod 16

Why This Math Matters

These formulas are not academic abstractions. They are running right now in your browser, in every design tool, and in every accessibility checker. When you use our Color Converter to switch between formats, these exact calculations happen under the hood. When a Color Wheel generates harmonious palettes, it is using hue rotation in HSL space. When an accessibility tool flags a contrast issue, it is applying the WCAG luminance and contrast formulas above.

Understanding the math gives you power. You stop being a passive user of tools and start understanding why colors behave the way they do. You can predict when a color conversion will cause unexpected shifts, debug accessibility failures, and make informed decisions about which color space to use for a given task. Browse our curated palettes to see these mathematical relationships at work in beautiful, real-world color combinations.

Sources & References

This article is based on research from leading color authorities: