Color - Diff ( Difference / Distance)

A color difference can be calculated on the colors metrics in a linear color space (where the metrics are linear)

• made for human such as hsv
• not made for computer such as rgb, …

Distance

Each coordinates

First on the colors characteristic via the HSV (hue, saturation, lightness)

And on the ratio metrics:

Demo: What is the difference between the rgb color expressed in hexadecimal: #075ebb and #cce5ff (bootstrap btn-primary and alert-primary colors respectively)

const color1 = d3.hsl("#075ebb")
const color2 = d3.hsl("#cce5ff")
console.log(Hue diff: ${color1.h} -${color2.h} = ${color1.h - color2.h} degree); console.log(Saturation diff:${color1.s} - ${color2.s} =${color1.s - color2.s} %);
console.log(Lightness diff: ${color1.l} -${color2.l} = \${color1.l - color2.l} %);


Segment: Euclidean Distance

This section calculate the difference based on the euclidean distance 1) calculated in each colorspace. ie:

$$distance = \sqrt{(x_1 - x_2)² + (y_1 - y_2)² + (z_1 - z_2)² }$$ where:

Demo: With ColorJs 2)and this colors:

let orange = new Color.default("hsl(30, 100%, 50%)"); // orange
let yellow = new Color.default("hsl(50, 100%, 50%)"); // yellow
let blue = new Color.default("hsl(230, 100%, 50%)"); // blue
let violet = new Color.default("hsl(260, 100%, 50%)"); // violet


DeltaE

DeltaE (ΔE) 3) is a family of algorithms specifically for calculating the difference (delta) between two colors. The very first version of DeltaE, DeltaE 1976 was simply the Euclidean distance of the colors in the Lab colorspace.

Note that Blue and violet are more similar than orange an yellow

orangeVsBlue = orange.deltaE76(yellow);
blueVsViolet = blue.deltaE76(violet)


Rgb

The difference in Rgb does not have any meaning because this colorspace is not linear

Note that Blue and violet are similar and orange an yellow are note but the distance value does not show it.

orangeVsBlue = orange.distance(yellow, "srgb");
blueVsViolet = blue.distance(violet , "srgb")


Algorithm

CIEDE2000 color difference algorithm. See https://github.com/markusn/color-diff