Why does it report two different numbers?

One is a raw channel distance in RGB and the other is derived from a perceptually uniform space. They answer subtly different questions, so both are shown instead of burying the choice.

Which of the two is the perceptual one?

The OKLCH figure. It compares lightness, chroma and hue in a space designed to match how the eye judges difference, so it tracks perceived change more closely than the RGB number.

Is this a standard delta-E?

No. It is an approximation built on OKLCH rather than a full CIEDE2000 implementation, so it is best used for relative comparison rather than as an absolute figure.

Does a large distance guarantee readable text?

No. Distance measures similarity, not contrast. Two colors far apart in hue can still share a luminance and produce unreadable text; check that with a contrast checker.

Is the perceptual distance figure an absolute standard?

It is an approximation rather than a full CIEDE2000 delta-E, so it is a guide to relative difference rather than a specification figure. Distance is also not contrast: two colours can be perceptually distant and still produce unreadable text if their luminance is similar.

Color Distance Calculator

Color A

Color B

Distance

RGB Euclidean

261

OKLCH ΔE (approx.)

0.349

You Might Also Need

Just Noticeable Difference Calculator

Compute perceptual JND between two colors

Color Comparison Tool

Compare two colors side-by-side

Perceptual Lightness Calculator

Compute OKLCH perceptual lightness

Additive Color Mixer

Mix two light colors additively

The color distance calculator measures how far apart two colors are, reporting both the raw rgb distance between two colors and a perceptual OKLCH figure.

What is Color Distance Calculator?

The color distance calculator measures how far apart two colors are. Give it a pair of values and it reports two numbers: the straight-line distance between them in red, green and blue space, and an OKLCH-based figure that accounts for how the eye weights lightness, chroma and hue. There is no single correct answer to how different two colors are, so the tool shows both rather than pretending one number is definitive. Use it to ask whether two shades are distinguishable, or how far a generated color drifted from its target.

The rgb distance between two colors is the Euclidean length of the vector joining them in the three-channel cube: the square root of the sum of the squared differences on each channel.
It is fast, easy to reason about, and matches how a pixel edit behaves, but it is not perceptual.
Two colors can sit far apart in RGB and look almost identical, or be close in RGB and read as clearly different, because equal numeric steps are not equal steps to the eye.

The oklch color distance addresses that by working in a space designed to be perceptually uniform. Lightness and chroma are compared directly, and hue is compared as an angular difference scaled into the same range before all three are combined into a single distance. The result tracks perceived difference far more closely than the RGB figure, which is why it is the more useful number when you are asking whether a change will be noticed rather than merely measured.

Both numbers are useful in different contexts. Reach for the channel distance when you are debugging pixel operations, comparing large numbers of samples, or working inside a pipeline that already thinks in RGB. Reach for the perceptual figure when you are judging a palette, checking whether a hover state moved enough to be seen, or documenting how far a generated color ended up from the one you asked for. Reporting both keeps the tool honest about the fact that distance depends on the space you measure it in.

As a color difference calculator it is deliberately read-only: you compare, you do not modify. That makes it a good companion to the generators on this site, where you can produce a candidate color and then measure its distance from your reference before committing. Copy either figure into a design note, or use it as a threshold while tuning an algorithm. If the decision is about legibility rather than similarity, the contrast checker answers that different and more specific question.

Two practical notes keep the numbers meaningful.
First, the perceptual figure here is an approximation rather than a full CIEDE2000 delta-E, so treat it as a guide to relative difference rather than an absolute standard to quote in a specification.
Second, distance is not the same as contrast: two colors can be perceptually distant and still produce unreadable text if their luminance is similar.
Pair this tool with a contrast checker when the question is legibility, and use the distance figures when the question is how much a color actually moved.

How to use Color Distance Calculator

Set color A and color B with the two fields.
Read the RGB Euclidean distance for raw channel separation.
Read the OKLCH figure for how different the pair will look to the eye.
Run the same pair through a contrast checker when legibility rather than difference is the question.

When to use Color Distance Calculator vs related tools

Use this calculator when you need to quantify similarity or drift between two colors. Use the contrast checker when the question is whether text will be readable, since that is a luminance ratio rather than a distance. The color comparison tool runs the same two readings side by side for a review verdict, and when the question is legibility the contrast checker supplies the luminance ratio instead.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.