diff --git a/src/index.js b/src/index.js
index e0d7312..6034ec0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import * as ReactColor from 'react-color';
 import get from 'lodash.get';
 import pure from 'recompose/pure';
+import InputAdornment from '@material-ui/core/InputAdornment';
 
 require('./ColorInput.css');
 
@@ -88,6 +89,17 @@ class ColorInputComponent extends React.Component {
           error={!!(touched && error)}
           helperText={touched && error || helperText}
           className={className}
+          InputProps={{
+            startAdornment: <InputAdornment position="start">
+              <div style={{
+                width: '20px',
+                height: '20px',
+                background: input.value,
+                marginRight: '5px',
+              }}
+              />
+            </InputAdornment>,
+          }}
         />
         {
           this.state.show?
@@ -133,4 +145,4 @@ ColorInputComponent.defaultProps = {
 };
 
 export const ColorField = PureTextField;
-export const ColorInput = addField(ColorInputComponent);
\ No newline at end of file
+export const ColorInput = addField(ColorInputComponent);