Color Difference / Distance

Monet Femme Ombrelle 1886 Logo

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:

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

4)





Discover More
Monet Femme Ombrelle 1886 Logo
Color

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Monet Femme Ombrelle 1886 Logo
ColorSpace (Model)

A color space (or model) is a coordinate space where a set of coordinate define an unique color.
Color Picker Contrast Ratio Chorme Devtool
Contrast (Light vs Dark Color Ratio)

contrast is a luminance ratio showing the difference between the most lighter color and the most darker color of an object. Generally, the contrast is calculated between two objects contigu. readable *...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective



Share this page:
Follow us:
Task Runner