Tweaks

Author: sindresorhus

index.d.ts

@@ -98,6 +98,10 @@ export class Color {
 
 	/**
 	Creates a new color.
+
+	Values are interpreted as extended sRGB (non-linear) by default.
+
+	@note Values are rounded to 4 decimal places. Opacity is clamped to 0...1.
 	*/
 	constructor(options: ColorOptions);
 }
@@ -149,6 +153,8 @@ export class ColorPalette {
 	Creates a new color.
 
 	Values are interpreted as extended sRGB (non-linear) by default.
+
+	@note Values are rounded to 4 decimal places. Opacity is clamped to 0...1.
 	*/
 	static createColor(options: ColorOptions): Color;
 

index.js

@@ -1,3 +1,8 @@
+const roundToFourDecimals = number => {
+	const multiplier = 10_000;
+	return Math.round(number * multiplier) / multiplier;
+};
+
 const sRGBToLinear = srgb => {
 	if (srgb <= 0.040_45) {
 		return srgb / 12.92;
@@ -71,16 +76,18 @@ export class Color {
 		validateComponent(opacity, 'Opacity');
 
 		this.name = name;
-		this.#linearRed = isLinear ? red : sRGBToLinear(red);
-		this.#linearGreen = isLinear ? green : sRGBToLinear(green);
-		this.#linearBlue = isLinear ? blue : sRGBToLinear(blue);
-		this.#opacity = clampOpacity(opacity);
+		this.#linearRed = roundToFourDecimals(isLinear ? red : sRGBToLinear(red));
+		this.#linearGreen = roundToFourDecimals(isLinear ? green : sRGBToLinear(green));
+		this.#linearBlue = roundToFourDecimals(isLinear ? blue : sRGBToLinear(blue));
+		this.#opacity = roundToFourDecimals(clampOpacity(opacity));
 	}
 
 	get red() {
 		return linearToSRGB(this.#linearRed);
 	}
 
+	// We don't round in setters to maintain precision during calculations (like `red += 0.1`).
+	// Rounding only happens during initialization and serialization.
 	set red(value) {
 		if (typeof value !== 'number') {
 			throw new TypeError('Red component must be a number');
@@ -144,9 +151,14 @@ export class Color {
 	}
 
 	toJSON() {
-		const components = [this.#linearRed, this.#linearGreen, this.#linearBlue];
+		const components = [
+			roundToFourDecimals(this.#linearRed),
+			roundToFourDecimals(this.#linearGreen),
+			roundToFourDecimals(this.#linearBlue),
+		];
+
 		if (this.#opacity !== 1) {
-			components.push(this.#opacity);
+			components.push(roundToFourDecimals(this.#opacity));
 		}
 
 		const result = {components};
@@ -188,18 +200,17 @@ export class ColorPalette {
 
 	static deserialize(data) {
 		const parsed = JSON.parse(data);
-
 		validatePalette(parsed);
 
 		const colors = parsed.colors.map(color => {
 			const [red, green, blue, opacity = 1] = color.components;
 
 			return new Color({
 				name: color.name,
-				red,
-				green,
-				blue,
-				opacity,
+				red: roundToFourDecimals(red),
+				green: roundToFourDecimals(green),
+				blue: roundToFourDecimals(blue),
+				opacity: roundToFourDecimals(opacity),
 				isLinear: true,
 			});
 		});

test.js

@@ -184,3 +184,35 @@ test('color component modification', t => {
 		color.green = 'invalid';
 	}, {message: /number/});
 });
+
+test('precision rounding', t => {
+	const color = new Color({
+		red: 0.123_45, // Should round to 0.1235
+		green: 0.1235, // Should round to 0.1235 (banker's rounding)
+		blue: 0.123_44, // Should round to 0.1234
+		opacity: 0.123_49, // Should round to 0.1235
+		isLinear: true, // Use linear values directly to test rounding
+	});
+
+	const linear = color.linearComponents;
+	t.is(linear.red, 0.1235);
+	t.is(linear.green, 0.1235);
+	t.is(linear.blue, 0.1234);
+	t.is(linear.opacity, 0.1235);
+});
+
+test('precision roundtrip', t => {
+	const color = new Color({
+		red: 0.123_45,
+		green: 0.1235,
+		blue: 0.123_44,
+		opacity: 0.123_49,
+		isLinear: true,
+	});
+
+	// Test serialization maintains precision
+	const serialized = JSON.stringify(color);
+	const parsed = JSON.parse(serialized);
+
+	t.deepEqual(parsed.components, [0.1235, 0.1235, 0.1234, 0.1235]);
+});