First stab on adding support for deltas and contrast from other color

src/color-scale/color-scale.js

@@ -71,6 +71,9 @@ const Self = class ColorScale extends NudeElement {
 			if (this.coords) {
 				swatch.coords = this.coords;
 			}
+			if (this.vs) {
+				swatch.vs = this.vs;
+			}
 			i++;
 		}
 
@@ -152,6 +155,9 @@ const Self = class ColorScale extends NudeElement {
 			additionalDependencies: ["coords"],
 		},
 		coords: {},
+		vs: {
+			type: Color,
+		},
 	};
 }
 

src/color-swatch/color-swatch.css

@@ -7,6 +7,8 @@
 		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
 		content-box border-box var(--_transparency-background)
 	);
+	--_positive-deltaE-color: var(--positive-deltaE-color, hsl(120, 80%, 25%));
+	--_negative-deltaE-color: var(--negative-deltaE-color, hsl(0, 85%, 40%));
 
 	position: relative;
 	display: inline-flex;
@@ -49,31 +51,48 @@ slot {
 	}
 }
 
-[part="coords"] {
+[part="coords"], [part="deltaE"] {
 	margin: 0;
 	display: inline-flex;
 	gap: .5em;
 
+	dd {
+		margin: 0;
+		font-weight: bold;
+		font-variant-numeric: tabular-nums;
+	}
+
 	&:is(:host([size="large"]) &) {
 		display: grid;
-		grid-template-columns: max-content auto;
-		gap: .1em .2em;
-		font-size: max(9px, 80%);
-		justify-content: start;
-
-		.coord {
-			display: contents;
-		}
+		grid-template-columns: subgrid;
 	}
+}
 
+[part="coords"] {
 	.coord {
 		display: flex;
 		gap: .2em;
 
-		dd {
-			margin: 0;
-			font-weight: bold;
-			font-variant-numeric: tabular-nums;
+		dd.deltaE {
+			color: var(--_deltaE-color);
+
+			&.positive {
+				--_deltaE-color: var(--_positive-deltaE-color);
+			}
+
+			&.negative {
+				--_deltaE-color: var(--_negative-deltaE-color);
+			}
+		}
+	}
+
+	&:is(:host([size="large"]) &) {
+		.coord {
+			display: contents;
+
+			dd:not(.deltaE, :has(~ dd)) {
+				grid-column: span 2;
+			}
 		}
 	}
 }
@@ -97,6 +116,18 @@ slot {
 	@container color-swatch (width <= 5rem) {
 		font-size: 80%;
 	}
+
+	&:is(:host([size="large"]) &) {
+		display: grid;
+		grid-template-columns: repeat(3, max-content);
+		gap: .1em .2em;
+		font-size: max(9px, 80%);
+		justify-content: start;
+
+		& > * {
+			grid-column: 1 / -1;
+		}
+	}
 }
 
 [part="color-wrapper"] {

src/color-swatch/color-swatch.js

@@ -109,27 +109,68 @@ const Self = class ColorSwatch extends NudeElement {
 			this.style.setProperty("--color", colorString);
 		}
 
-		if (name === "coords") {
-			if (!this.coords.length) {
-				return;
-			}
+		if (name === "coords" || name === "vs") {
+			if (this.coords.length) {
+				this._el.coords ??= Object.assign(document.createElement("dl"), {part: "coords"});
+				if (!this._el.coords.parentNode) {
+					this._el.colorWrapper.after(this._el.coords);
+				}
 
-			this._el.coords ??= Object.assign(document.createElement("dl"), {part: "coords"});
-			if (!this._el.coords.parentNode) {
-				this._el.colorWrapper.after(this._el.coords);
-			}
+				let coords = [];
+				for (let coord of this.coords) {
+					let [label, channel] = Object.entries(coord)[0];
+					let value = this.color.get(channel);
+
+					let deltaString;
+					if (typeof value === "number" && this.vs) {
+						let {space, index} = Color.Space.resolveCoord(channel);
+						let deltas = this.color.deltas(this.vs, this.color, {space}).coords;
+
+						let delta = deltas[index];
+						if (typeof delta === "number" && delta !== 0) {
+							let spaceCoord = Object.values(space.coords)[index];
+							let isAngle = spaceCoord.type === "angle";
+							if (!isAngle) {
+								delta = Math.abs(delta - value) / delta;
+							}
+							delta = Number(delta.toPrecision(isAngle ? 4 : 1));
+
+							let sign = delta > 0 ? "+" : "";
+							let className = delta > 0 ? "positive" : "negative";
+							deltaString = `<dd class="deltaE ${ className }">(${ sign }${ delta }${ !isAngle ? "%" : ""})</dd>`;
+						}
+					}
+
+					value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+					let html = `<dt>${ label }</dt><dd>${ value }</dd>`;
+					if (deltaString) {
+						html += deltaString;
+					}
+
+					coords.push(`<div class="coord">${ html }</div>`);
+				}
 
-			let coords = [];
-			for (let coord of this.coords) {
-				let [label, channel] = Object.entries(coord)[0];
+				this._el.coords.innerHTML = coords.join("\n");
+			}
+		}
 
-				let value = this.color.get(channel);
+		if (name === "vs") {
+			if (!this.vs) {
+				this._el.deltaE?.remove();
+				this._el.deltaE = null;
+			}
+			else {
+				let value = this.color.deltaE(this.vs);
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+				if (value !== 0) {
+					this._el.deltaE ??= Object.assign(document.createElement("dl"), {part: "deltaE"});
+					if (!this._el.deltaE.parentNode) {
+						(this._el.coords ?? this._el.colorWrapper).after(this._el.deltaE);
+					}
 
-				coords.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
+					this._el.deltaE.innerHTML = `<dt>ΔE</dt><dd>${ value }</dd>`;
+				}
 			}
-
-			this._el.coords.innerHTML = coords.join("\n");
 		}
 	}
 
@@ -179,6 +220,10 @@ const Self = class ColorSwatch extends NudeElement {
 			},
 			dependencies: ["color"],
 		},
+		vs: {
+			type: Color,
+			dependencies: ["color"],
+		},
 	}
 
 	static events = {