colorNotebook.md

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