About
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:
<MATH> distance = \sqrt{(x_1 - x_2)² + (y_1 - y_2)² + (z_1 - z_2)² } </MATH> where:
- x, y, z are the coordinates of the colorspace
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)
See also the delta calculation algorithm in javascript
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