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

svgeesus

Gamut mapping

default vs manual adjustment

let color = new Color("p3", [0, 1, 1]);
color.chroma;
let m = "2000";
let color2 = color.to("srgb");
let color3 = color2.toGamut();

svgeesus

Title

let P3_yellow = new Color("p3", [1, 1, 0]);
let P3_LCH = P3_yellow.lch;
let sRGB_yellow = P3_yellow.to("srgb");
sRGB_yellow.toGamut();
sRGB_yellow.toGamut({method: "clip"});
sRGB_yellow.toGamut({method: "jzczhz.chroma"});

svgeesus

/**
 * use with eyes
 */

.robot {

	fill: none;

	stroke: red;