diff --git a/src/ol/color.js b/src/ol/color/color.js
similarity index 98%
rename from src/ol/color.js
rename to src/ol/color/color.js
index 39d7edbf93..05899b7ede 100644
--- a/src/ol/color.js
+++ b/src/ol/color/color.js
@@ -3,8 +3,6 @@
 // causes occasional loss of precision and rounding errors, especially in the
 // alpha channel.
 
-// FIXME move the color matrix code from ol.renderer.webgl.Layer to here
-
 goog.provide('ol.color');
 
 goog.require('goog.array');
diff --git a/src/ol/color/colormatrix.js b/src/ol/color/colormatrix.js
new file mode 100644
index 0000000000..ac947263fc
--- /dev/null
+++ b/src/ol/color/colormatrix.js
@@ -0,0 +1,205 @@
+goog.provide('ol.color.Matrix');
+
+goog.require('goog.vec.Mat4');
+
+
+
+/**
+ * @constructor
+ */
+ol.color.Matrix = function() {
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.colorMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.brightness_ = undefined;
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.brightnessMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.contrast_ = undefined;
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.contrastMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.hue_ = undefined;
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.hueMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.saturation_ = undefined;
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.saturationMatrix_ = goog.vec.Mat4.createNumber();
+
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Number} matrix Matrix.
+ * @param {number} value Brightness value.
+ * @return {!goog.vec.Mat4.Number} Matrix.
+ */
+ol.color.Matrix.makeBrightness = function(matrix, value) {
+  goog.vec.Mat4.makeTranslate(matrix, value, value, value);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Number} matrix Matrix.
+ * @param {number} value Contrast value.
+ * @return {!goog.vec.Mat4.Number} Matrix.
+ */
+ol.color.Matrix.makeContrast = function(matrix, value) {
+  goog.vec.Mat4.makeScale(matrix, value, value, value);
+  var translateValue = (-0.5 * value + 0.5);
+  goog.vec.Mat4.setColumnValues(matrix, 3,
+      translateValue, translateValue, translateValue, 1);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Number} matrix Matrix.
+ * @param {number} value Hue value.
+ * @return {!goog.vec.Mat4.Number} Matrix.
+ */
+ol.color.Matrix.makeHue = function(matrix, value) {
+  var cosHue = Math.cos(value);
+  var sinHue = Math.sin(value);
+  var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
+  var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
+  var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
+  var v03 = 0;
+  var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
+  var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
+  var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
+  var v13 = 0;
+  var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
+  var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
+  var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
+  var v23 = 0;
+  var v30 = 0;
+  var v31 = 0;
+  var v32 = 0;
+  var v33 = 1;
+  goog.vec.Mat4.setFromValues(matrix,
+      v00, v10, v20, v30,
+      v01, v11, v21, v31,
+      v02, v12, v22, v32,
+      v03, v13, v23, v33);
+  return matrix;
+};
+
+
+/**
+ * @param {!goog.vec.Mat4.Number} matrix Matrix.
+ * @param {number} value Saturation value.
+ * @return {!goog.vec.Mat4.Number} Matrix.
+ */
+ol.color.Matrix.makeSaturation = function(matrix, value) {
+  var v00 = 0.213 + 0.787 * value;
+  var v01 = 0.715 - 0.715 * value;
+  var v02 = 0.072 - 0.072 * value;
+  var v03 = 0;
+  var v10 = 0.213 - 0.213 * value;
+  var v11 = 0.715 + 0.285 * value;
+  var v12 = 0.072 - 0.072 * value;
+  var v13 = 0;
+  var v20 = 0.213 - 0.213 * value;
+  var v21 = 0.715 - 0.715 * value;
+  var v22 = 0.072 + 0.928 * value;
+  var v23 = 0;
+  var v30 = 0;
+  var v31 = 0;
+  var v32 = 0;
+  var v33 = 1;
+  goog.vec.Mat4.setFromValues(matrix,
+      v00, v10, v20, v30,
+      v01, v11, v21, v31,
+      v02, v12, v22, v32,
+      v03, v13, v23, v33);
+  return matrix;
+};
+
+
+/**
+ * @param {number|undefined} brightness Brightness.
+ * @param {number|undefined} contrast Contrast.
+ * @param {number|undefined} hue Hue.
+ * @param {number|undefined} saturation Saturation.
+ * @return {!goog.vec.Mat4.Number} Matrix.
+ */
+ol.color.Matrix.prototype.getMatrix = function(
+    brightness, contrast, hue, saturation) {
+  var colorMatrixDirty = false;
+  if (goog.isDef(brightness) && brightness !== this.brightness_) {
+    ol.color.Matrix.makeBrightness(this.brightnessMatrix_, brightness);
+    this.brightness_ = brightness;
+    colorMatrixDirty = true;
+  }
+  if (goog.isDef(contrast) && contrast !== this.contrast_) {
+    ol.color.Matrix.makeContrast(this.contrastMatrix_, contrast);
+    this.contrast_ = contrast;
+    colorMatrixDirty = true;
+  }
+  if (goog.isDef(hue) && hue !== this.hue_) {
+    ol.color.Matrix.makeHue(this.hueMatrix_, hue);
+    this.hue_ = hue;
+    colorMatrixDirty = true;
+  }
+  if (goog.isDef(saturation) && saturation !== this.saturation_) {
+    ol.color.Matrix.makeSaturation(this.saturationMatrix_, saturation);
+    this.saturation_ = saturation;
+    colorMatrixDirty = true;
+  }
+  if (colorMatrixDirty) {
+    var colorMatrix = this.colorMatrix_;
+    goog.vec.Mat4.makeIdentity(colorMatrix);
+    if (goog.isDef(contrast)) {
+      goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
+    }
+    if (goog.isDef(brightness)) {
+      goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
+    }
+    if (goog.isDef(saturation)) {
+      goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
+    }
+    if (goog.isDef(hue)) {
+      goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
+    }
+  }
+  return this.colorMatrix_;
+};
diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js
index ede80c9611..2888c99f54 100644
--- a/src/ol/renderer/webgl/webgllayerrenderer.js
+++ b/src/ol/renderer/webgl/webgllayerrenderer.js
@@ -1,15 +1,13 @@
-// FIXME move colorMatrix_ elsewhere?
-
 goog.provide('ol.renderer.webgl.Layer');
 
 goog.require('goog.vec.Mat4');
 goog.require('goog.webgl');
 goog.require('ol.FrameState');
+goog.require('ol.color.Matrix');
 goog.require('ol.layer.Layer');
 goog.require('ol.renderer.Layer');
 goog.require('ol.renderer.webgl.map.shader.Color');
 goog.require('ol.renderer.webgl.map.shader.Default');
-goog.require('ol.vec.Mat4');
 
 
 
@@ -55,57 +53,9 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
 
   /**
    * @private
-   * @type {!goog.vec.Mat4.Float32}
+   * @type {ol.color.Matrix}
    */
-  this.colorMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.brightness_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.brightnessMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.contrast_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.contrastMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.hue_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.hueMatrix_ = goog.vec.Mat4.createFloat32();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.saturation_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Float32}
-   */
-  this.saturationMatrix_ = goog.vec.Mat4.createFloat32();
+  this.colorMatrix_ = new ol.color.Matrix();
 
   /**
    * @private
@@ -241,7 +191,7 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
       this.getProjectionMatrix());
   if (useColor) {
     gl.uniformMatrix4fv(locations.u_colorMatrix, false,
-        this.getColorMatrix(
+        this.colorMatrix_.getMatrix(
             layerState.brightness,
             layerState.contrast,
             layerState.hue,
@@ -255,43 +205,6 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
 };
 
 
-/**
- * @param {number} brightness Brightness.
- * @param {number} contrast Contrast.
- * @param {number} hue Hue.
- * @param {number} saturation Saturation.
- * @return {!goog.vec.Mat4.Float32} Color matrix.
- */
-ol.renderer.webgl.Layer.prototype.getColorMatrix = function(
-    brightness, contrast, hue, saturation) {
-  var colorMatrixDirty = false;
-  if (brightness !== this.brightness_) {
-    ol.vec.Mat4.makeBrightness(this.brightnessMatrix_, brightness);
-    this.brightness_ = brightness;
-    colorMatrixDirty = true;
-  }
-  if (contrast !== this.contrast_) {
-    ol.vec.Mat4.makeContrast(this.contrastMatrix_, contrast);
-    this.contrast_ = contrast;
-    colorMatrixDirty = true;
-  }
-  if (hue !== this.hue_) {
-    ol.vec.Mat4.makeHue(this.hueMatrix_, hue);
-    this.hue_ = hue;
-    colorMatrixDirty = true;
-  }
-  if (saturation !== this.saturation_) {
-    ol.vec.Mat4.makeSaturation(this.saturationMatrix_, saturation);
-    this.saturation_ = saturation;
-    colorMatrixDirty = true;
-  }
-  if (colorMatrixDirty) {
-    this.updateColorMatrix_();
-  }
-  return this.colorMatrix_;
-};
-
-
 /**
  * @protected
  * @return {ol.renderer.webgl.Map} MapRenderer.
@@ -333,16 +246,3 @@ ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = function() {
   this.framebuffer = null;
   this.framebufferDimension = undefined;
 };
-
-
-/**
- * @private
- */
-ol.renderer.webgl.Layer.prototype.updateColorMatrix_ = function() {
-  var colorMatrix = this.colorMatrix_;
-  goog.vec.Mat4.makeIdentity(colorMatrix);
-  goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
-  goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
-  goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
-  goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
-};
diff --git a/src/ol/vec/mat4.js b/src/ol/vec/mat4.js
index c6dae319a1..2893b505d0 100644
--- a/src/ol/vec/mat4.js
+++ b/src/ol/vec/mat4.js
@@ -3,95 +3,6 @@ goog.provide('ol.vec.Mat4');
 goog.require('goog.vec.Mat4');
 
 
-/**
- * @param {!goog.vec.Mat4.Float32} matrix Matrix.
- * @param {number} value Brightness value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.vec.Mat4.makeBrightness = function(matrix, value) {
-  goog.vec.Mat4.makeTranslate(matrix, value, value, value);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Float32} matrix Matrix.
- * @param {number} value Contrast value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.vec.Mat4.makeContrast = function(matrix, value) {
-  goog.vec.Mat4.makeScale(matrix, value, value, value);
-  var translateValue = (-0.5 * value + 0.5);
-  goog.vec.Mat4.setColumnValues(matrix, 3,
-      translateValue, translateValue, translateValue, 1);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Float32} matrix Matrix.
- * @param {number} value Hue value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.vec.Mat4.makeHue = function(matrix, value) {
-  var cosHue = Math.cos(value);
-  var sinHue = Math.sin(value);
-  var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
-  var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
-  var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
-  var v03 = 0;
-  var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
-  var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
-  var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
-  var v13 = 0;
-  var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
-  var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
-  var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Float32} matrix Matrix.
- * @param {number} value Saturation value.
- * @return {!goog.vec.Mat4.Float32} Matrix.
- */
-ol.vec.Mat4.makeSaturation = function(matrix, value) {
-  var v00 = 0.213 + 0.787 * value;
-  var v01 = 0.715 - 0.715 * value;
-  var v02 = 0.072 - 0.072 * value;
-  var v03 = 0;
-  var v10 = 0.213 - 0.213 * value;
-  var v11 = 0.715 + 0.285 * value;
-  var v12 = 0.072 - 0.072 * value;
-  var v13 = 0;
-  var v20 = 0.213 - 0.213 * value;
-  var v21 = 0.715 - 0.715 * value;
-  var v22 = 0.072 + 0.928 * value;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-};
-
-
 /**
  * Transforms the given vector with the given matrix storing the resulting,
  * transformed vector into resultVec. The input vector is multiplied against the