# Color 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

Discover More 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.... ColorSpace (Model)

A color space (or model) is a coordinate space where a set of coordinate define an unique color. 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 *... Datacadamia - Data all the things

Computer science from a data perspective 