Free browser color tool
Delta E color difference calculator
Enter two HEX colors to calculate their CIEDE2000 Delta E value, compare the swatches side by side, and see how hue, saturation, and brightness changed. The calculation updates in your browser and requires no account.
Updated July 17, 2026
How the CIEDE2000 calculation works
A HEX code describes red, green, and blue values for a display, but equal numerical RGB changes do not always look equally large. CIEDE2000 starts from CIELAB values, where the axes are designed to relate more closely to human color perception. It then adjusts the comparison for lightness, chroma, and hue behavior. Those corrections make the formula more useful than a simple distance between RGB triplets when the question is how different two displayed color samples may appear.
The calculator parses each valid HEX value, converts it through the color library used by Toon Tone, and evaluates the pair with the CIEDE2000 difference function. The result is symmetric: swapping Color A and Color B does not change Delta E. The HSB panel is separate diagnostic context. It shows familiar editing dimensions, but it is not added to or substituted for the CIEDE2000 score. That separation helps you understand both the perceptual result and the likely direction of an edit.
Why a lower Delta E usually means a closer match
A value of zero means the two parsed samples are the same color in the calculation. As the value increases, the modeled perceptual separation grows. That simple direction is dependable, while the exact point at which a person notices or accepts the difference is contextual. A designer comparing two interface tokens on one calibrated monitor has a different problem from a printer checking ink on textured stock or a player trying to remember a cartoon character from an uncalibrated phone.
For that reason, use Delta E as a measurement that supports a decision, not as the decision itself. Compare the swatches at the size and background in which they will appear. Record the formula name, because Delta E 76, Delta E 94, and CIEDE2000 can return different numbers for the same pair. If a contract, laboratory process, brand standard, or production specification defines a tolerance, follow that specification instead of importing a generic threshold from this page.
Use the HSB differences to diagnose the edit
Hue identifies the position around the color wheel, saturation describes intensity, and brightness describes how light or dark the displayed color is. Two samples can have a modest Delta E for very different reasons. One pair may differ mainly in brightness; another may cross a hue boundary while keeping similar saturation. The absolute HSB differences expose that direction quickly. Hue uses the shortest circular distance, so a move from 359 degrees to 1 degree is two degrees rather than an apparent 358-degree jump.
The HSB figures are especially useful when adjusting a design token or practicing color memory. If hue is close but brightness is high, preserve the color family and correct the value channel first. If brightness and saturation are close while hue drifts, move around the wheel without changing the other sliders. HSB is not perceptually uniform, so equal HSB changes can still produce unequal Delta E results. Treat the channel deltas as editing clues and the CIEDE2000 value as the modeled comparison.
Display, lighting, and surrounding colors still matter
A browser tool cannot control the display that presents the swatches. Monitor calibration, color profile handling, brightness, viewing angle, ambient light, and even a tinted screen protector can change appearance. Surrounding colors also influence perception: the same gray can seem warmer beside blue and cooler beside orange. The preview uses a neutral split panel to make comparison convenient, but it cannot reproduce every surface, print process, device, animation frame, or user environment in which the colors might be used.
For screen design, test the real component on representative devices and in both light and dark themes. For print or physical products, compare controlled samples under the lighting and measurement process required by that workflow. Save the original HEX values and the formula version so a teammate can reproduce the calculation. When a decision has financial, safety, brand, or manufacturing consequences, rely on calibrated instruments and the governing tolerance rather than a screenshot or an uncalibrated browser preview.
Delta E is not a contrast-ratio test
Delta E asks how different two colors are under a perceptual difference model. A contrast ratio asks about relative luminance between foreground and background, usually to evaluate whether text or interface content has sufficient visual separation under an accessibility standard. Two colors can have a noticeable hue difference and still provide poor text contrast. Conversely, two neutral colors can have useful luminance contrast even though their hue difference is minimal. One metric cannot replace the other.
If you are choosing text, icons, focus indicators, or controls, run the required accessibility contrast test in addition to examining color difference. Do not use the Delta E number on this page to claim WCAG conformance. Delta E can still help compare brand tokens, detect an unintended palette change, or quantify how far a remembered shade moved. The correct workflow names the decision first, then chooses the metric that measures that decision instead of applying one appealing number to every color question.
Useful workflows for designers, developers, and players
Designers can compare an approved token with a proposed replacement, document the result, and inspect whether the adjustment came from hue, saturation, or brightness. Developers can use the tool while reviewing CSS variables, theme migrations, screenshots, or palette refactors. Content teams can compare two campaign swatches before sending a question to a brand owner. In each case, paste exact source values rather than sampling compressed images when the original tokens are available, because image processing can introduce a different color before the comparison begins.
Toon Tone players can also compare a remembered character shade with the revealed target. The Delta E result explains overall closeness while the HSB differences identify the slider that drifted. A productive practice loop records one recurring bias, such as guessing colors too bright, and tests that correction in the next round. The calculator does not create a universal memory score and it does not replace the game score; it provides a transparent pairwise measurement that makes the reveal easier to study.