diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index aaecb16..3f09246 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -81,8 +81,13 @@ class ColorField extends React.Component {
       />
     </div>
 
+    var swatchStyle = {
+      "background-color": this.props.value
+    };
+
     return <div className="maputnik-color-wrapper">
       {this.state.pickerOpened && picker}
+      <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
         className="maputnik-color"
         ref="colorInput"
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 49757e9..5c83434 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -30,7 +30,12 @@
 
 .maputnik-color-wrapper {
   position: relative;
-  display: inline;
+  @include flex-row;
+}
+
+.maputnik-color-swatch {
+  height: 26px;
+  width: 3px;
 }
 
 // ARRAY