Color Distance Calculator
Measure how visually similar or different two colors are: enter two HEX colors to get the Euclidean RGB distance, the perceptually-weighted redmean distance, and a plain-English similarity rating.
Input
First HEX color to compare.
Second HEX color to compare.
Output
| Metric | Value |
|---|---|
| No data yet | |
Guides
Enter two HEX colors and this tool measures how visually similar or different they are — useful for checking whether a brand color has drifted, deduplicating a palette, picking distinguishable chart colors, or verifying a design token change is subtle rather than jarring.
What "color distance" means
Color distance is a numeric score for how far apart two colors are. The simplest approach treats a color as a point in 3D RGB space (red, green, blue, each 0–255) and measures the straight-line distance between two such points:
Euclidean RGB distance: √((R1−R2)² + (G1−G2)² + (B1−B2)²)
This ranges from 0 (identical colors) to about 441.67 (pure black vs. pure white — the two most distant points in the RGB cube). It's easy to compute but doesn't match human perception well: the eye is far more sensitive to some hues and brightness ranges than others, so two pairs with the same Euclidean distance can look very differently "far apart."
Redmean distance is a well-known, low-cost correction that weights each channel's squared difference based on how bright the pair of colors is (via the mean red value), approximating human sensitivity without the overhead of a full color-space conversion:
ΔC = √((2 + r̄/256)×ΔR² + 4×ΔG² + (2 + (255−r̄)/256)×ΔB²), where r̄ is the average of the two reds.
Because it weights the channels more heavily, redmean values run higher than Euclidean values for the same pair — they're a different scale, not a "more precise" version of the same number, so compare them separately rather than expecting them to agree.
How to use it
- Enter or pick Color A.
- Enter or pick Color B.
- The results table updates instantly with both hex values, the Euclidean RGB distance, the redmean distance, and a plain-English similarity rating (Identical, Very Similar, Noticeably Different, or Very Different) based on the Euclidean score.
FAQ
Which number should I actually use? For a quick sanity check ("are these basically the same color?"), the Euclidean distance is simple and intuitive. If you're comparing colors that a person will actually look at side by side (UI palettes, brand consistency checks), lean on the redmean value — it tracks perceived difference more closely.
What counts as "similar"? The rating bands (0 = Identical, up to 25 = Very Similar, up to 100 = Noticeably Different, above 100 = Very Different) are based on the Euclidean distance across its 0–441.67 range. They're a rule of thumb, not a certified perceptual standard — for accessibility contrast (readability of text), use a contrast-ratio tool instead, since contrast and color distance measure different things.
Does this account for color blindness? No. Both formulas operate on standard RGB values and don't model any specific form of color-vision deficiency.
Can I use 3-digit hex codes like #f0c?
Yes — shorthand hex (#rgb) is expanded automatically to the full 6-digit form before comparing.
Is my color data sent anywhere? No — everything runs entirely in your browser. Nothing is uploaded or stored.