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

svgeesus

Gamut map test

let original= new Color("color(rec2020 0 0 1)");
let mapped = original.to("srgb");
mapped.toGamut({method:"clip"});
let lchresult = mapped.toGamut({method:"lch.chroma"});
lchresult.to("oklch");
let okresult = mapped.toGamut({method:"oklch.chroma"});

svgeesus

BT.2020 to Display P3 gamut mapping explorer

High chroma and high lightness colors, cyan and yellow

let color = new Color("red");

svgeesus

color-mix() examples for tests

let fromCol = new Color("color(display-p3 1 0 0)");
let toCol = new Color("green");
let mix= fromCol.range(toCol, {
    space: "oklab", // interpolation space
    outputSpace: "srgb"
});

svgeesus

CSS Color 5 simple mix

Effect of mixing colorspace

50% white, 50% sRGB blue, in LCH, OKLCH

For https://drafts.csswg.org/css-color-5/#color-mix

let color = new Color("white");

svgeesus

color-mix tester

Also displays the intermediate results

let fromColor = new Color("red");
let toColor = new Color("green");
let p = 0.5;
let space="lch";

svgeesus

svgeesus

DeltaE comparisons

From color-js/color.js#89

let goldenrod = new Color("goldenrod");

let cornflowerblue = new Color("cornflowerblue");
let royalblue = new Color("royalblue");