diff --git a/lib/mess/renderer.js b/lib/mess/renderer.js
index 1743c40..f32f942 100644
--- a/lib/mess/renderer.js
+++ b/lib/mess/renderer.js
@@ -410,7 +410,7 @@ mess.Renderer = function Renderer(env) {
             // referred to by url() constructs in styles
             var that = this,
                 env = _.extend({
-                    frames: [],
+                    frames: tree.Reference.color_frames(),
                     effects: [],
                     deferred_externals: []
                 }, that.env),
diff --git a/lib/mess/tree/reference.js b/lib/mess/tree/reference.js
index ac86bae..6a8d606 100644
--- a/lib/mess/tree/reference.js
+++ b/lib/mess/tree/reference.js
@@ -8,6 +8,21 @@ for (var i in tree.Reference.colors) {
     tree.Reference.colors[i] = new(tree.Color)(c);
 }
 
+tree.Reference.color_frames = function() {
+    var variables = tree.Reference.colors;
+    variables = Object.keys(variables).map(function (k) {
+        var value = variables[k];
+        if (!(value instanceof tree.Value)) {
+            if (!(value instanceof tree.Expression)) {
+                value = new(tree.Expression)([value]);
+            }
+            value = new(tree.Value)([value]);
+        }
+        return new(tree.Rule)('@' + k, value, false, 0);
+    });
+    return variables;
+};
+
 tree.Reference.required_prop_list_cache = {};
 
 tree.Reference.selectors = tree.Reference.selectors || (function() {
diff --git a/test/rendering/color_variable.mml b/test/rendering/color_variable.mml
new file mode 100644
index 0000000..93d9bef
--- /dev/null
+++ b/test/rendering/color_variable.mml
@@ -0,0 +1,15 @@
+{
+    "srs": "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs",
+    "Stylesheet": [
+        "color_variable.mss"
+    ],
+    "Layer": [{
+        "id": "world",
+        "name": "world",
+        "srs": "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs",
+        "Datasource": {
+            "file": "http://tilemill-data.s3.amazonaws.com/test_data/shape_demo.zip",
+            "type": "shape"
+        }
+    }]
+}
diff --git a/test/rendering/color_variable.mss b/test/rendering/color_variable.mss
new file mode 100644
index 0000000..dbdf176
--- /dev/null
+++ b/test/rendering/color_variable.mss
@@ -0,0 +1,3 @@
+#world {
+  polygon-fill: @green;
+}
diff --git a/test/rendering/color_variable.result b/test/rendering/color_variable.result
new file mode 100644
index 0000000..980f0ee
--- /dev/null
+++ b/test/rendering/color_variable.result
@@ -0,0 +1,24 @@
+downloading with binary
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE Map[]>
+<Map  srs="+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs">
+
+
+<Style name="world-polygon">
+  <Rule>
+    
+    <PolygonSymbolizer fill="#008000"/>
+  </Rule>
+</Style>
+<Layer
+   id="world"
+   name="world"
+   srs="+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs">
+    <StyleName>world-polygon</StyleName>
+    <Datasource>
+       <Parameter name="file">[absolute path]</Parameter>
+       <Parameter name="type">shape</Parameter>
+    </Datasource>
+  </Layer>
+
+</Map>