diff --git a/webrender/res/ps_blend.glsl b/webrender/res/ps_blend.glsl
index 46904ed537..448bfe6067 100644
--- a/webrender/res/ps_blend.glsl
+++ b/webrender/res/ps_blend.glsl
@@ -8,6 +8,7 @@ varying vec3 vUv;
 flat varying vec4 vUvBounds;
 flat varying float vAmount;
 flat varying int vOp;
+flat varying mat4 vColorMat;
 
 #ifdef WR_VERTEX_SHADER
 void main(void) {
@@ -34,6 +35,48 @@ void main(void) {
     vOp = ci.user_data0;
     vAmount = float(ci.user_data1) / 65535.0;
 
+    float lumR = 0.2126;
+    float lumG = 0.7152;
+    float lumB = 0.0722;
+    float oneMinusLumR = 1.0 - lumR;
+    float oneMinusLumG = 1.0 - lumG;
+    float oneMinusLumB = 1.0 - lumB;
+    float oneMinusAmount = 1.0 - vAmount;
+
+    switch (vOp) {
+        case 2:
+            // Grayscale
+            vColorMat = mat4(vec4(lumR + oneMinusLumR * oneMinusAmount, lumR - lumR * oneMinusAmount, lumR - lumR * oneMinusAmount, 0.0),
+                             vec4(lumG - lumG * oneMinusAmount, lumG + oneMinusLumG * oneMinusAmount, lumG - lumG * oneMinusAmount, 0.0),
+                             vec4(lumB - lumB * oneMinusAmount, lumB - lumB * oneMinusAmount, lumB + oneMinusLumB * oneMinusAmount, 0.0),
+                             vec4(0.0, 0.0, 0.0, 1.0));
+            break;
+        case 3:
+            // HueRotate
+            float c = cos(vAmount * 0.01745329251);
+            float s = sin(vAmount * 0.01745329251);
+            vColorMat = mat4(vec4(lumR + oneMinusLumR * c - lumR * s, lumR - lumR * c + 0.143 * s, lumR - lumR * c - oneMinusLumR * s, 0.0),
+                            vec4(lumG - lumG * c - lumG * s, lumG + oneMinusLumG * c + 0.140 * s, lumG - lumG * c + lumG * s, 0.0),
+                            vec4(lumB - lumB * c + oneMinusLumB * s, lumB - lumB * c - 0.283 * s, lumB + oneMinusLumB * c + lumB * s, 0.0),
+                            vec4(0.0, 0.0, 0.0, 1.0));
+            break;
+        case 5:
+            // Saturate
+            vColorMat = mat4(vec4(oneMinusAmount * lumR + vAmount, oneMinusAmount * lumR, oneMinusAmount * lumR, 0.0),
+                             vec4(oneMinusAmount * lumG, oneMinusAmount * lumG + vAmount, oneMinusAmount * lumG, 0.0),
+                             vec4(oneMinusAmount * lumB, oneMinusAmount * lumB, oneMinusAmount * lumB + vAmount, 0.0),
+                             vec4(0.0, 0.0, 0.0, 1.0));
+            break;
+        case 6:
+            // Sepia
+            vColorMat = mat4(vec4(0.393 + 0.607 * oneMinusAmount, 0.349 - 0.349 * oneMinusAmount, 0.272 - 0.272 * oneMinusAmount, 0.0),
+                             vec4(0.769 - 0.769 * oneMinusAmount, 0.686 + 0.314 * oneMinusAmount, 0.534 - 0.534 * oneMinusAmount, 0.0),
+                             vec4(0.189 - 0.189 * oneMinusAmount, 0.168 - 0.168 * oneMinusAmount, 0.131 + 0.869 * oneMinusAmount, 0.0),
+                             vec4(0.0, 0.0, 0.0, 1.0));
+            break;
+    }
+
+
     gl_Position = uTransform * vec4(local_pos, ci.z, 1.0);
 }
 #endif
@@ -43,55 +86,6 @@ void main(void) {
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-vec3 rgbToHsv(vec3 c) {
-    float value = max(max(c.r, c.g), c.b);
-
-    float chroma = value - min(min(c.r, c.g), c.b);
-    if (chroma == 0.0) {
-        return vec3(0.0);
-    }
-    float saturation = chroma / value;
-
-    float hue;
-    if (c.r == value)
-        hue = (c.g - c.b) / chroma;
-    else if (c.g == value)
-        hue = 2.0 + (c.b - c.r) / chroma;
-    else // if (c.b == value)
-        hue = 4.0 + (c.r - c.g) / chroma;
-
-    hue *= 1.0/6.0;
-    if (hue < 0.0)
-        hue += 1.0;
-    return vec3(hue, saturation, value);
-}
-
-vec3 hsvToRgb(vec3 c) {
-    if (c.s == 0.0) {
-        return vec3(c.z);
-    }
-
-    float hue = c.x * 6.0;
-    int sector = int(hue);
-    float residualHue = hue - float(sector);
-
-    vec3 pqt = c.z * vec3(1.0 - c.y, 1.0 - c.y * residualHue, 1.0 - c.y * (1.0 - residualHue));
-    switch (sector) {
-        case 0:
-            return vec3(c.z, pqt.z, pqt.x);
-        case 1:
-            return vec3(pqt.y, c.z, pqt.x);
-        case 2:
-            return vec3(pqt.x, c.z, pqt.z);
-        case 3:
-            return vec3(pqt.x, pqt.y, c.z);
-        case 4:
-            return vec3(pqt.z, pqt.x, c.z);
-        default:
-            return vec3(c.z, pqt.x, pqt.y);
-    }
-}
-
 vec4 Blur(float radius, vec2 direction) {
     // TODO(gw): Support blur in WR2!
     return vec4(1.0);
@@ -101,20 +95,6 @@ vec4 Contrast(vec4 Cs, float amount) {
     return vec4(Cs.rgb * amount - 0.5 * amount + 0.5, 1.0);
 }
 
-vec4 Grayscale(vec4 Cs, float amount) {
-    float ia = 1.0 - amount;
-    return mat4(vec4(0.2126 + 0.7874 * ia, 0.2126 - 0.2126 * ia, 0.2126 - 0.2126 * ia, 0.0),
-                vec4(0.7152 - 0.7152 * ia, 0.7152 + 0.2848 * ia, 0.7152 - 0.7152 * ia, 0.0),
-                vec4(0.0722 - 0.0722 * ia, 0.0722 - 0.0722 * ia, 0.0722 + 0.9278 * ia, 0.0),
-                vec4(0.0, 0.0, 0.0, 1.0)) * Cs;
-}
-
-vec4 HueRotate(vec4 Cs, float amount) {
-    vec3 CsHsv = rgbToHsv(Cs.rgb);
-    CsHsv.x = mod(CsHsv.x + amount / 6.283185307179586, 1.0);
-    return vec4(hsvToRgb(CsHsv), Cs.a);
-}
-
 vec4 Invert(vec4 Cs, float amount) {
     Cs.rgb /= Cs.a;
 
@@ -124,18 +104,6 @@ vec4 Invert(vec4 Cs, float amount) {
     return vec4(color.rgb * Cs.a, Cs.a);
 }
 
-vec4 Saturate(vec4 Cs, float amount) {
-    return vec4(hsvToRgb(min(vec3(1.0, amount, 1.0) * rgbToHsv(Cs.rgb), vec3(1.0))), Cs.a);
-}
-
-vec4 Sepia(vec4 Cs, float amount) {
-    float ia = 1.0 - amount;
-    return mat4(vec4(0.393 + 0.607 * ia, 0.349 - 0.349 * ia, 0.272 - 0.272 * ia, 0.0),
-                vec4(0.769 - 0.769 * ia, 0.686 + 0.314 * ia, 0.534 - 0.534 * ia, 0.0),
-                vec4(0.189 - 0.189 * ia, 0.168 - 0.168 * ia, 0.131 + 0.869 * ia, 0.0),
-                vec4(0.0, 0.0, 0.0, 1.0)) * Cs;
-}
-
 vec4 Brightness(vec4 Cs, float amount) {
     // Un-premultiply the input.
     Cs.rgb /= Cs.a;
@@ -169,27 +137,17 @@ void main(void) {
         case 1:
             oFragColor = Contrast(Cs, vAmount);
             break;
-        case 2:
-            oFragColor = Grayscale(Cs, vAmount);
-            break;
-        case 3:
-            oFragColor = HueRotate(Cs, vAmount);
-            break;
         case 4:
             oFragColor = Invert(Cs, vAmount);
             break;
-        case 5:
-            oFragColor = Saturate(Cs, vAmount);
-            break;
-        case 6:
-            oFragColor = Sepia(Cs, vAmount);
-            break;
         case 7:
             oFragColor = Brightness(Cs, vAmount);
             break;
         case 8:
             oFragColor = Opacity(Cs, vAmount);
             break;
+        default:
+            oFragColor = vColorMat * Cs;
     }
 }
 #endif
diff --git a/wrench/reftests/filters/filter-hue-rotate-1-ref.yaml b/wrench/reftests/filters/filter-hue-rotate-1-ref.yaml
new file mode 100644
index 0000000000..a1c4039010
--- /dev/null
+++ b/wrench/reftests/filters/filter-hue-rotate-1-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: rect
+          bounds: [10, 10, 50, 50]
+          color: [0, 91, 0, 1]
+        - type: rect
+          bounds: [10, 60, 50, 50]
+          color: [0, 218, 255, 1]
+        - type: rect
+          bounds: [60, 10, 50, 50]
+          color: [255, 0, 37, 1]
+        - type: rect
+          bounds: [60, 60, 50, 50]
+          color: [128, 128, 128, 1]
\ No newline at end of file
diff --git a/wrench/reftests/filters/filter-hue-rotate-1.yaml b/wrench/reftests/filters/filter-hue-rotate-1.yaml
new file mode 100644
index 0000000000..9934661bbd
--- /dev/null
+++ b/wrench/reftests/filters/filter-hue-rotate-1.yaml
@@ -0,0 +1,37 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: stacking-context
+          bounds: [10, 10, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [255, 0, 0, 1]
+        - type: stacking-context
+          bounds: [10, 60, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [0, 255, 0, 1]
+        - type: stacking-context
+          bounds: [60, 10, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [0, 0, 255, 1]
+        - type: stacking-context
+          bounds: [60, 60, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [128, 128, 128, 1]
\ No newline at end of file
diff --git a/wrench/reftests/filters/filter-hue-rotate-alpha-1-ref.yaml b/wrench/reftests/filters/filter-hue-rotate-alpha-1-ref.yaml
new file mode 100644
index 0000000000..091e70762b
--- /dev/null
+++ b/wrench/reftests/filters/filter-hue-rotate-alpha-1-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: rect
+          bounds: [10, 10, 50, 50]
+          color: [0, 46, 0, 1]
+        - type: rect
+          bounds: [10, 60, 50, 50]
+          color: [0, 109, 183, 1]
+        - type: rect
+          bounds: [60, 10, 50, 50]
+          color: [128, 0, 18, 1]
+        - type: rect
+          bounds: [60, 60, 50, 50]
+          color: [64, 64, 64, 1]
\ No newline at end of file
diff --git a/wrench/reftests/filters/filter-hue-rotate-alpha-1.yaml b/wrench/reftests/filters/filter-hue-rotate-alpha-1.yaml
new file mode 100644
index 0000000000..b38cb218ff
--- /dev/null
+++ b/wrench/reftests/filters/filter-hue-rotate-alpha-1.yaml
@@ -0,0 +1,37 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: stacking-context
+          bounds: [10, 10, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [255, 0, 0, 0.5]
+        - type: stacking-context
+          bounds: [10, 60, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [0, 255, 0, 0.5]
+        - type: stacking-context
+          bounds: [60, 10, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [0, 0, 255, 0.5]
+        - type: stacking-context
+          bounds: [60, 60, 50, 50]
+          filters: hue-rotate(90)
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: [128, 128, 128, 0.5]
\ No newline at end of file
diff --git a/wrench/reftests/filters/filter-saturate-blue-1-ref.yaml b/wrench/reftests/filters/filter-saturate-blue-1-ref.yaml
new file mode 100644
index 0000000000..9b5a96e542
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-1-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [18, 18, 18, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-1.yaml b/wrench/reftests/filters/filter-saturate-blue-1.yaml
new file mode 100644
index 0000000000..22d47f10e0
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 0, 255, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-2-ref.yaml b/wrench/reftests/filters/filter-saturate-blue-2-ref.yaml
new file mode 100644
index 0000000000..a83166358d
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-2-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [9, 9, 137, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-2.yaml b/wrench/reftests/filters/filter-saturate-blue-2.yaml
new file mode 100644
index 0000000000..0b8cac5609
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-2.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 0, 255, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-3-ref.yaml b/wrench/reftests/filters/filter-saturate-blue-3-ref.yaml
new file mode 100644
index 0000000000..ebb3450e02
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-3-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 0, 255, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-3.yaml b/wrench/reftests/filters/filter-saturate-blue-3.yaml
new file mode 100644
index 0000000000..060d0294ff
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-3.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(1)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 0, 255, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-alpha-1-ref.yaml b/wrench/reftests/filters/filter-saturate-blue-alpha-1-ref.yaml
new file mode 100644
index 0000000000..321bea6876
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-alpha-1-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [5, 5, 69, 1]
diff --git a/wrench/reftests/filters/filter-saturate-blue-alpha-1.yaml b/wrench/reftests/filters/filter-saturate-blue-alpha-1.yaml
new file mode 100644
index 0000000000..1a264cc458
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-blue-alpha-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 0, 255, 0.5]
diff --git a/wrench/reftests/filters/filter-saturate-green-1-ref.yaml b/wrench/reftests/filters/filter-saturate-green-1-ref.yaml
new file mode 100644
index 0000000000..2a710fae15
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-1-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [182, 182, 182, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-1.yaml b/wrench/reftests/filters/filter-saturate-green-1.yaml
new file mode 100644
index 0000000000..4fcfa8174b
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-2-ref.yaml b/wrench/reftests/filters/filter-saturate-green-2-ref.yaml
new file mode 100644
index 0000000000..f13c6e225d
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-2-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [91, 219, 91, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-2.yaml b/wrench/reftests/filters/filter-saturate-green-2.yaml
new file mode 100644
index 0000000000..98f033bb76
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-2.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-3-ref.yaml b/wrench/reftests/filters/filter-saturate-green-3-ref.yaml
new file mode 100644
index 0000000000..00aae63bdc
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-3-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 255, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-3.yaml b/wrench/reftests/filters/filter-saturate-green-3.yaml
new file mode 100644
index 0000000000..c7f3561171
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-3.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(1)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-alpha-1-ref.yaml b/wrench/reftests/filters/filter-saturate-green-alpha-1-ref.yaml
new file mode 100644
index 0000000000..e4c5643f29
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-alpha-1-ref.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [46, 110, 46, 1]
diff --git a/wrench/reftests/filters/filter-saturate-green-alpha-1.yaml b/wrench/reftests/filters/filter-saturate-green-alpha-1.yaml
new file mode 100644
index 0000000000..042d19d6f5
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-green-alpha-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 0.5]
diff --git a/wrench/reftests/filters/filter-saturate-red-1-ref.yaml b/wrench/reftests/filters/filter-saturate-red-1-ref.yaml
new file mode 100644
index 0000000000..3b95adb53a
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-1-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [54, 54, 54, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-1.yaml b/wrench/reftests/filters/filter-saturate-red-1.yaml
new file mode 100644
index 0000000000..9dab61a552
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-2-ref.yaml b/wrench/reftests/filters/filter-saturate-red-2-ref.yaml
new file mode 100644
index 0000000000..f6707424d0
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-2-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [155, 27, 27, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-2.yaml b/wrench/reftests/filters/filter-saturate-red-2.yaml
new file mode 100644
index 0000000000..5810894a2c
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-2.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-3-ref.yaml b/wrench/reftests/filters/filter-saturate-red-3-ref.yaml
new file mode 100644
index 0000000000..0c9e4f4ac2
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-3-ref.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [255, 0, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-3.yaml b/wrench/reftests/filters/filter-saturate-red-3.yaml
new file mode 100644
index 0000000000..ce9ed012d3
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-3.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(1)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-alpha-1-ref.yaml b/wrench/reftests/filters/filter-saturate-red-alpha-1-ref.yaml
new file mode 100644
index 0000000000..bdcd52d339
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-alpha-1-ref.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [78, 14, 14, 1]
diff --git a/wrench/reftests/filters/filter-saturate-red-alpha-1.yaml b/wrench/reftests/filters/filter-saturate-red-alpha-1.yaml
new file mode 100644
index 0000000000..11218fcf85
--- /dev/null
+++ b/wrench/reftests/filters/filter-saturate-red-alpha-1.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: saturate(0.5)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0, 0.5]
diff --git a/wrench/reftests/filters/reftest.list b/wrench/reftests/filters/reftest.list
index 691867a1e2..c24406800c 100644
--- a/wrench/reftests/filters/reftest.list
+++ b/wrench/reftests/filters/reftest.list
@@ -13,3 +13,17 @@
 == filter-invert-2.yaml filter-invert-2-ref.yaml
 == filter-large-blur-radius.yaml filter-large-blur-radius.png
 == filter-small-blur-radius.yaml filter-small-blur-radius.png
+== filter-saturate-red-1.yaml filter-saturate-red-1-ref.yaml
+== filter-saturate-red-2.yaml filter-saturate-red-2-ref.yaml
+== filter-saturate-red-3.yaml filter-saturate-red-3-ref.yaml
+== filter-saturate-green-1.yaml filter-saturate-green-1-ref.yaml
+== filter-saturate-green-2.yaml filter-saturate-green-2-ref.yaml
+== filter-saturate-green-3.yaml filter-saturate-green-3-ref.yaml
+== filter-saturate-blue-1.yaml filter-saturate-blue-1-ref.yaml
+== filter-saturate-blue-2.yaml filter-saturate-blue-2-ref.yaml
+== filter-saturate-blue-3.yaml filter-saturate-blue-3-ref.yaml
+== filter-saturate-red-alpha-1.yaml filter-saturate-red-alpha-1-ref.yaml
+== filter-saturate-green-alpha-1.yaml filter-saturate-green-alpha-1-ref.yaml
+== filter-saturate-blue-alpha-1.yaml filter-saturate-blue-alpha-1-ref.yaml
+== filter-hue-rotate-1.yaml filter-hue-rotate-1-ref.yaml
+== filter-hue-rotate-alpha-1.yaml filter-hue-rotate-alpha-1-ref.yaml