Palette cleanup
Find near-duplicate colors in a palette and decide whether both swatches need to exist.
Color difference
Free color difference calculator for practical color QA.
Compare two HEX colors with Delta E 76, OKLab distance, contrast ratio, and readability context. Hue Codex shows a split preview, lets you swap the colors, and exports a copy-ready difference report for design QA, palette review, and color-system documentation.
Free color utility
Delta E
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Distance
Compare two colors
Instructions
- Enter the two colors you want to compare.
- Use Swap to reverse Color A and Color B without retyping values.
- Review the split preview and distance metrics to understand how similar or different the colors are.
- Copy the difference report for palette QA, accessibility review, or design-system documentation.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Color Difference Calculator is a free browser-based tool that compares two HEX colors using Delta E 76 Lab distance, OKLab distance scaled by 100, contrast ratio, and a WCAG-style readability badge. It is useful for color QA, palette review, near-match checks, and documenting how far apart two colors are.
- Use it to compare two colors numerically and visually from one screen.
- Delta E 76 is a simple Euclidean distance in CIE Lab, useful as a clear difference signal.
- OKLab distance provides a modern perceptual distance signal based on OKLab coordinates.
- Contrast ratio and readability context show whether the two colors can function as a foreground/background pair.
- This tool reports Delta E 76, not CIEDE2000, so use it as a practical signal rather than a full industrial tolerance system.
What the Hue Codex color difference calculator does
The Hue Codex color difference calculator compares two HEX colors and shows several signals at once: Delta E 76, OKLab distance, contrast ratio, and a readability badge. A split preview makes the visual comparison easy to scan while the report gives copy-ready numbers for documentation.
This is useful when colors look close, when a palette has near-duplicates, when a brand color changed, or when a team needs to document whether two swatches are meaningfully different.
Color difference definition
Color difference is a numeric estimate of how far apart two colors are. Different formulas use different color spaces, so the number is a signal for comparison rather than a universal truth about visual perception.
Difference metrics shown by Hue Codex
Hue Codex combines perceptual distance signals with contrast context. The distance numbers help compare color similarity; the contrast ratio helps decide whether the two colors can function as a readable pair.
| Metric | What it measures | How to use it |
|---|---|---|
| Delta E 76 | Euclidean distance between the two colors in CIE Lab. | A simple, familiar color-difference signal for quick QA and near-match checks. |
| OKLab distance | Euclidean distance between the two colors in OKLab, scaled by 100 for readability. | A modern perceptual distance signal that can be useful for UI and palette comparisons. |
| Contrast ratio | WCAG-style luminance contrast between the two colors. | Shows whether the pair has foreground/background readability potential. |
| Readability badge | A pass-style label based on the contrast score. | Quickly distinguishes AAA, AA, Large AA, and needs-work contrast outcomes. |
Best uses for color difference checks
Color difference checks are most useful when visual judgment alone is not enough. The numbers help make design review, palette QA, and color handoff more explicit.
Brand color QA
Compare a candidate brand color against an approved color before updating documentation or color roles.
Project review
Check whether a coded color matches the intended design color closely enough for the project.
Accessibility context
Review contrast ratio when the two colors might be used as foreground and background.
A practical comparison workflow
Start by comparing the two exact HEX values in question. If the colors are meant to match, look for small distance values. If the colors need to be distinct, use the distance values along with visual review and contrast context.
- Enter Color A and Color B.
- Review the split preview for a quick visual check.
- Use Delta E 76 and OKLab distance as similarity signals.
- Use contrast ratio when the colors may be paired as text and background.
- Copy the difference report for review notes, design reviews, or color-role documentation.
Delta E and production caveats
Hue Codex reports Delta E 76, which is the original Euclidean distance formula in CIE Lab. It is easy to understand and useful for quick comparisons, but it is less perceptually refined than formulas such as CIE94 or CIEDE2000.
Color difference numbers are also context-sensitive. Surrounding colors, display calibration, viewing conditions, transparency, gradients, texture, and print processes can all change how different two colors feel.
Use the calculator as a practical QA signal. For strict industrial color tolerance, use the formula, illuminant, observer, device profile, and measurement workflow required by that production process.
Quick answers
Delta E FAQ
What is the Hue Codex color difference calculator?
The Hue Codex color difference calculator is a free online tool that compares two HEX colors with Delta E 76, OKLab distance, contrast ratio, and a readability badge.
What is Delta E 76?
Delta E 76 is the Euclidean distance between two colors in CIE Lab. It is a simple color-difference formula where lower values mean closer colors.
Does this calculator use CIEDE2000?
No. The current calculator reports Delta E 76 and OKLab distance, not CIEDE2000.
What is OKLab distance?
OKLab distance is a distance signal based on the OKLab color space. Hue Codex scales the OKLab distance by 100 so the result is easier to read beside Delta E 76.
Can I compare two brand colors?
Yes. Enter the two HEX values to compare their Lab distance, OKLab distance, contrast ratio, and visual split preview.
Does color difference measure accessibility?
No. Color difference measures how far apart colors are. Accessibility for text depends on foreground/background contrast, text size, and context.
Why does the calculator show contrast ratio?
Contrast ratio helps you understand whether the two colors can work as a readable foreground/background pair, which is different from measuring perceptual distance.
Can I copy the difference report?
Yes. Hue Codex provides a copy-ready report with Color A, Color B, Delta E 76, OKLab distance, and contrast ratio.