colorNotebook.md

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");
color.to("lch").toString({precision:6});
color.to("xyz").toString({precision:6});
let color2 = new Color("black");
color2.to("lch").toString({precision:6});
color2.to("xyz").toString({precision:6});
let mix_lch= color.range(color2, {
    space: "lch", // interpolation space
    outputSpace: "srgb"
});
let mix_xyz= color.range(color2, {
    space: "xyz", // interpolation space
    outputSpace: "srgb"
});
let mix_srgb= color.range(color2, {
    space: "srgb", // interpolation space
    outputSpace: "srgb"
});
let blend_lch = mix_lch(.5);
blend_lch.to("lch").toString({precision:6});
let blend_xyz = mix_xyz(.5);
blend_xyz.to("lch").toString({precision:6});
let blend_srgb = mix_srgb(.5);
blend_srgb.to("lch").toString({precision:6});