diff --git a/modules/canvaskit/CHANGELOG.md b/modules/canvaskit/CHANGELOG.md
index 203448f..4622029 100644
--- a/modules/canvaskit/CHANGELOG.md
+++ b/modules/canvaskit/CHANGELOG.md
@@ -11,7 +11,12 @@
  - `SkPath.offset()`, `SkPath.drawOval`
  - `SkRRect` support (`SkCanvas.drawRRect`, `SkCanvas.drawDRRect`, `CanvasKit.RRectXY`).
    Advanced users can specify the 8 individual radii, if needed.
- - `CanvasKit.computeTonalColors()`, which returns an SkColor.
+ - `CanvasKit.computeTonalColors()`, which  returns TonalColors, which has an
+   ambient SkColor and a spot SkColor.
+ - `CanvasKit.SkColorFilter` and a variety of factories. `SkPaint.setColorFilter` is the only
+   consumer of these at the moment.
+ - `CanvasKit.SkColorMatrix` with functions `.identity()`, `.scaled()`, `.concat()` and
+   others. Primarily for use with `CanvasKit.SkColorFilter.MakeMatrix`.
 
 ### Changed
  - `MakeSkVertices` uses a builder to save a copy.
diff --git a/modules/canvaskit/canvaskit_bindings.cpp b/modules/canvaskit/canvaskit_bindings.cpp
index 7750908..df91ac2 100644
--- a/modules/canvaskit/canvaskit_bindings.cpp
+++ b/modules/canvaskit/canvaskit_bindings.cpp
@@ -9,6 +9,7 @@
 #include "include/core/SkBlurTypes.h"
 #include "include/core/SkCanvas.h"
 #include "include/core/SkColor.h"
+#include "include/core/SkColorFilter.h"
 #include "include/core/SkData.h"
 #include "include/core/SkEncodedImageFormat.h"
 #include "include/core/SkFilterQuality.h"
@@ -881,6 +882,18 @@
         }))
         ;
 
+    class_<SkColorFilter>("SkColorFilter")
+        .smart_ptr<sk_sp<SkColorFilter>>("sk_sp<SkColorFilter>>")
+        .class_function("MakeBlend", &SkColorFilters::Blend)
+        .class_function("MakeCompose", &SkColorFilters::Compose)
+        .class_function("MakeLerp", &SkColorFilters::Lerp)
+        .class_function("MakeLinearToSRGBGamma", &SkColorFilters::LinearToSRGBGamma)
+        .class_function("_makeMatrix", optional_override([](uintptr_t /* float* */ fPtr) {
+            float* twentyFloats = reinterpret_cast<float*>(fPtr);
+            return SkColorFilters::Matrix(twentyFloats);
+        }))
+        .class_function("MakeSRGBToLinearGamma", &SkColorFilters::SRGBToLinearGamma);
+
     class_<SkData>("SkData")
         .smart_ptr<sk_sp<SkData>>("sk_sp<SkData>>")
         .function("size", &SkData::size);
@@ -1006,6 +1019,7 @@
                                                     float r, float g, float b, float a) {
             self.setColor({r, g, b, a});
         }))
+        .function("setColorFilter", &SkPaint::setColorFilter)
         .function("setFilterQuality", &SkPaint::setFilterQuality)
         .function("setMaskFilter", &SkPaint::setMaskFilter)
         .function("setPathEffect", &SkPaint::setPathEffect)
diff --git a/modules/canvaskit/externs.js b/modules/canvaskit/externs.js
index 07bfe1d..27f3385 100644
--- a/modules/canvaskit/externs.js
+++ b/modules/canvaskit/externs.js
@@ -146,6 +146,26 @@
 		delete: function() {},
 	},
 
+	SkColorFilter: {
+		// public API (from C++ bindings and JS interface)
+		MakeBlend: function() {},
+		MakeCompose: function() {},
+		MakeLerp: function() {},
+		MakeLinearToSRGBGamma: function() {},
+		MakeMatrix: function() {},
+		MakeSRGBToLinearGamma: function() {},
+		// private API (from C++ bindings)
+		_makeMatrix: function() {},
+	},
+
+	SkColorMatrix: {
+		concat: function() {},
+		identity: function() {},
+		postTranslate: function() {},
+		rotated: function() {},
+		scaled: function() {},
+	},
+
 	SkFont: {
 		// public API (from C++ bindings)
 		getScaleX: function() {},
diff --git a/modules/canvaskit/interface.js b/modules/canvaskit/interface.js
index d0e8d19..02c415f 100644
--- a/modules/canvaskit/interface.js
+++ b/modules/canvaskit/interface.js
@@ -123,6 +123,94 @@
     ];
   };
 
+  // An SkColorMatrix is a 4x4 color matrix that transforms the 4 color channels
+  //  with a 1x4 matrix that post-translates those 4 channels.
+  // For example, the following is the layout with the scale (S) and post-transform
+  // (PT) items indicated.
+  // RS,  0,  0,  0 | RPT
+  //  0, GS,  0,  0 | GPT
+  //  0,  0, BS,  0 | BPT
+  //  0,  0,  0, AS | APT
+  //
+  // Much of this was hand-transcribed from SkColorMatrix.cpp, because it's easier to
+  // deal with a Float32Array of length 20 than to try to expose the SkColorMatrix object.
+
+  var rScale = 0;
+  var gScale = 6;
+  var bScale = 12;
+  var aScale = 18;
+
+  var rPostTrans = 4;
+  var gPostTrans = 9;
+  var bPostTrans = 14;
+  var aPostTrans = 19;
+
+  CanvasKit.SkColorMatrix = {};
+  CanvasKit.SkColorMatrix.identity = function() {
+    var m = new Float32Array(20);
+    m[rScale] = 1;
+    m[gScale] = 1;
+    m[bScale] = 1;
+    m[aScale] = 1;
+    return m;
+  }
+
+  CanvasKit.SkColorMatrix.scaled = function(rs, gs, bs, as) {
+    var m = new Float32Array(20);
+    m[rScale] = rs;
+    m[gScale] = gs;
+    m[bScale] = bs;
+    m[aScale] = as;
+    return m;
+  }
+
+  var rotateIndices = [
+    [6, 7, 11, 12],
+    [0, 10, 2, 12],
+    [0, 1,  5,  6],
+  ];
+  // axis should be 0, 1, 2 for r, g, b
+  CanvasKit.SkColorMatrix.rotated = function(axis, sine, cosine) {
+    var m = CanvasKit.SkColorMatrix.identity();
+    var indices = rotateIndices[axis];
+    m[indices[0]] = cosine;
+    m[indices[1]] = sine;
+    m[indices[2]] = -sine;
+    m[indices[3]] = cosine;
+    return m;
+  }
+
+  // m is a SkColorMatrix (i.e. a Float32Array), and this sets the 4 "special"
+  // params that will translate the colors after they are multiplied by the 4x4 matrix.
+  CanvasKit.SkColorMatrix.postTranslate = function(m, dr, dg, db, da) {
+    m[rPostTrans] += dr;
+    m[gPostTrans] += dg;
+    m[bPostTrans] += db;
+    m[aPostTrans] += da;
+    return m;
+  }
+
+  // concat returns a new SkColorMatrix that is the result of multiplying outer*inner;
+  CanvasKit.SkColorMatrix.concat = function(outer, inner) {
+    var m = new Float32Array(20);
+    var index = 0;
+    for (var j = 0; j < 20; j += 5) {
+        for (var i = 0; i < 4; i++) {
+            m[index++] =  outer[j + 0] * inner[i + 0] +
+                          outer[j + 1] * inner[i + 5] +
+                          outer[j + 2] * inner[i + 10] +
+                          outer[j + 3] * inner[i + 15];
+        }
+        m[index++] =  outer[j + 0] * inner[4] +
+                      outer[j + 1] * inner[9] +
+                      outer[j + 2] * inner[14] +
+                      outer[j + 3] * inner[19] +
+                      outer[j + 4];
+    }
+
+    return m;
+  }
+
   CanvasKit.SkPath.prototype.addArc = function(oval, startAngle, sweepAngle) {
     // see arc() for the HTMLCanvas version
     // note input angles are degrees.
@@ -573,6 +661,19 @@
     return ok;
   }
 
+  // colorMatrix is an SkColorMatrix (e.g. Float32Array of length 20)
+  CanvasKit.SkColorFilter.MakeMatrix = function(colorMatrix) {
+    if (!colorMatrix || colorMatrix.length !== 20) {
+      SkDebug('ignoring invalid color matrix');
+      return;
+    }
+    var fptr = copy1dArray(colorMatrix, CanvasKit.HEAPF32);
+    // We know skia memcopies the floats, so we can free our memory after the call returns.
+    var m = CanvasKit.SkColorFilter._makeMatrix(fptr);
+    CanvasKit._free(fptr);
+    return m;
+  }
+
   // Returns an array of the widths of the glyphs in this string.
   CanvasKit.SkFont.prototype.getWidths = function(str) {
     // add 1 for null terminator
diff --git a/modules/canvaskit/tests/canvas.spec.js b/modules/canvaskit/tests/canvas.spec.js
index b4f4cc9..9a73cf2 100644
--- a/modules/canvaskit/tests/canvas.spec.js
+++ b/modules/canvaskit/tests/canvas.spec.js
@@ -275,4 +275,61 @@
         }));
     });
 
+    it('draws with color filters', function(done) {
+        LoadCanvasKit.then(catchException(done, () => {
+            const surface = CanvasKit.MakeCanvasSurface('test');
+            expect(surface).toBeTruthy('Could not make surface')
+            if (!surface) {
+                done();
+                return;
+            }
+            const canvas = surface.getCanvas();
+            const path = starPath(CanvasKit);
+
+            const paint = new CanvasKit.SkPaint();
+
+            const blue = CanvasKit.SkColorFilter.MakeBlend(
+                CanvasKit.BLUE, CanvasKit.BlendMode.SrcIn);
+            const red =  CanvasKit.SkColorFilter.MakeBlend(
+                CanvasKit.Color(255, 0, 0, 0.8), CanvasKit.BlendMode.SrcOver);
+            const lerp = CanvasKit.SkColorFilter.MakeLerp(0.6, red, blue);
+
+            paint.setStyle(CanvasKit.PaintStyle.Fill);
+            paint.setAntiAlias(true);
+
+            canvas.clear(CanvasKit.Color(230, 230, 230));
+
+            paint.setColorFilter(blue)
+            canvas.drawRect(CanvasKit.LTRBRect(10, 10, 60, 60), paint);
+            paint.setColorFilter(lerp)
+            canvas.drawRect(CanvasKit.LTRBRect(50, 10, 100, 60), paint);
+            paint.setColorFilter(red)
+            canvas.drawRect(CanvasKit.LTRBRect(90, 10, 140, 60), paint);
+
+            const r = CanvasKit.SkColorMatrix.rotated(0, .707, -.707);
+            const b = CanvasKit.SkColorMatrix.rotated(2, .5, .866);
+            const s = CanvasKit.SkColorMatrix.scaled(0.9, 1.5, 0.8, 0.8);
+            let cm = CanvasKit.SkColorMatrix.concat(r, s);
+            cm = CanvasKit.SkColorMatrix.concat(cm, b);
+            CanvasKit.SkColorMatrix.postTranslate(cm, 20, 0, -10, 0);
+
+            const mat = CanvasKit.SkColorFilter.MakeMatrix(cm);
+
+            const final = CanvasKit.SkColorFilter.MakeCompose(mat, lerp);
+
+            paint.setColorFilter(final)
+            canvas.drawRect(CanvasKit.LTRBRect(10, 70, 140, 120), paint);
+
+            surface.flush();
+            path.delete();
+            paint.delete();
+            blue.delete();
+            red.delete();
+            lerp.delete();
+            final.delete();
+
+            reportSurface(surface, 'colorfilters_canvas', done);
+        }));
+    });
+
 });
\ No newline at end of file
diff --git a/modules/canvaskit/tests/core.spec.js b/modules/canvaskit/tests/core.spec.js
index 1c7043d..9a6591d 100644
--- a/modules/canvaskit/tests/core.spec.js
+++ b/modules/canvaskit/tests/core.spec.js
@@ -64,6 +64,6 @@
             expect(a).toBeCloseTo(0.969, 2);
             done();
         }));
-    })
+    });
 
 });