diff --git a/src/EthAddress/__snapshots__/EthAddress.test.js.snap b/src/EthAddress/__snapshots__/EthAddress.test.js.snap
index 58dd4d01..4686e1ce 100644
--- a/src/EthAddress/__snapshots__/EthAddress.test.js.snap
+++ b/src/EthAddress/__snapshots__/EthAddress.test.js.snap
@@ -336,6 +336,44 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -789,6 +827,44 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -1216,6 +1292,44 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -1669,6 +1783,44 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
diff --git a/src/Field/__snapshots__/Field.test.js.snap b/src/Field/__snapshots__/Field.test.js.snap
index 4f98a7f3..6db4cf5c 100644
--- a/src/Field/__snapshots__/Field.test.js.snap
+++ b/src/Field/__snapshots__/Field.test.js.snap
@@ -76,6 +76,44 @@ exports[`Field component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c4[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c4[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c4:valid {
   border-color: #28C081;
 }
@@ -190,6 +228,44 @@ exports[`Field component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c4[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c4[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c4:valid {
   border-color: #28C081;
 }
diff --git a/src/Form/__snapshots__/form.test.js.snap b/src/Form/__snapshots__/form.test.js.snap
index 63a2984e..43c4d5ae 100644
--- a/src/Form/__snapshots__/form.test.js.snap
+++ b/src/Form/__snapshots__/form.test.js.snap
@@ -115,6 +115,44 @@ exports[`Form component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c6[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c6[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c6:valid {
   border-color: #28C081;
 }
@@ -483,6 +521,44 @@ exports[`Form component sanity renders children elements 1`] = `
   pointer-events: none;
 }
 
+.c6[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c6[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c6:valid {
   border-color: #28C081;
 }
diff --git a/src/Input/__snapshots__/Input.test.js.snap b/src/Input/__snapshots__/Input.test.js.snap
index 3302a5a9..98f4836d 100644
--- a/src/Input/__snapshots__/Input.test.js.snap
+++ b/src/Input/__snapshots__/Input.test.js.snap
@@ -36,6 +36,44 @@ exports[`Input component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c0:valid {
   border-color: #28C081;
 }
@@ -97,6 +135,44 @@ exports[`Input component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c0:valid {
   border-color: #28C081;
 }
diff --git a/src/Input/index.js b/src/Input/index.js
index 03c7d59b..01c240d3 100644
--- a/src/Input/index.js
+++ b/src/Input/index.js
@@ -38,6 +38,30 @@ const StyledInput = styled.input`
     pointer-events: none;
   }
 
+  &[type="color"] {
+    min-width: 3rem;
+    padding: 0;
+    &::-webkit-color-swatch-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+    &::-webkit-color-swatch {
+      flex: 0 0 auto;
+      height: 2rem;
+      width: 2rem;
+      border: none;
+      border-radius: 100%;
+    }
+    &::-moz-color-swatch {
+      height: 2rem;
+      width: 2rem;
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
   .was-validated & {
     &:valid {
       border-color: ${themeGet('colors.success')};
diff --git a/src/Select/__snapshots__/Select.test.js.snap b/src/Select/__snapshots__/Select.test.js.snap
index 82c22b0a..f6b90e8c 100644
--- a/src/Select/__snapshots__/Select.test.js.snap
+++ b/src/Select/__snapshots__/Select.test.js.snap
@@ -344,6 +344,44 @@ exports[`Select component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
diff --git a/src/Textarea/__snapshots__/Textarea.test.js.snap b/src/Textarea/__snapshots__/Textarea.test.js.snap
index c8212850..e4c4c161 100644
--- a/src/Textarea/__snapshots__/Textarea.test.js.snap
+++ b/src/Textarea/__snapshots__/Textarea.test.js.snap
@@ -36,6 +36,44 @@ exports[`Textarea component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c0:valid {
   border-color: #28C081;
 }
@@ -97,6 +135,44 @@ exports[`Textarea component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c0:valid {
   border-color: #28C081;
 }