Chris Lilley 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"});

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

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 =&gt; c * color2.alpha);

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

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"

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

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

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

	/* Test inherited value of currentColor is the keyword currentColor

	"This happens at used-value time, which means that if the value is inherited, it’s
	inherited as currentcolor, not as the value of the color property, so descendants
	will use their own color property to resolve it."
	*/

	.outer {color: red;
	background-color: currentColor;
	font-size: 200%;

	/**
	* use with eyes
	*/

	.robot {

	fill: none;

	stroke: red;