svgeesus

Title

let color = new Color("red");
color.to("p3");

svgeesus

Title

let color1 = new Color("color(rec2100-pq 0.58 0 0)");
let color2 = new Color("red");
let color3 = new Color("color(rec2020 1 0 0)");
color1.deltaE(color2, "ITP");
color1.deltaE(color3, "ITP");
color1.to("ictcp");

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");