diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index 2ec7bcc59a1..6d7bf803f1e 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -21,8 +21,8 @@ ${helpers.single_keyword("vector-effect", "none non-scaling-stroke",
 
 ${helpers.predefined_type(
     "stop-color",
-    "RGBAColor",
-    "RGBA::new(0, 0, 0, 255)",
+    "Color",
+    "RGBA::new(0, 0, 0, 255).into()",
     products="gecko",
     animation_value_type="AnimatedRGBA",
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty",
@@ -37,10 +37,10 @@ ${helpers.predefined_type("stop-opacity", "Opacity", "1.0",
 
 ${helpers.predefined_type(
     "flood-color",
-    "RGBAColor",
-    "RGBA::new(0, 0, 0, 255)",
+    "Color",
+    "RGBA::new(0, 0, 0, 255).into()",
     products="gecko",
-    animation_value_type="AnimatedRGBA",
+    animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty",
 )}
 
@@ -50,10 +50,10 @@ ${helpers.predefined_type("flood-opacity", "Opacity",
 
 ${helpers.predefined_type(
     "lighting-color",
-    "RGBAColor",
-    "RGBA::new(255, 255, 255, 255)",
+    "Color",
+    "RGBA::new(255, 255, 255, 255).into()",
     products="gecko",
-    animation_value_type="AnimatedRGBA",
+    animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty",
 )}