Color difference
Measure whether two colors are meaningfully different.
Compare two colors with Delta E 76, scaled OKLab distance, contrast, and a split preview, then copy a review-ready report for design and production QA.
Free color utility
Delta E
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #4169E1 compared with #426AE2
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Distance
Delta E 76 color-difference screening
Instructions
- Enter the source color and the candidate color you want to compare.
- Choose the comparison focus and tolerance target that match the review.
- Use the specimen, metric cards, and contrast notes to decide whether the colors are close enough or intentionally distinct.
- Copy the report for palette QA, brand review, accessibility notes, or design-system migration work.
Results
Metrics and checks
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Delta E.
Methodology pages
Related guides
How it fits
From color comparison to QA decision.
Combine perceptual distance, contrast context, and a visual split preview so a color change can become a documented review decision.
Compare distance signals
Use Delta E 76 and scaled OKLab distance together to judge near matches, intentional separation, and possible palette duplication.
Separate distance from contrast
A perceptual difference score is not a readability result, so review the contrast ratio separately when the colors may form a foreground and background.
Free sharing
Color comparisons can be bookmarked and shared without an account, making results easy to revisit.
Quick overview
Hue Codex Color Difference Calculator is a free browser-based tool that compares two concrete CSS colors using Delta E 76 Lab distance, OKLab distance scaled by 100, contrast ratio, and readability context. It accepts alpha-capable HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() values, fixed color names, and transparent. Alpha is preserved in previews but excluded from Delta E, so transparent contrast still needs a defined backdrop.
- 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 concrete CSS colors and shows several signals at once: Delta E 76, OKLab distance, contrast ratio, and readability context. A split preview preserves source alpha and 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 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 normal text, AA normal text, AA large text, 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.
Palette cleanup
Find near-duplicate colors in a palette and decide whether both swatches need to exist.
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 color 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. For alpha colors, define the real backdrop before treating contrast as a rendered result.
- 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 concrete CSS colors with Delta E 76, OKLab distance, contrast ratio, and readability context.
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 two concrete CSS colors, including alpha-capable HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() values, fixed color names, or transparent, to compare their Lab distance, OKLab distance, base-channel contrast context, 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.