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

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

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

DeltaE comparisons

From color-js/color.js#89

let goldenrod = new Color("goldenrod");

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

svgeesus

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

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

BT.2020 to Display P3 gamut mapping explorer

High chroma and high lightness colors, cyan and yellow

let color = new Color("red");