diff --git a/src/ol/color.js b/src/ol/color.js
index 5d6286f6f9..368e23fdda 100644
--- a/src/ol/color.js
+++ b/src/ol/color.js
@@ -1,6 +1,7 @@
 goog.provide('ol.Color');
 
 goog.require('goog.color');
+goog.require('goog.math');
 
 
 
@@ -9,29 +10,29 @@ goog.require('goog.color');
  * @param {number} r Red, 0 to 255.
  * @param {number} g Green, 0 to 255.
  * @param {number} b Blue, 0 to 255.
- * @param {number} a Alpha, 0 (fully transparent) to 255 (fully opaque).
+ * @param {number} a Alpha, 0 (fully transparent) to 1 (fully opaque).
  */
 ol.Color = function(r, g, b, a) {
 
   /**
    * @type {number}
    */
-  this.r = r;
+  this.r = goog.math.clamp(r, 0, 255);
 
   /**
    * @type {number}
    */
-  this.g = g;
+  this.g = goog.math.clamp(g, 0, 255);
 
   /**
    * @type {number}
    */
-  this.b = b;
+  this.b = goog.math.clamp(b, 0, 255);
 
   /**
    * @type {number}
    */
-  this.a = a;
+  this.a = goog.math.clamp(a, 0, 1);
 
 };
 
diff --git a/src/ol/map.js b/src/ol/map.js
index cdd492f45a..a0400327e3 100644
--- a/src/ol/map.js
+++ b/src/ol/map.js
@@ -618,7 +618,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
     frameState = {
       animate: false,
       backgroundColor: goog.isDef(backgroundColor) ?
-          backgroundColor : new ol.Color(1, 1, 1, 1),
+          backgroundColor : new ol.Color(255, 255, 255, 1),
       coordinateToPixelMatrix: this.coordinateToPixelMatrix_,
       extent: null,
       layersArray: layersArray,
diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js
index b664dc977a..2798b18c62 100644
--- a/src/ol/renderer/canvas/canvasmaprenderer.js
+++ b/src/ol/renderer/canvas/canvasmaprenderer.js
@@ -138,7 +138,7 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
       backgroundColor.r.toFixed(0) + ',' +
       backgroundColor.g.toFixed(0) + ',' +
       backgroundColor.b.toFixed(0) + ')';
-  context.globalAlpha = 1;
+  context.globalAlpha = backgroundColor.a;
   context.fillRect(0, 0, size.width, size.height);
 
   goog.array.forEach(frameState.layersArray, function(layer) {
diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js
index 3a071a686e..6e2e6c3990 100644
--- a/src/ol/renderer/webgl/webglmaprenderer.js
+++ b/src/ol/renderer/webgl/webglmaprenderer.js
@@ -490,7 +490,8 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
 
   var clearColor = frameState.backgroundColor;
-  gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+  gl.clearColor(clearColor.r / 255, clearColor.g / 255,
+      clearColor.b / 255, clearColor.a);
   gl.clear(goog.webgl.COLOR_BUFFER_BIT);
   gl.enable(goog.webgl.BLEND);
   gl.viewport(0, 0, size.width, size.height);
diff --git a/test/ol.html b/test/ol.html
index 9c00d22ecd..b0e05e2f6d 100644
--- a/test/ol.html
+++ b/test/ol.html
@@ -72,6 +72,7 @@
   <!-- include spec files here... -->
   <script type="text/javascript" src="spec/ol/array.test.js"></script>
   <script type="text/javascript" src="spec/ol/collection.test.js"></script>
+  <script type="text/javascript" src="spec/ol/color.test.js"></script>
   <script type="text/javascript" src="spec/ol/extent.test.js"></script>
   <script type="text/javascript" src="spec/ol/map.test.js"></script>
   <script type="text/javascript" src="spec/ol/object.test.js"></script>
diff --git a/test/spec/ol/color.test.js b/test/spec/ol/color.test.js
new file mode 100644
index 0000000000..157a64788a
--- /dev/null
+++ b/test/spec/ol/color.test.js
@@ -0,0 +1,73 @@
+describe('ol.Color', function() {
+
+  describe('constructor', function() {
+
+    it('limits r to 0-255', function() {
+      var c;
+
+      // legit r
+      c = new ol.Color(10.5, 11, 12, 0.5);
+      expect(c.r).toBe(10.5);
+
+      // under r
+      c = new ol.Color(-10, 11, 12, 0.5);
+      expect(c.r).toBe(0);
+
+      // over r
+      c = new ol.Color(300, 11, 12, 0.5);
+      expect(c.r).toBe(255);
+    });
+
+    it('limits g to 0-255', function() {
+      var c;
+
+      // legit g
+      c = new ol.Color(10, 11.5, 12, 0.5);
+      expect(c.g).toBe(11.5);
+
+      // under g
+      c = new ol.Color(10, -11, 12, 0.5);
+      expect(c.g).toBe(0);
+
+      // over g
+      c = new ol.Color(10, 275, 12, 0.5);
+      expect(c.g).toBe(255);
+    });
+
+    it('limits b to 0-255', function() {
+      var c;
+
+      // legit b
+      c = new ol.Color(10, 11, 12.5, 0.5);
+      expect(c.b).toBe(12.5);
+
+      // under b
+      c = new ol.Color(10, 11, -12, 0.5);
+      expect(c.b).toBe(0);
+
+      // over b
+      c = new ol.Color(10, 11, 500, 0.5);
+      expect(c.b).toBe(255);
+    });
+
+    it('limits 1 to 0-1', function() {
+      var c;
+
+      // legit a
+      c = new ol.Color(10, 11, 12, 0.5);
+      expect(c.a).toBe(0.5);
+
+      // under a
+      c = new ol.Color(10, 11, 12, -0.5);
+      expect(c.a).toBe(0);
+
+      // over a
+      c = new ol.Color(10, 11, 12, 2.5);
+      expect(c.a).toBe(1);
+    });
+
+  });
+
+});
+
+goog.require('ol.array');