diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index aaecb16..143cf40 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -50,11 +50,20 @@ class ColorField extends React.Component {
   }
 
   get color() {
-    return Color(this.props.value || '#fff')
+    return Color(this.props.value || '#fff').rgb()
   }
 
   render() {
     const offset = this.calcPickerOffset()
+    var currentColor = this.color.object()
+    currentColor = {
+      r: currentColor.r,
+      g: currentColor.g,
+      b: currentColor.b,
+      // Rename alpha -> a for ChromePicker
+      a: currentColor.alpha
+    }
+
     const picker = <div
       className="maputnik-color-picker-offset"
       style={{
@@ -64,7 +73,7 @@ class ColorField extends React.Component {
         top: offset.top,
       }}>
       <ChromePicker
-        color={this.color.object()}
+        color={currentColor}
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div