Compare Colors
Put two, three or four colors side by side with zero gap — the honest way to judge similar shades — and get ΔE2000 difference, WCAG contrast and matching HEX, RGB, HSL and OKLCH values for every adjacent pair.
Adjacent pairs
Formats
| Format | Color 1 | Color 2 |
|---|---|---|
| HEX | #3564c4 | #2f9e63 |
| RGB | rgb(53, 100, 196) | rgb(47, 158, 99) |
| HSL | hsl(220.3, 57.4%, 48.8%) | hsl(148.1, 54.1%, 40.2%) |
| OKLCH | oklch(52.33% 0.1589 262.61) | oklch(62.25% 0.1335 155.52) |
Why compare colors side by side at all?
Human color memory is astonishingly poor. We can distinguish millions of colors when they sit next to each other, but the moment one of them disappears — a browser tab closed, a paint chip flipped over — the comparison happens against a vague memory, and differences that would be obvious in direct view simply vanish. That is why every serious color decision, from brand palettes to wall paint, is made with the candidates physically adjacent: the eye is a superb difference detector and a terrible absolute meter. This tool gives you that adjacency on screen — up to four colors as touching panes, plus the numbers to back up (or overrule) your impression.
Simultaneous contrast: colors change with their neighbors
A color is never perceived on its own. The visual system constantly normalizes against the surroundings, so the identical pixel value looks darker next to white, lighter next to black, warmer next to a cool neighbor and duller next to a vivid one. This effect — simultaneous contrast — is not an illusion you can learn to switch off; it is how vision works.
Two practical consequences. First, the gap between swatches matters: separated by page background, two similar colors are each judged against that background, and their mutual difference is masked. Set the gap slider to 0 and the colors form a shared edge — the condition where the eye’s difference detection is sharpest, and the honest preview of how the colors will interact in a layout where they actually touch. Second, the surround matters: the optional mid-gray frame (a neutral, roughly 50% gray) is the standard viewing surround used in color proofing, chosen because it pushes perception in no particular direction. Toggle it on for a fair judgment, off to see the colors against the page as-is.
Reading the ΔE number
ΔE (“delta E”) is the distance between two colors in a perceptually organized color space — a model of how different they look, not how far apart their code values are. This page uses CIEDE2000, the current CIE recommendation, which fixes the older 1976 formula’s well-known exaggerations in blues and near-grays. The scale is open-ended, but in practice:
| ΔE2000 | What it means |
|---|---|
| < 1 | Not perceptible to the human eye |
| 1 – 2 | Perceptible only on close inspection |
| 2 – 10 | Perceptible at a glance |
| 10 – 49 | Clearly different colors |
| 49 + | Opposite or near-opposite colors |
Two rules of thumb. A ΔE below 1 means arguing about the values is pointless — no viewer will ever see the difference. And a ΔE around 2 is the classic tolerance line in print and manufacturing: visible in a direct side-by-side check like this one, invisible in the wild.
The contrast ratio next to it
Each adjacent pair also shows its WCAG 2.x contrast ratio, because ΔE and contrast answer different questions: ΔE asks “do these look like different colors?”, contrast asks “could one serve as text on the other?”. Two saturated colors can be wildly different in hue — a huge ΔE — yet nearly identical in lightness, giving a contrast ratio near 1:1 and unreadable text. If a pair here is destined to become foreground and background, take it to the dedicated contrast checker, which adds AA/AAA verdicts and one-click fix suggestions.
Screens, print and the real world
The comparison you see is exact in code terms — both panes are rendered from the very values shown in the table. What is not guaranteed is that your display shows those values the way another display will. Panel type, brightness, white point, night-mode filters and color management all shift the rendering, which is why the same two greens can be distinguishable on a desktop monitor and identical on a phone. The ΔE figure is computed from the color definitions themselves and is therefore stable across devices — trust it over any single screen. And for print or paint, remember that an sRGB value is only a rough stand-in for ink or pigment: use this tool to shortlist candidates, then confirm with physical proofs under the lighting where the result will live.
What people use this for
- Brand shade decisions — hold the current brand blue against two proposed refreshes; the pairwise ΔE quantifies how big a jump each option really is.
- Paint candidates — line up chips before buying samples; the zero-gap edge reveals undertone differences that store lighting hides.
- Palette dedup — palettes grown over years accumulate near-duplicates; any adjacent pair under ΔE 2 is a merge candidate.
- Design-system reviews — check that “hover” and “default” variants differ enough to be noticed while still reading as one family.
Everything here runs 100% in your browser — the colors you compare never leave your machine. To pull comparison candidates straight out of a screenshot or product photo, start with the image color picker on the home page; to turn a chosen pair into accessible text on a background, continue in the contrast checker.
Frequently asked questions
What is Delta E (ΔE)?
Delta E measures how different two colors look to a human observer, not how different their code values are. 0 means identical; below about 1 the difference is invisible, around 2 it shows only in a direct side-by-side check, and above 10 the colors read as clearly different.
Which Delta E formula does this tool use?
CIEDE2000, the current CIE recommendation. It corrects the older CIE76 and CIE94 formulas, which exaggerate differences in blues and near-neutral grays, so its numbers track perceived difference much more closely.
Why do the same colors look different on my phone?
Every display has its own panel, brightness, white point and calibration, and phones often add night-shift or vividness filters on top. The values being compared are identical — only the rendering differs per device, so judge critical pairs on the screen your audience will use.
What is simultaneous contrast?
The effect where a color’s appearance shifts depending on its neighbors — the same gray looks darker next to white and lighter next to black. Setting the gap to 0 lets you judge colors under exactly this effect, the way they will meet in a real design.
Can I compare more than two colors?
Yes — up to four side by side. Delta E and contrast are computed for each adjacent pair, so place the two colors you most want to compare next to each other.
How small should Delta E be for two colors to count as a match?
Print and manufacturing tolerances commonly sit between ΔE 1 and 2 — visible only in direct side-by-side inspection. For on-screen brand work, a ΔE below 2 between the intended and rendered color is usually accepted as a match.