diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js
index 292604f106..4c230e9f30 100644
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -4,6 +4,7 @@
 goog.provide('ol.render.canvas.Immediate');
 
 goog.require('goog.asserts');
+goog.require('ol.color');
 goog.require('ol.extent');
 goog.require('ol.render.IRender');
 goog.require('ol.style.fill');
@@ -270,13 +271,13 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
   var state = this.state_;
   if (!ol.style.fill.equals(state.fillStyle, fillStyle)) {
     if (goog.isDefAndNotNull(fillStyle)) {
-      context.fillStyle = fillStyle.color;
+      context.fillStyle = ol.color.asString(fillStyle.color);
     }
     state.fillStyle = fillStyle;
   }
   if (!ol.style.stroke.equals(state.strokeStyle, strokeStyle)) {
     if (goog.isDefAndNotNull(strokeStyle)) {
-      context.strokeStyle = strokeStyle.color;
+      context.strokeStyle = ol.color.asString(strokeStyle.color);
       context.lineWidth = strokeStyle.width;
     }
     state.strokeStyle = strokeStyle;
diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js
index 53a756ecf3..ed9483efe3 100644
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -6,6 +6,7 @@ goog.provide('ol.render.canvas.ReplayGroup');
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.object');
+goog.require('ol.color');
 goog.require('ol.extent');
 goog.require('ol.geom.flat');
 goog.require('ol.render.IRender');
@@ -138,12 +139,12 @@ ol.render.canvas.Replay.prototype.draw = function(context, transform) {
     } else if (type == ol.render.canvas.Instruction.SET_FILL_STYLE) {
       goog.asserts.assert(goog.isObject(instruction[1]));
       var fillStyle = /** @type {ol.style.Fill} */ (instruction[1]);
-      context.fillStyle = fillStyle.color;
+      context.fillStyle = ol.color.asString(fillStyle.color);
       ++i;
     } else if (type == ol.render.canvas.Instruction.SET_STROKE_STYLE) {
       goog.asserts.assert(goog.isObject(instruction[1]));
       var strokeStyle = /** @type {ol.style.Stroke} */ (instruction[1]);
-      context.strokeStyle = strokeStyle.color;
+      context.strokeStyle = ol.color.asString(strokeStyle.color);
       context.lineWidth = strokeStyle.width;
       ++i;
     } else if (type == ol.render.canvas.Instruction.STROKE) {
diff --git a/src/ol/shape.js b/src/ol/shape.js
index 7eb2d3a7c0..d82372341c 100644
--- a/src/ol/shape.js
+++ b/src/ol/shape.js
@@ -6,6 +6,7 @@ goog.provide('ol.shape');
 
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('ol.color');
 goog.require('ol.style');
 
 
@@ -31,11 +32,11 @@ ol.shape.renderCircle = function(radius, fillStyle, strokeStyle) {
   context.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, true);
 
   if (goog.isDefAndNotNull(fillStyle)) {
-    context.fillStyle = fillStyle.color;
+    context.fillStyle = ol.color.asString(fillStyle.color);
     context.fill();
   }
   if (goog.isDefAndNotNull(strokeStyle)) {
-    context.strokeStyle = strokeStyle.color;
+    context.strokeStyle = ol.color.asString(strokeStyle.color);
     context.lineWidth = strokeStyle.width;
     context.stroke();
   }
diff --git a/src/ol/style.js b/src/ol/style.js
index f08a097c4c..7d996417b3 100644
--- a/src/ol/style.js
+++ b/src/ol/style.js
@@ -1,4 +1,3 @@
-// FIXME decide how to handle fill opacity
 // FIXME decide default value for snapToPixel
 
 goog.provide('ol.style');
@@ -9,10 +8,11 @@ goog.provide('ol.style.fill');
 goog.provide('ol.style.stroke');
 
 goog.require('goog.functions');
+goog.require('ol.color');
 
 
 /**
- * @typedef {{color: string}|null|undefined}
+ * @typedef {{color: (ol.Color|string)}|null|undefined}
  */
 ol.style.Fill;
 
@@ -25,7 +25,8 @@ ol.style.Fill;
 ol.style.fill.equals = function(fillStyle1, fillStyle2) {
   if (goog.isDefAndNotNull(fillStyle1)) {
     if (goog.isDefAndNotNull(fillStyle2)) {
-      return fillStyle1 === fillStyle2 || fillStyle1.color == fillStyle2.color;
+      return fillStyle1 === fillStyle2 ||
+          ol.color.stringOrColorEquals(fillStyle1.color, fillStyle2.color);
     } else {
       return false;
     }
@@ -50,7 +51,7 @@ ol.style.Image;
 
 
 /**
- * @typedef {{color: string,
+ * @typedef {{color: (ol.Color|string),
  *            width: number}|null|undefined}
  */
 ol.style.Stroke;
@@ -65,7 +66,8 @@ ol.style.stroke.equals = function(strokeStyle1, strokeStyle2) {
   if (goog.isDefAndNotNull(strokeStyle1)) {
     if (goog.isDefAndNotNull(strokeStyle2)) {
       return strokeStyle1 === strokeStyle2 ||
-          (strokeStyle1.color == strokeStyle2.color &&
+          (ol.color.stringOrColorEquals(strokeStyle1.color,
+                                        strokeStyle2.color) &&
            strokeStyle1.width == strokeStyle2.width);
     } else {
       return false;