svgeesus

Color difference

let color1 = new Color("#0097a7");
let color2 = new Color("#1bc0d7");
color1.deltaEOK(color2);

svgeesus

Title

let color1 = new Color("#eee");
color1.to("oklch");
let color2 = new Color("green");
color2.to("oklch");
color1.range(color2, {space: "oklch"});
​

svgeesus

Slightly off

We're thinking that, like, an #eee or an #eef rather than a pure #fff, very short distance. We know for a fact that very often people reach for slightly off-white and off-black. That's from color design bible. Do #111 or #eee. That suggests we should be slightly off white/black for this. but it doesn't tell us exact value

let color1 = new Color("#111");
let color2 = new Color("black");
let color3 = new Color("#eee");
let color4 = new Color("white");

svgeesus

Out of gamut sRGB to HSL

let color = new Color("color(srgb-linear 0.2 1.3 0.1)");
let hsl = color.to("hsl", {options.inGamut:false});

svgeesus

DeltaEOK

let target= new Color("#69d1af");
let c1= new Color("#549998");
let c2= new Color("#c7daba");
target.deltaEOK(c1);
target.deltaEOK(c2);

svgeesus

Contrast algorithm comparison

Read more

let white = new Color("white");
let black =new Color("black");
let gray18 =new Color("color(srgb-linear 0.18 0.18 0.18)");
white.contrast(black, "WCAG21");

svgeesus

Luminance contrast

let color = new Color("orange");
let color2 = new Color("white");
let cc = contrastWCAG21(color, color2);

svgeesus

Debugging HSL funky values from index.js

let color_red = new Color("hsl(0 80% 50%)");
let color_red_light = color_red.clone().set({"lch.l":80});
let crl_lch = color_red.to("lch");
crl_lch.l = 80;
crl_lch;
crl_lch.to("srgb");

svgeesus

Abrupt hue and lightness discontinuities on OKLCH gamut mapping

(All colors here are outside the spectral locus)

let colorALAB = new Color('lab(50%, -127, -127)');
let colorAOKLCH = colorALAB.to('oklch');
let colorA = new Color('oklch(42.2% 1.95 191)');
let colorB = colorA.toGamut({method: 'oklch.c', space: 'srgb'});

svgeesus

Color contrast test

let base= new Color("red");
let first = new Color("deeppink");
let second =  new Color("#008000");
base.contrast(first);
base.contrast(second);