diff --git a/examples/icon-color.js b/examples/icon-color.js
index e5c583097c..cfbb28d1dc 100644
--- a/examples/icon-color.js
+++ b/examples/icon-color.js
@@ -41,7 +41,7 @@ rome.setStyle(
 london.setStyle(
   new Style({
     image: new Icon({
-      color: '#4271AE',
+      color: 'rgba(255, 0, 0, .5)',
       crossOrigin: 'anonymous',
       src: 'data/bigdot.png',
       scale: 0.2,
diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js
index ba4f96f479..932d3d9f4e 100644
--- a/src/ol/style/IconImage.js
+++ b/src/ol/style/IconImage.js
@@ -5,6 +5,7 @@
 import EventTarget from '../events/Target.js';
 import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
+import {asString} from '../color.js';
 import {createCanvasContext2D} from '../dom.js';
 import {shared as iconImageCache} from './IconImageCache.js';
 import {listenImage} from '../Image.js';
@@ -237,8 +238,7 @@ class IconImage extends EventTarget {
     // If the canvas is tainted in Internet Explorer this still produces
     // a solid color image with the shape of the icon.
     if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
-      const c = this.color_;
-      ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
+      ctx.fillStyle = asString(this.color_);
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 
       ctx.globalCompositeOperation = 'destination-in';
@@ -249,11 +249,13 @@ class IconImage extends EventTarget {
       const r = this.color_[0] / 255.0;
       const g = this.color_[1] / 255.0;
       const b = this.color_[2] / 255.0;
+      const a = this.color_[3];
 
       for (let i = 0, ii = data.length; i < ii; i += 4) {
         data[i] *= r;
         data[i + 1] *= g;
         data[i + 2] *= b;
+        data[i + 3] *= a;
       }
       ctx.putImageData(imgData, 0, 0);
     }