diff --git a/src/fontra/client/core/font-controller.js b/src/fontra/client/core/font-controller.js
index 542f29872..ddabd4e87 100644
--- a/src/fontra/client/core/font-controller.js
+++ b/src/fontra/client/core/font-controller.js
@@ -16,6 +16,7 @@ import { TaskPool } from "./task-pool.js";
 import {
   assert,
   chain,
+  colorizeImage,
   getCharFromCodePoint,
   mapObjectValues,
   throttleCalls,
@@ -136,6 +137,30 @@ export class FontController {
     return cacheEntry.imagePromise;
   }
 
+  getBackgroundImageColorized(imageIdentifier, color) {
+    if (!color) {
+      return this.getBackgroundImage(imageIdentifier);
+    }
+    const cacheEntry = this._getBackgroundImageCacheEntry(imageIdentifier);
+    if (cacheEntry.color !== color) {
+      delete cacheEntry.imageColorized;
+      cacheEntry.color = color;
+      cacheEntry.imageColorizedPromise = new Promise((resolve, reject) => {
+        cacheEntry.imagePromise.then((image) => {
+          if (image) {
+            colorizeImage(image, color).then((image) => {
+              cacheEntry.imageColorized = image;
+              resolve(image);
+            });
+          } else {
+            resolve(null);
+          }
+        });
+      });
+    }
+    return cacheEntry.imageColorizedPromise;
+  }
+
   _getBackgroundImageCacheEntry(imageIdentifier) {
     // This returns a promise for the requested background image
     let cacheEntry = this._backgroundImageCache.get(imageIdentifier);
@@ -161,6 +186,19 @@ export class FontController {
     return cacheEntry?.image;
   }
 
+  getBackgroundImageColorizedCached(imageIdentifier, color, onLoad = null) {
+    if (!color) {
+      return this.getBackgroundImageCached(imageIdentifier, onLoad);
+    }
+    const cacheEntry = this._backgroundImageCache.get(imageIdentifier);
+    if ((!cacheEntry?.imageColorizedPromise || cacheEntry.color !== color) && onLoad) {
+      this.getBackgroundImageColorized(imageIdentifier, color).then((image) =>
+        onLoad(image)
+      );
+    }
+    return cacheEntry?.imageColorized;
+  }
+
   _cacheBackgroundImageFromIdentifier(imageIdentifier) {
     return this._cacheBackgroundImageFromDataURLPromise(
       imageIdentifier,
diff --git a/src/fontra/views/editor/visualization-layer-definitions.js b/src/fontra/views/editor/visualization-layer-definitions.js
index 5b25b9d3c..6414b2696 100644
--- a/src/fontra/views/editor/visualization-layer-definitions.js
+++ b/src/fontra/views/editor/visualization-layer-definitions.js
@@ -427,8 +427,15 @@ registerVisualizationLayerDefinition({
       return;
     }
 
-    const image = model.fontController.getBackgroundImageCached(
+    const image = model.fontController.getBackgroundImageColorizedCached(
       backgroundImage.identifier,
+      backgroundImage.color
+        ? rgbaToCSS([
+            backgroundImage.color.red,
+            backgroundImage.color.green,
+            backgroundImage.color.blue,
+          ])
+        : null,
       () => controller.requestUpdate()
     );