diff --git a/src/Format.js b/src/Format.js
index e2a8141f8..e28830a78 100644
--- a/src/Format.js
+++ b/src/Format.js
@@ -4,11 +4,11 @@ let instance = Symbol("instance");
 
 const outputByType = {
 	"<percentage>": {
-		range: [0, 100],
+		toRange: [0, 100],
 		suffix: "%"
 	},
 	"<angle>": {
-		range: [0, 360],
+		toRange: [0, 360],
 		suffix: "deg"
 	},
 }
@@ -64,7 +64,8 @@ export default class Format {
 			let outputType = this.coords[i][0];
 
 			let fromRange = coordMeta.range || coordMeta.refRange;
-			let {toRange, suffix} = outputByType[outputType] || {toRange: outputType.range, suffix: ""};
+
+			let {toRange, suffix} = outputByType[outputType.type] || {toRange: outputType.range, suffix: ""};
 
 			return {fromRange, toRange, suffix};
 		});
@@ -75,10 +76,7 @@ export default class Format {
 		return coords.map((c, i) => {
 			let {fromRange, toRange, suffix} = this.coordFormats[i];
 
-			if (fromRange && toRange) {
-				c = mapRange(fromRange, toRange, c);
-			}
-
+			c = mapRange(fromRange, toRange, c);
 			c = serializeNumber(c, {precision, unit: suffix});
 
 			return c;
diff --git a/src/serialize.js b/src/serialize.js
index cb442c9cf..b4dfb09ec 100644
--- a/src/serialize.js
+++ b/src/serialize.js
@@ -36,7 +36,7 @@ export default function serialize (color, {
 	inGamut ||= format.toGamut;
 
 	if (inGamut && !checkInGamut(color)) {
-		// FIXME what happens if the color contains NaNs?
+		// FIXME what happens if the color contains none values?
 		coords = toGamut(clone(color), inGamut === true ? undefined : inGamut).coords;
 	}
 
@@ -54,22 +54,11 @@ export default function serialize (color, {
 		// Functional syntax
 		let name = format.name || "color";
 
-		if (format.serializeCoords) {
-			coords = format.serializeCoords(coords, precision);
-		}
-		else {
-			if (precision !== null) {
-				coords = coords.map(c => {
-					return util.serializeNumber(c, {precision});
-				});
-			}
-		}
-
-		let args = [...coords];
+		let args = format.serializeCoords(coords, precision);
 
 		if (name === "color") {
 			// If output is a color() function, add colorspace id as first argument
-			let cssId = format.id || format.ids?.[0] || color.space.id;
+			let cssId = format.id || format.ids?.[0] || color.space.cssId || color.space.id;
 			args.unshift(cssId);
 		}
 
diff --git a/test/serialize.js b/test/serialize.js
new file mode 100644
index 000000000..1fa212d3b
--- /dev/null
+++ b/test/serialize.js
@@ -0,0 +1,18 @@
+import "../src/spaces/index.js";
+import serialize from "../src/serialize.js";
+
+const tests = {
+	name: "Color serialization Tests",
+	description: "These tests parse different color formats and compare the result as JSON",
+	run (spaceId, coords, alpha) {
+		return serialize({spaceId, coords, alpha});
+	},
+	tests: [
+		{
+			args: ["srgb", [1, 0.5, 0]],
+			expect: "rgb(100% 50% 0%)",
+		}
+	],
+};
+
+export default tests;