svgeesus

CSS Color 5 simple mix

Effect of mixing colorspace

50% white, 50% black, in LCH, XYZ

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

let color = new Color("white");

svgeesus

CSS Color 5 simple mix in LCH

65% teal, 35% olive, in lch

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

let color = new Color("teal");
color.to("lch").toString({precision:6});

svgeesus

CSS Color 5 simple mix in LCH

40% peru, 60% palegoldenrod, in lch

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

let color = new Color("peru");
color.to("lch").toString({precision:6});

svgeesus

CSS Color 5 syntactic forms example

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

let color = new Color("plum");
let color2 = new Color("purple");
let mix= color.range(color2, {
 space: "lch", // interpolation space

svgeesus

Linear-light interpolation

// XYZ and linear-light sRGB gives same result
let c1 = new Color("rebeccapurple");
let c2 = new Color("lch", [85, 100, 85]);
c1.range(c2); // lab
c1.range(c2, {space: "srgb"}); // gamma encoded sRGB
c1.range(c2, {space: "srgb-linear"}); //linear-light sRGB

svgeesus

WCAG contrast example

// Colors failing AA-large, failing AA, and meeting AA

let bg= new Color("Wheat");
let fg1 = new Color ("Bisque");
let fg2 = new Color ("DarkGoldenrod");
let fg3 = new Color ("Olive");

svgeesus

Tab's example

let middleRed = new Color("rgb(100 0 0)");
let middleGreen = new Color("rgb(0 100 0)");
let mixed = middleRed.mix(middleGreen, -.2, {space: "srgb"});
let mixed2 = middleRed.mix(middleGreen, -.2, {space: "srgb-linear"});
let mixed3 = middleRed.mix(middleGreen, -.2, {space: "lch"});

svgeesus

Mixing in LCH vs. sRGB

let first= new Color("lime");
let second = new Color("color(display-p3 0.8385 0.4296 0.1971)");
let srgb_second = second.to("srgb");
let mix = first.range(second, {
    space: "lab", // interpolation space
 outputSpace: "srgb"

svgeesus

Interpolating two colors in Lab

let color1 = new Color("rgb(50% 100% 25%)");
color1.p3;
let color2 = new Color("color(display-p3 1 0 0)");
color2.p3;
let blend= color1.range(color2, {
 space: "lab", // interpolation space

svgeesus

Premultiplied alpha Lab interpolation example

let color1 = new Color("rgb(76% 62% 03% / 0.4)");
let start1 = color1.to("lab");
let pm1 = start1.coords.map(c => c * color1.alpha);
let color2 = new Color("color(display-p3 0.84 0.19 0.72 / 0.6)");
let start2 = color2.to("lab");
let pm2 = start2.coords.map(c => c * color2.alpha);