--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -28,18 +28,17 @@ var gCSSProperties = {
   'background-attachment': {
     // https://drafts.csswg.org/css-backgrounds-3/#background-attachment
     types: [
       { type: 'discrete', options: [ [ 'fixed', 'local' ] ] }
     ]
   },
   'background-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#background-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'background-blend-mode': {
     // https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode
     types: [
       { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
     ]
   },
   'background-clip': {
@@ -120,18 +119,17 @@ var gCSSProperties = {
   },
   'border-block-start-width': {
     // https://drafts.csswg.org/css-logical-props/#propdef-border-block-start-width
     types: [
     ]
   },
   'border-bottom-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'border-bottom-left-radius': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-left-radius
     types: [
     ]
   },
   'border-bottom-right-radius': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-right-radius
@@ -218,18 +216,17 @@ var gCSSProperties = {
   'border-image-width': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-image-width
     types: [
       { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
     ]
   },
   'border-left-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-left-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'border-left-style': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-left-style
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-left-width': {
@@ -238,18 +235,17 @@ var gCSSProperties = {
     setup: t => {
       var element = createElement(t);
       element.style.borderLeftStyle = 'solid';
       return element;
     }
   },
   'border-right-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-right-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'border-right-style': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-right-style
     types: [
       { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
     ]
   },
   'border-right-width': {
@@ -263,18 +259,17 @@ var gCSSProperties = {
   },
   'border-spacing': {
     // https://drafts.csswg.org/css-tables/#propdef-border-spacing
     types: [
     ]
   },
   'border-top-color': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'border-top-left-radius': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-left-radius
     types: [
     ]
   },
   'border-top-right-radius': {
     // https://drafts.csswg.org/css-backgrounds-3/#border-top-right-radius
@@ -343,18 +338,17 @@ var gCSSProperties = {
   'clip-rule': {
     // https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule
     types: [
       { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
     ]
   },
   'color': {
     // https://drafts.csswg.org/css-color/#propdef-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'color-adjust': {
     // https://drafts.csswg.org/css-color-4/#color-adjust
     types: [
       { type: 'discrete', options: [ [ 'economy', 'exact' ] ] }
     ]
   },
   'color-interpolation': {
@@ -375,18 +369,17 @@ var gCSSProperties = {
     ]
   },
   'column-gap': {
     // https://drafts.csswg.org/css-multicol/#propdef-column-gap
     types: [ 'length' ]
   },
   'column-rule-color': {
     // https://drafts.csswg.org/css-multicol/#propdef-column-rule-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'column-fill': {
     // https://drafts.csswg.org/css-multicol/#propdef-column-fill
     types: [
       { type: 'discrete', options: [ [ 'auto', 'balance' ] ] }
     ]
   },
   'column-rule-style': {
@@ -506,18 +499,17 @@ var gCSSProperties = {
   'flex-wrap': {
     // https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap
     types: [
       { type: 'discrete', options: [ [ 'nowrap', 'wrap' ] ] }
     ]
   },
   'flood-color': {
     // https://drafts.fxtf.org/filters/#FloodColorProperty
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'flood-opacity': {
     // https://drafts.fxtf.org/filters/#propdef-flood-opacity
     types: [
     ]
   },
   'font-size': {
     // https://drafts.csswg.org/css-fonts-3/#propdef-font-size
@@ -764,18 +756,17 @@ var gCSSProperties = {
     ]
   },
   'letter-spacing': {
     // https://drafts.csswg.org/css-text-3/#propdef-letter-spacing
     types: [ 'length' ]
   },
   'lighting-color': {
     // https://drafts.fxtf.org/filters/#LightingColorProperty
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'line-height': {
     // https://drafts.csswg.org/css21/visudet.html#propdef-line-height
     types: [
     ]
   },
   'list-style-image': {
     // https://drafts.csswg.org/css-lists-3/#propdef-list-style-image
@@ -1016,18 +1007,17 @@ var gCSSProperties = {
     ]
   },
   'order': {
     // https://drafts.csswg.org/css-flexbox/#propdef-order
     types: [ 'integer' ]
   },
   'outline-color': {
     // https://drafts.csswg.org/css-ui-3/#propdef-outline-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'outline-offset': {
     // https://drafts.csswg.org/css-ui-3/#propdef-outline-offset
     types: [ 'length' ]
   },
   'outline-style': {
     // https://drafts.csswg.org/css-ui/#propdef-outline-style
     types: [
@@ -1218,18 +1208,17 @@ var gCSSProperties = {
   'shape-rendering': {
     // https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty
     types: [
       { type: 'discrete', options: [ [ 'optimizeSpeed', 'crispEdges' ] ] }
     ]
   },
   'stop-color': {
     // https://svgwg.org/svg2-draft/pservers.html#StopColorProperty
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'stop-opacity': {
     // https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty
     types: [
     ]
   },
   'stroke': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeProperty
@@ -1303,35 +1292,33 @@ var gCSSProperties = {
   'text-combine-upright': {
     // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright
     types: [
       { type: 'discrete', options: [ [ 'all', 'none' ] ] }
     ]
   },
   'text-decoration-color': {
     // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'text-decoration-line': {
     // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
     types: [
       { type: 'discrete', options: [ [ 'underline', 'overline' ] ] }
     ]
   },
   'text-decoration-style': {
     // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration-style
     types: [
       { type: 'discrete', options: [ [ 'solid', 'dotted' ] ] }
     ]
   },
   'text-emphasis-color': {
     // https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color
-    types: [
-    ]
+    types: [ 'color' ]
   },
   'text-emphasis-position': {
     // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-position
     types: [
       { type: 'discrete', options: [ [ 'over right', 'under left' ] ] }
     ]
   },
   'text-emphasis-style': {

--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -245,17 +245,82 @@ const visibilityType = {
                             { time: 620,  expected: 'visible' },
                             { time: 630,  expected: 'hidden' },
                             { time: 1000, expected: 'hidden' }]);
     }, property + ' uses visibility animation when animating '
      + 'from "visible" to "hidden" with easeInOutBack easing');
   },
 };
 
+const colorType = {
+  testInterpolation: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',
+                                                   'rgb(0, 0, 255)'] },
+                                     1000);
+      testAnimationSamples(animation, idlName,
+                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
+    }, property + ' supports animating as color of rgb()');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },
+                                     1000);
+      testAnimationSamples(animation, idlName,
+                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
+    }, property + ' supports animating as color of #RGB');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',
+                                                   'hsl(240, 100%, 50%)'] },
+                                     1000);
+      testAnimationSamples(animation, idlName,
+                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);
+    }, property + ' supports animating as color of hsl()');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['#ff000066', '#0000ffcc'] },
+                                     1000);
+                                             // R: 255 * (0.4 * 0.5) / 0.6 = 85
+                                             // G: 255 * (0.8 * 0.5) / 0.6 = 170
+      testAnimationSamples(animation, idlName,
+                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
+    }, property + ' supports animating as color of #RGBa');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',
+                                                   'rgba(0, 0, 255, 0.8)'] },
+                                     1000);
+      testAnimationSamples(animation, idlName,      // Same as above.
+                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
+    }, property + ' supports animating as color of rgba()');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['hsla(0,   100%, 50%, 0.4)',
+                                                   'hsla(240, 100%, 50%, 0.8)'] },
+                                     1000);
+      testAnimationSamples(animation, idlName,      // Same as above.
+                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);
+    }, property + ' supports animating as color of hsla()');
+  },
+};
+
 const types = {
+  color: colorType,
   discrete: discreteType,
   integer: integerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
   positiveNumber: positiveNumberType,
   visibility: visibilityType,
 };