Methodology
Color difference: Delta E and OKLab distance
Color difference scores help compare two color values, deduplicate extracted palettes, and evaluate whether simulated, processed, or repaired colors remain distinct. They are not accessibility scores.
Short answer
Hue Codex calculates Delta E 76 as Euclidean distance in D50-adapted CIE Lab and OKLab distance as Euclidean distance in D65 OKLab scaled by 100. Color Picker Repair 2.0 uses that scaled OKLab distance as its minimal-change objective across a bounded set of serialized sRGB candidates; it does not claim a globally nearest perceptual solution.
- Delta E 76 is simple, symmetric, and easy to explain, but less perceptually uniform than newer tolerance formulas.
- Lab distance uses D50-adapted CIE Lab coordinates; OKLab distance uses D65 OKLab coordinates.
- CSS Color 4 identifies Delta E 2000 as the current industry-standard formula for mitigating some Lab/LCH perceptual issues; use Delta E 2000 for color-critical tolerance work.
- OKLab distance is reported as sqrt(delta_L^2 + delta_a^2 + delta_b^2) * 100, using OKLab component differences.
- Color Picker Repair 2.0 uses scaled OKLab distance for its minimal-change objective, excludes unchanged alpha from the distance, and applies deterministic tie-breakers after exact serialized sRGB contrast checks.
- Interpretation band labels such as "practically identical," "tiny visible shift," and "strongly separated" are Hue Codex heuristics, not universal standards.
- Contrast ratio and color difference answer different questions and should not be substituted for each other.
- Color Difference compares the resolved sRGB colors used by the tool. If a wider-gamut or perceptual source was clipped into an sRGB fallback before comparison, the score describes the fallback colors, not the full authored source colors.
- Image extraction and color-vision simulation use Delta E style distance for closeness and risk ranking.
Standards status
These badges identify which parts of this methodology are standards-backed, draft-track, source-origin references, Hue Codex-specific, approximate, or dependent on browser behavior.
Formulas, choices, heuristics, and limits
This separates standards-based formulas from Hue Codex implementation decisions, product heuristics, and known limitations for this methodology.
Standards-based formulas
Formula, threshold, syntax, or data behavior taken from a cited standard. Primary and model sources can inform implementation, but they are not automatically standards.
- Delta E 76 is calculated as Euclidean distance in CIE Lab.
- CIE Lab comparisons use D50-adapted Lab coordinates, consistent with the Color Conversion methodology and CSS Color 4 Lab/LCH behavior.
- OKLab comparisons use D65 OKLab coordinates, consistent with the Color Conversion methodology and CSS Color 4 OKLab/OKLCH behavior.
Implementation choices
How Hue Codex chooses to parse, normalize, round, export, or sequence calculations.
- Hue Codex normalizes both colors to sRGB HEX before converting and comparing them.
- Hue Codex reports Delta E 76 instead of Delta E 2000 because the current tool prioritizes transparent, reproducible comparison signals over color-critical tolerance matching.
- OKLab distance is calculated as sqrt(delta_L^2 + delta_a^2 + delta_b^2) * 100, where the deltas are differences between OKLab components.
- Comparison results are reported separately from contrast because they answer different questions.
- Color Picker Repair Methodology 2.0 uses the same scaled OKLab distance for its minimal-change objective after the authored color has been resolved to sRGB; unchanged alpha is excluded from that distance.
Hue Codex heuristics
Product rankings, bands, labels, suggestions, or role hints that are useful guidance but not external standards.
- Color-difference interpretation bands are Hue Codex labels, not universal pass/fail standards.
- Near-duplicate filtering and extracted-palette diversity ranking use distance as a product heuristic.
- Repair 2.0 orders bounded, serialized candidate colors with explicit objective-specific tie-breakers; this is a reproducible product heuristic, not a claim of a globally nearest perceptual solution.
Known limitations
Caveats, edge cases, browser dependencies, approximations, or contexts the method does not prove.
- Delta E 76 is simple and explainable but not uniformly perceptual in every color region.
- Delta E 2000 is more suitable for color-critical tolerance work, but Hue Codex does not currently calculate it.
- Euclidean OKLab distance is a useful engineering approximation, not a complete visual-difference model for every color, viewing condition, or translucent rendering.
- A high color-difference score does not mean text is readable.
- Viewing conditions, display calibration, materials, and adaptation can change perceived difference.
Representative automated fixture coverage
Hue Codex imports versioned JSON fixtures and tests the corresponding pure production functions directly. The groups below are the representative regression evidence most relevant to this methodology.
- Parsing fixtures: Accepted CSS color syntax, alpha behavior, clamping, invalid input, and out-of-gamut fallback cases. View the JSON fixtures.
- Conversion fixtures: sRGB, XYZ, Lab/LCH, OKLab/OKLCH conversion values, round trips, and precision boundaries. View the JSON fixtures.
What a pass means. A passing group confirms the named vectors and tested properties still match the documented implementation. It does not prove every possible input, final browser rendering, full accessibility conformance, profile-aware print output, or every downstream export consumer.
Inputs and conversion
Hue Codex normalizes both colors to sRGB HEX, converts them to Lab and OKLab, then compares component differences. The same conversion engine used by color conversion tools is used here.
The Lab path follows the same D50-adapted Lab convention documented in the Color Conversion methodology: sRGB is linearized, converted to XYZ D65, chromatically adapted to D50, then converted to CIE Lab. The OKLab path follows the D65 OKLab convention: sRGB is linearized, converted to XYZ D65, then converted directly to OKLab.
Color Difference compares the resolved sRGB colors used by the tool. If a wider-gamut or perceptual source was clipped into an sRGB fallback before comparison, the score describes the fallback colors, not the full authored source colors. This is especially important for high-chroma OKLCH colors.
The comparison is symmetric: color A compared to color B produces the same distance as color B compared to color A.
Authored color caveat. Use Color Conversion when the distinction between an authored Lab/OKLCH/P3/Rec. 2020 value and its resolved HEX fallback matters; this page compares the resolved sRGB colors that reach the calculator, not any clipped chroma or hue detail from the authored source.
Delta E 76 and OKLab distance
Delta E 76 is the Euclidean distance between D50-adapted CIE Lab coordinates: the square root of the sum of squared differences in L, a, and b.
OKLab distance uses the same Euclidean idea on D65 OKLab components and scales the result by 100 to make values easier to read next to Delta E bands. The exact formula used by the Color Difference Calculator is sqrt(delta_L^2 + delta_a^2 + delta_b^2) * 100.
oklab_distance_x100(oklab_a, oklab_b):
delta_L = oklab_a.L - oklab_b.L
delta_a = oklab_a.a - oklab_b.a
delta_b = oklab_a.b - oklab_b.b
return sqrt(delta_L^2 + delta_a^2 + delta_b^2) * 100Why Delta E 76, not Delta E 2000?
CSS Color 4 describes Delta E 2000 as the current industry-standard formula for mitigating some known Lab and LCH perceptual problems, and as an improvement over Delta E 76 and Delta E 94. Hue Codex cites that context, but the current Color Difference tool does not calculate Delta E 2000.
Hue Codex uses Delta E 76 because this page and the related tools need a transparent, symmetric, easy-to-audit distance signal for quick comparison, palette deduplication, image-palette diversity, and heuristic review bands. The formula is short enough to reproduce directly from Lab coordinates and to validate with simple test vectors.
That choice is an implementation choice, not a standards claim that Delta E 76 is more perceptually accurate. For press proofs, fabric, paint, product tolerances, brand acceptance criteria, or contractual color matching, use a profile-aware workflow and a validated Delta E 2000 implementation with documented viewing conditions and tolerances.
Delta E 2000 is a candidate future companion output for Hue Codex, especially for users who want a more industry-recognized tolerance signal beside Delta E 76 and OKLab distance. It is not shown yet because adding it responsibly requires implementation tests, reproducible vectors, precision rules, source labeling, and UI copy that keeps Delta E 2000 separate from the existing Hue Codex heuristic interpretation bands.
Implementation choice. Hue Codex color-difference bands are product heuristics built on Delta E 76; they are not color-critical acceptance tolerances.
Future consideration. Delta E 2000 may be added later as an additional output, but it is not currently calculated or exported by Hue Codex.
Interpretation bands
These band labels are Hue Codex heuristics for quick review, not standards-defined pass/fail thresholds. Labels such as "practically identical," "tiny visible shift," and "strongly separated" are context-dependent and can shift with color size, adjacency, lighting, display calibration, material, texture, and task tolerance.
Hue Codex heuristic. Use the bands as review guidance, not as universal perceptual truth or accessibility compliance evidence.
| Delta E 76 range | Label |
|---|---|
| 0 to 1 | Practically identical |
| Greater than 1 to 2.3 | Tiny visible shift |
| Greater than 2.3 to 10 | Close visible variant |
| Greater than 10 to 20 | Clearly different |
| Greater than 20 to 35 | Distinct palette color |
| Greater than 35 | Strongly separated |
Relationship to Color Picker Repair 2.0
Color Picker Repair 2.0 resolves the selected color to sRGB, preserves its alpha, and searches a bounded deterministic set of sRGB candidates. The Minimal perceptual change strategy first ranks valid candidates by the same scaled Euclidean OKLab distance documented above.
Preserve hue and Preserve chroma use different primary objectives. Every strategy then applies declared tie-breakers and rechecks the exact serialized HEX candidate against every selected light or dark context using raw, unrounded contrast ratios.
The unchanged alpha channel is excluded from the OKLab distance. CIE76 is retained in the result as a reference measurement, but it is not the Repair 2.0 minimal-change optimizer.
This search is reproducible but bounded. It is not a mathematical proof of the globally nearest valid color, and an interior shared solution can be missed in a mixed-context case when neither endpoint seed passes every context.
Scoped result. A small OKLab repair distance describes the selected serialized color change only. It does not prove component accessibility or complete WCAG conformance.
Limits
- Delta E 76 does not model every perceptual condition equally well.
- Hue Codex does not currently report Delta E 2000, so its scores should not be used as final acceptance tolerances for color-critical production.
- A high color-difference score does not mean text is readable.
- A low score can still matter if the colors have different semantic roles or are used in small UI details.
- A low score between two clamped HEX fallbacks does not prove two out-of-gamut authored colors, especially high-chroma OKLCH colors, were originally close.
- Display calibration, viewing conditions, materials, and adaptation can change perceived difference.
Test vectors and validation checks
These vectors make the visible page checks reproducible. Delta E 76 and OKLab distance validate the mathematical paths, while contrast remains a separate WCAG-style output.
Expected values are raw calculation outputs from the Hue Codex color engine. The interactive tool may round values in compact UI cards and exports.
| Input | Expected output | Notes |
|---|---|---|
| #FFFFFF vs #FFFFFF | Delta E 76 = 0; OKLab distance x100 = 0; contrast = 1 | Identical colors produce zero distance. Contrast is still shown separately and does not become a distance value. |
| #4169E1 vs #426AE2 and #426AE2 vs #4169E1 | Both directions return Delta E 76 = 0.40135924369994574 and OKLab distance x100 = 0.31669742682101304 | Distance is symmetric: A vs B equals B vs A. |
| #000000 vs #FFFFFF | Delta E 76 = 100; OKLab distance x100 = 100.00000000000003; contrast = 21 | Large color distance and high contrast are reported as separate signals. |
| #4169E1 vs #426AE2 compared with #FF0000 vs #00FF00 | 0.40135924369994574 Delta E 76 ranks closer than 163.9260164011685 Delta E 76 | Near-duplicate extracted swatches rank closer than distinct palette colors. |
| #0EA5E9 vs #0284C7 | Delta E 76 = 12.973747509557434; OKLab distance x100 = 9.817534137430025 | Related blue scale colors produce a moderate distance. |
| #FB923C vs #F97316 | Delta E 76 = 16.758103787018037; OKLab distance x100 = 6.463339256671576 | Related orange scale colors show that Delta E 76 and OKLab distance can differ in magnitude. |
| #111827 vs #1F2937 | Delta E 76 = 8.23885307364328; OKLab distance x100 = 6.815634703679356 | Dark neutral step used to check low-lightness behavior. |
| #06D6A0 vs #118AB2 | Delta E 76 = 60.898725034841895; OKLab distance x100 = 23.493609621408453 | Distinct palette colors rank farther apart than near-duplicates. |
Color-difference equations
The formulas are standards-based or standards-derived color-space math. The interpretation bands remain Hue Codex heuristics.
Delta E 76 uses CIE Lab coordinates after adapting sRGB D65 XYZ to D50. OKLab distance uses OKLab coordinates in D65, without converting those OKLab coordinates to D50.
delta_e_76(hex_a, hex_b):
lab_a = rgb_to_lab(hex_to_rgb(hex_a))
lab_b = rgb_to_lab(hex_to_rgb(hex_b))
dL = lab_a.L - lab_b.L
da = lab_a.a - lab_b.a
db = lab_a.b - lab_b.b
return sqrt(dL*dL + da*da + db*db)
oklab_distance_x100(hex_a, hex_b):
ok_a = rgb_to_oklab(hex_to_rgb(hex_a))
ok_b = rgb_to_oklab(hex_to_rgb(hex_b))
dL = ok_a.L - ok_b.L
da = ok_a.a - ok_b.a
db = ok_a.b - ok_b.b
return sqrt(dL*dL + da*da + db*db) * 100
comparison rule:
report Delta E, OKLab distance, hue shift, lightness shift, and WCAG contrast separatelyReproducible test vectors
These vectors validate Delta E 76, the scaled OKLab distance, and the separation between color difference and WCAG contrast.
Expected values are raw calculation outputs from the Hue Codex color engine. Tool cards may round values for display.
| Input | Expected output | Notes |
|---|---|---|
| #FFFFFF vs #FFFFFF | Delta E 76 = 0; OKLab distance x100 = 0; contrast = 1 | Identical white colors return zero distance; contrast is still reported separately |
| #000000 vs #000000 | Delta E 76 = 0; OKLab distance x100 = 0; contrast = 1 | Identical colors |
| #000000 vs #FFFFFF | Delta E 76 = 100; OKLab distance x100 = 100.00000000000003; contrast = 21 | Floating point output may display OKLab distance as 100 after rounding |
| #4169E1 vs #426AE2 | Delta E 76 = 0.40135924369994574; OKLab distance x100 = 0.31669742682101304; contrast = 1.013575785094293 | Near-duplicate vector |
| #FF0000 vs #00FF00 | Delta E 76 = 163.9260164011685; OKLab distance x100 = 51.98129015519161; contrast = 2.9139375476009137 | Large color difference does not imply passing text contrast |
| #0EA5E9 vs #0284C7 | Delta E 76 = 12.973747509557434; OKLab distance x100 = 9.817534137430025 | Related blue scale colors |
| #FB923C vs #F97316 | Delta E 76 = 16.758103787018037; OKLab distance x100 = 6.463339256671576 | Related orange scale colors |
| #111827 vs #1F2937 | Delta E 76 = 8.23885307364328; OKLab distance x100 = 6.815634703679356 | Dark neutral step |
| #06D6A0 vs #118AB2 | Delta E 76 = 60.898725034841895; OKLab distance x100 = 23.493609621408453 | Distinct palette colors |
Sources and standards
These references anchor the public standards, model origins, source records, and formats used by Hue Codex. Status badges distinguish stable standards, drafts, primary sources, model sources, Hue Codex heuristics, approximations, and browser-dependent behavior.
Tools using this methodology
These Hue Codex tools link to this methodology because they depend on the formulas, assumptions, limits, or data policy described here.
Report a calculation issue
If a result does not match the documented formula or fixture, send the exact input, tool settings, displayed result, expected result, precision mode, and browser details. Please do not include private images, personal information, or secrets.