diff --git a/src/components/block/__snapshots__/spec.js.snap b/src/components/block/__snapshots__/spec.js.snap
index 8affe493..89c54b04 100644
--- a/src/components/block/__snapshots__/spec.js.snap
+++ b/src/components/block/__snapshots__/spec.js.snap
@@ -24,7 +24,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
   <div
     style={
       Object {
-        "borderColor": "transparent transparent #22194d transparent",
+        "borderColor": "transparent transparent #22194dff transparent",
         "borderStyle": "solid",
         "borderWidth": "0 10px 10px 10px",
         "display": "none",
@@ -45,7 +45,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         "WebkitBorderRadius": "6px 6px 0 0",
         "WebkitJustifyContent": "center",
         "alignItems": "center",
-        "background": "#22194d",
+        "background": "#22194dff",
         "borderRadius": "6px 6px 0 0",
         "display": "flex",
         "height": "110px",
@@ -64,7 +64,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
         }
       }
     >
-      #22194d
+      #22194dff
     </div>
   </div>
   <div
@@ -386,7 +386,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
             "width": "100%",
           }
         }
-        value="#22194D"
+        value="#22194DFF"
       />
     </div>
   </div>
@@ -417,7 +417,7 @@ exports[`Block renders correctly 1`] = `
   <div
     style={
       Object {
-        "borderColor": "transparent transparent #22194d transparent",
+        "borderColor": "transparent transparent #22194dff transparent",
         "borderStyle": "solid",
         "borderWidth": "0 10px 10px 10px",
         "height": "0px",
@@ -437,7 +437,7 @@ exports[`Block renders correctly 1`] = `
         "WebkitBorderRadius": "6px 6px 0 0",
         "WebkitJustifyContent": "center",
         "alignItems": "center",
-        "background": "#22194d",
+        "background": "#22194dff",
         "borderRadius": "6px 6px 0 0",
         "display": "flex",
         "height": "110px",
@@ -456,7 +456,7 @@ exports[`Block renders correctly 1`] = `
         }
       }
     >
-      #22194d
+      #22194dff
     </div>
   </div>
   <div
@@ -778,7 +778,7 @@ exports[`Block renders correctly 1`] = `
             "width": "100%",
           }
         }
-        value="#22194D"
+        value="#22194DFF"
       />
     </div>
   </div>
diff --git a/src/components/chrome/__snapshots__/spec.js.snap b/src/components/chrome/__snapshots__/spec.js.snap
index 55eb79d4..62e3676e 100644
--- a/src/components/chrome/__snapshots__/spec.js.snap
+++ b/src/components/chrome/__snapshots__/spec.js.snap
@@ -544,7 +544,7 @@ exports[`Chrome renders correctly 1`] = `
                   "width": "100%",
                 }
               }
-              value="#22194D"
+              value="#22194DFF"
             />
             <label
               htmlFor="rc-editable-input-1"
diff --git a/src/components/compact/CompactFields.js b/src/components/compact/CompactFields.js
index 163edaaa..96560e01 100644
--- a/src/components/compact/CompactFields.js
+++ b/src/components/compact/CompactFields.js
@@ -39,7 +39,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
         display: 'none',
       },
       RGBwrap: {
-        flex: '3',
+        flex: '2',
         position: 'relative',
       },
       RGBinput: {
@@ -57,7 +57,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
         position: 'absolute',
         top: '3px',
         left: '0px',
-        lineHeight: '16px',
+        lineHeight: '14px',
         textTransform: 'uppercase',
         fontSize: '12px',
         color: '#999',
@@ -108,6 +108,12 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
         value={ rgb.b }
         onChange={ handleChange }
       />
+      <EditableInput
+        style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
+        label="a"
+        value={ rgb.a }
+        onChange={ handleChange }
+      />
     </div>
   )
 }
diff --git a/src/components/compact/__snapshots__/spec.js.snap b/src/components/compact/__snapshots__/spec.js.snap
index 008bb4c4..3be26947 100644
--- a/src/components/compact/__snapshots__/spec.js.snap
+++ b/src/components/compact/__snapshots__/spec.js.snap
@@ -1625,7 +1625,7 @@ exports[`Compact renders correctly 1`] = `
         <div
           style={
             Object {
-              "background": "#22194d",
+              "background": "#22194dff",
               "height": "9px",
               "left": "5px",
               "position": "absolute",
@@ -1666,7 +1666,7 @@ exports[`Compact renders correctly 1`] = `
                 "width": "80%",
               }
             }
-            value="#22194D"
+            value="#22194DFF"
           />
           <label
             htmlFor="rc-editable-input-1"
@@ -1683,11 +1683,11 @@ exports[`Compact renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
@@ -1722,7 +1722,7 @@ exports[`Compact renders correctly 1`] = `
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -1735,11 +1735,11 @@ exports[`Compact renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
@@ -1774,7 +1774,7 @@ exports[`Compact renders correctly 1`] = `
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -1787,11 +1787,11 @@ exports[`Compact renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
@@ -1826,7 +1826,7 @@ exports[`Compact renders correctly 1`] = `
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -1836,6 +1836,58 @@ exports[`Compact renders correctly 1`] = `
             b
           </label>
         </div>
+        <div
+          style={
+            Object {
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
+              "position": "relative",
+            }
+          }
+        >
+          <input
+            id="rc-editable-input-5"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onKeyDown={[Function]}
+            placeholder={undefined}
+            spellCheck="false"
+            style={
+              Object {
+                "background": "none",
+                "border": "none",
+                "color": "#333",
+                "fontSize": "12px",
+                "height": "16px",
+                "outline": "none",
+                "padding": "0px",
+                "paddingLeft": "30%",
+                "width": "70%",
+              }
+            }
+            value="1"
+          />
+          <label
+            htmlFor="rc-editable-input-5"
+            onMouseDown={[Function]}
+            style={
+              Object {
+                "color": "#999",
+                "fontSize": "12px",
+                "left": "0px",
+                "lineHeight": "14px",
+                "position": "absolute",
+                "textTransform": "uppercase",
+                "top": "3px",
+              }
+            }
+          >
+            a
+          </label>
+        </div>
       </div>
     </div>
   </div>
@@ -3503,7 +3555,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
         <div
           style={
             Object {
-              "background": "#22194d",
+              "background": "#22194dff",
               "height": "9px",
               "left": "5px",
               "position": "absolute",
@@ -3525,7 +3577,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
           }
         >
           <input
-            id="rc-editable-input-5"
+            id="rc-editable-input-6"
             onBlur={[Function]}
             onChange={[Function]}
             onKeyDown={[Function]}
@@ -3544,10 +3596,10 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
                 "width": "80%",
               }
             }
-            value="#22194D"
+            value="#22194DFF"
           />
           <label
-            htmlFor="rc-editable-input-5"
+            htmlFor="rc-editable-input-6"
             onMouseDown={[Function]}
             style={
               Object {
@@ -3561,17 +3613,17 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
         >
           <input
-            id="rc-editable-input-6"
+            id="rc-editable-input-7"
             onBlur={[Function]}
             onChange={[Function]}
             onKeyDown={[Function]}
@@ -3593,14 +3645,14 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             value="34"
           />
           <label
-            htmlFor="rc-editable-input-6"
+            htmlFor="rc-editable-input-7"
             onMouseDown={[Function]}
             style={
               Object {
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -3613,17 +3665,17 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
         >
           <input
-            id="rc-editable-input-7"
+            id="rc-editable-input-8"
             onBlur={[Function]}
             onChange={[Function]}
             onKeyDown={[Function]}
@@ -3645,14 +3697,14 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             value="25"
           />
           <label
-            htmlFor="rc-editable-input-7"
+            htmlFor="rc-editable-input-8"
             onMouseDown={[Function]}
             style={
               Object {
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -3665,17 +3717,17 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
         <div
           style={
             Object {
-              "MozBoxFlex": "3",
-              "WebkitBoxFlex": "3",
-              "WebkitFlex": "3",
-              "flex": "3",
-              "msFlex": "3",
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
               "position": "relative",
             }
           }
         >
           <input
-            id="rc-editable-input-8"
+            id="rc-editable-input-9"
             onBlur={[Function]}
             onChange={[Function]}
             onKeyDown={[Function]}
@@ -3697,14 +3749,14 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             value="77"
           />
           <label
-            htmlFor="rc-editable-input-8"
+            htmlFor="rc-editable-input-9"
             onMouseDown={[Function]}
             style={
               Object {
                 "color": "#999",
                 "fontSize": "12px",
                 "left": "0px",
-                "lineHeight": "16px",
+                "lineHeight": "14px",
                 "position": "absolute",
                 "textTransform": "uppercase",
                 "top": "3px",
@@ -3714,6 +3766,58 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
             b
           </label>
         </div>
+        <div
+          style={
+            Object {
+              "MozBoxFlex": "2",
+              "WebkitBoxFlex": "2",
+              "WebkitFlex": "2",
+              "flex": "2",
+              "msFlex": "2",
+              "position": "relative",
+            }
+          }
+        >
+          <input
+            id="rc-editable-input-10"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onKeyDown={[Function]}
+            placeholder={undefined}
+            spellCheck="false"
+            style={
+              Object {
+                "background": "none",
+                "border": "none",
+                "color": "#333",
+                "fontSize": "12px",
+                "height": "16px",
+                "outline": "none",
+                "padding": "0px",
+                "paddingLeft": "30%",
+                "width": "70%",
+              }
+            }
+            value="1"
+          />
+          <label
+            htmlFor="rc-editable-input-10"
+            onMouseDown={[Function]}
+            style={
+              Object {
+                "color": "#999",
+                "fontSize": "12px",
+                "left": "0px",
+                "lineHeight": "14px",
+                "position": "absolute",
+                "textTransform": "uppercase",
+                "top": "3px",
+              }
+            }
+          >
+            a
+          </label>
+        </div>
       </div>
     </div>
   </div>
@@ -3803,7 +3907,7 @@ exports[`CompactFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-17"
+      id="rc-editable-input-21"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -3825,7 +3929,7 @@ exports[`CompactFields renders correctly 1`] = `
       value="#FF0000"
     />
     <label
-      htmlFor="rc-editable-input-17"
+      htmlFor="rc-editable-input-21"
       onMouseDown={[Function]}
       style={
         Object {
@@ -3839,17 +3943,17 @@ exports[`CompactFields renders correctly 1`] = `
   <div
     style={
       Object {
-        "MozBoxFlex": "3",
-        "WebkitBoxFlex": "3",
-        "WebkitFlex": "3",
-        "flex": "3",
-        "msFlex": "3",
+        "MozBoxFlex": "2",
+        "WebkitBoxFlex": "2",
+        "WebkitFlex": "2",
+        "flex": "2",
+        "msFlex": "2",
         "position": "relative",
       }
     }
   >
     <input
-      id="rc-editable-input-18"
+      id="rc-editable-input-22"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -3871,14 +3975,14 @@ exports[`CompactFields renders correctly 1`] = `
       value="255"
     />
     <label
-      htmlFor="rc-editable-input-18"
+      htmlFor="rc-editable-input-22"
       onMouseDown={[Function]}
       style={
         Object {
           "color": "#999",
           "fontSize": "12px",
           "left": "0px",
-          "lineHeight": "16px",
+          "lineHeight": "14px",
           "position": "absolute",
           "textTransform": "uppercase",
           "top": "3px",
@@ -3891,17 +3995,17 @@ exports[`CompactFields renders correctly 1`] = `
   <div
     style={
       Object {
-        "MozBoxFlex": "3",
-        "WebkitBoxFlex": "3",
-        "WebkitFlex": "3",
-        "flex": "3",
-        "msFlex": "3",
+        "MozBoxFlex": "2",
+        "WebkitBoxFlex": "2",
+        "WebkitFlex": "2",
+        "flex": "2",
+        "msFlex": "2",
         "position": "relative",
       }
     }
   >
     <input
-      id="rc-editable-input-19"
+      id="rc-editable-input-23"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -3923,14 +4027,14 @@ exports[`CompactFields renders correctly 1`] = `
       value="0"
     />
     <label
-      htmlFor="rc-editable-input-19"
+      htmlFor="rc-editable-input-23"
       onMouseDown={[Function]}
       style={
         Object {
           "color": "#999",
           "fontSize": "12px",
           "left": "0px",
-          "lineHeight": "16px",
+          "lineHeight": "14px",
           "position": "absolute",
           "textTransform": "uppercase",
           "top": "3px",
@@ -3943,17 +4047,17 @@ exports[`CompactFields renders correctly 1`] = `
   <div
     style={
       Object {
-        "MozBoxFlex": "3",
-        "WebkitBoxFlex": "3",
-        "WebkitFlex": "3",
-        "flex": "3",
-        "msFlex": "3",
+        "MozBoxFlex": "2",
+        "WebkitBoxFlex": "2",
+        "WebkitFlex": "2",
+        "flex": "2",
+        "msFlex": "2",
         "position": "relative",
       }
     }
   >
     <input
-      id="rc-editable-input-20"
+      id="rc-editable-input-24"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -3975,14 +4079,14 @@ exports[`CompactFields renders correctly 1`] = `
       value="0"
     />
     <label
-      htmlFor="rc-editable-input-20"
+      htmlFor="rc-editable-input-24"
       onMouseDown={[Function]}
       style={
         Object {
           "color": "#999",
           "fontSize": "12px",
           "left": "0px",
-          "lineHeight": "16px",
+          "lineHeight": "14px",
           "position": "absolute",
           "textTransform": "uppercase",
           "top": "3px",
@@ -3992,5 +4096,57 @@ exports[`CompactFields renders correctly 1`] = `
       b
     </label>
   </div>
+  <div
+    style={
+      Object {
+        "MozBoxFlex": "2",
+        "WebkitBoxFlex": "2",
+        "WebkitFlex": "2",
+        "flex": "2",
+        "msFlex": "2",
+        "position": "relative",
+      }
+    }
+  >
+    <input
+      id="rc-editable-input-25"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      placeholder={undefined}
+      spellCheck="false"
+      style={
+        Object {
+          "background": "none",
+          "border": "none",
+          "color": "#333",
+          "fontSize": "12px",
+          "height": "16px",
+          "outline": "none",
+          "padding": "0px",
+          "paddingLeft": "30%",
+          "width": "70%",
+        }
+      }
+      value="1"
+    />
+    <label
+      htmlFor="rc-editable-input-25"
+      onMouseDown={[Function]}
+      style={
+        Object {
+          "color": "#999",
+          "fontSize": "12px",
+          "left": "0px",
+          "lineHeight": "14px",
+          "position": "absolute",
+          "textTransform": "uppercase",
+          "top": "3px",
+        }
+      }
+    >
+      a
+    </label>
+  </div>
 </div>
 `;
diff --git a/src/components/google/GoogleFields.js b/src/components/google/GoogleFields.js
index e0457b8f..7f390430 100644
--- a/src/components/google/GoogleFields.js
+++ b/src/components/google/GoogleFields.js
@@ -138,7 +138,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
     },
   })
 
-  const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }`
+  const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ Math.round(rgb.a * 100) }%`
   const hslValue = `${ Math.round(hsl.h) }°, ${ Math.round(hsl.s * 100) }%, ${ Math.round(hsl.l * 100) }%`
   const hsvValue = `${ Math.round(hsv.h) }°, ${ Math.round(hsv.s * 100) }%, ${ Math.round(hsv.v * 100) }%`
 
diff --git a/src/components/google/__snapshots__/spec.js.snap b/src/components/google/__snapshots__/spec.js.snap
index 46056e21..204293bc 100644
--- a/src/components/google/__snapshots__/spec.js.snap
+++ b/src/components/google/__snapshots__/spec.js.snap
@@ -338,7 +338,7 @@ exports[`Google renders correctly 1`] = `
                   "width": "100%",
                 }
               }
-              value="#22194D"
+              value="#22194DFF"
             />
             <label
               htmlFor="rc-editable-input-1"
@@ -415,7 +415,7 @@ exports[`Google renders correctly 1`] = `
                     "width": "100%",
                   }
                 }
-                value="34, 25, 77"
+                value="34, 25, 77, 100%"
               />
               <label
                 htmlFor="rc-editable-input-2"
@@ -710,7 +710,7 @@ exports[`GoogleFields renders correctly 1`] = `
                 "width": "100%",
               }
             }
-            value="255, 0, 0"
+            value="255, 0, 0, 100%"
           />
           <label
             htmlFor="rc-editable-input-10"
diff --git a/src/components/material/Material.js b/src/components/material/Material.js
index b767d180..da22a5ec 100644
--- a/src/components/material/Material.js
+++ b/src/components/material/Material.js
@@ -48,7 +48,7 @@ export const Material = ({ onChange, hex, rgb,
       RGBinput: {
         width: '100%',
         marginTop: '12px',
-        fontSize: '15px',
+        fontSize: '12px',
         color: '#333',
         padding: '0px',
         border: '0px',
@@ -69,9 +69,9 @@ export const Material = ({ onChange, hex, rgb,
         marginRight: '-10px',
         paddingTop: '11px',
       },
-      third: {
+      fourth: {
         flex: '1',
-        paddingRight: '10px',
+        paddingRight: '5px',
       },
     },
   }, passedStyles))
@@ -102,14 +102,14 @@ export const Material = ({ onChange, hex, rgb,
           onChange={ handleChange }
         />
         <div style={ styles.split } className="flexbox-fix">
-          <div style={ styles.third }>
+          <div style={ styles.fourth }>
             <EditableInput
               style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
               label="r" value={ rgb.r }
               onChange={ handleChange }
             />
           </div>
-          <div style={ styles.third }>
+          <div style={ styles.fourth }>
             <EditableInput
               style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
               label="g"
@@ -117,7 +117,7 @@ export const Material = ({ onChange, hex, rgb,
               onChange={ handleChange }
             />
           </div>
-          <div style={ styles.third }>
+          <div style={ styles.fourth }>
             <EditableInput
               style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
               label="b"
@@ -125,6 +125,14 @@ export const Material = ({ onChange, hex, rgb,
               onChange={ handleChange }
             />
           </div>
+          <div style={ styles.fourth }>
+            <EditableInput
+              style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
+              label="a"
+              value={ Math.round(rgb.a) * 100 }
+              onChange={ handleChange }
+            />
+          </div>
         </div>
       </div>
     </Raised>
diff --git a/src/components/material/__snapshots__/spec.js.snap b/src/components/material/__snapshots__/spec.js.snap
index 1c912e8a..3c614edc 100644
--- a/src/components/material/__snapshots__/spec.js.snap
+++ b/src/components/material/__snapshots__/spec.js.snap
@@ -66,7 +66,7 @@ exports[`Material renders correctly 1`] = `
           style={
             Object {
               "border": "0px",
-              "borderBottom": "2px solid #22194d",
+              "borderBottom": "2px solid #22194dff",
               "color": "#333",
               "fontSize": "15px",
               "height": "30px",
@@ -76,7 +76,7 @@ exports[`Material renders correctly 1`] = `
               "width": "100%",
             }
           }
-          value="#22194D"
+          value="#22194DFF"
         />
         <label
           htmlFor="rc-editable-input-1"
@@ -113,7 +113,7 @@ exports[`Material renders correctly 1`] = `
               "WebkitFlex": "1",
               "flex": "1",
               "msFlex": "1",
-              "paddingRight": "10px",
+              "paddingRight": "5px",
             }
           }
         >
@@ -136,7 +136,7 @@ exports[`Material renders correctly 1`] = `
                   "border": "0px",
                   "borderBottom": "1px solid #eee",
                   "color": "#333",
-                  "fontSize": "15px",
+                  "fontSize": "12px",
                   "height": "30px",
                   "marginTop": "12px",
                   "outline": "none",
@@ -172,7 +172,7 @@ exports[`Material renders correctly 1`] = `
               "WebkitFlex": "1",
               "flex": "1",
               "msFlex": "1",
-              "paddingRight": "10px",
+              "paddingRight": "5px",
             }
           }
         >
@@ -195,7 +195,7 @@ exports[`Material renders correctly 1`] = `
                   "border": "0px",
                   "borderBottom": "1px solid #eee",
                   "color": "#333",
-                  "fontSize": "15px",
+                  "fontSize": "12px",
                   "height": "30px",
                   "marginTop": "12px",
                   "outline": "none",
@@ -231,7 +231,7 @@ exports[`Material renders correctly 1`] = `
               "WebkitFlex": "1",
               "flex": "1",
               "msFlex": "1",
-              "paddingRight": "10px",
+              "paddingRight": "5px",
             }
           }
         >
@@ -254,7 +254,7 @@ exports[`Material renders correctly 1`] = `
                   "border": "0px",
                   "borderBottom": "1px solid #eee",
                   "color": "#333",
-                  "fontSize": "15px",
+                  "fontSize": "12px",
                   "height": "30px",
                   "marginTop": "12px",
                   "outline": "none",
@@ -282,6 +282,65 @@ exports[`Material renders correctly 1`] = `
             </label>
           </div>
         </div>
+        <div
+          style={
+            Object {
+              "MozBoxFlex": "1",
+              "WebkitBoxFlex": "1",
+              "WebkitFlex": "1",
+              "flex": "1",
+              "msFlex": "1",
+              "paddingRight": "5px",
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "position": "relative",
+              }
+            }
+          >
+            <input
+              id="rc-editable-input-5"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              spellCheck="false"
+              style={
+                Object {
+                  "border": "0px",
+                  "borderBottom": "1px solid #eee",
+                  "color": "#333",
+                  "fontSize": "12px",
+                  "height": "30px",
+                  "marginTop": "12px",
+                  "outline": "none",
+                  "padding": "0px",
+                  "width": "100%",
+                }
+              }
+              value="100"
+            />
+            <label
+              htmlFor="rc-editable-input-5"
+              onMouseDown={[Function]}
+              style={
+                Object {
+                  "color": "#999999",
+                  "fontSize": "11px",
+                  "left": "0px",
+                  "position": "absolute",
+                  "textTransform": "capitalize",
+                  "top": "0px",
+                }
+              }
+            >
+              a
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/photoshop/PhotoshopFields.js b/src/components/photoshop/PhotoshopFields.js
index 75aff531..7c585a49 100644
--- a/src/components/photoshop/PhotoshopFields.js
+++ b/src/components/photoshop/PhotoshopFields.js
@@ -83,11 +83,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
         hex: data['#'],
         source: 'hex',
       }, e)
-    } else if (data.r || data.g || data.b) {
+    } else if (data.r || data.g || data.b || data.a) {
       onChange({
         r: data.r || rgb.r,
         g: data.g || rgb.g,
         b: data.b || rgb.b,
+        a: data.a || rgb.a,
         source: 'rgb',
       }, e)
     } else if (data.h || data.s || data.v) {
@@ -139,6 +140,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
         value={ rgb.b }
         onChange={ handleChange }
       />
+      <EditableInput
+        style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
+        label="a"
+        value={ Math.round(rgb.a * 100) }
+        onChange={ handleChange }
+      />
       <div style={ styles.divider } />
       <EditableInput
         style={{ wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel }}
@@ -150,6 +157,11 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
         <div style={ styles.symbol }>°</div>
         <div style={ styles.symbol }>%</div>
         <div style={ styles.symbol }>%</div>
+        <div style={ styles.divider } />
+        <div style={ styles.symbol } />
+        <div style={ styles.symbol } />
+        <div style={ styles.symbol } />
+        <div style={ styles.symbol }>%</div>
       </div>
     </div>
   )
diff --git a/src/components/photoshop/__snapshots__/spec.js.snap b/src/components/photoshop/__snapshots__/spec.js.snap
index cbbaef86..3a753fd7 100644
--- a/src/components/photoshop/__snapshots__/spec.js.snap
+++ b/src/components/photoshop/__snapshots__/spec.js.snap
@@ -374,7 +374,7 @@ exports[`Photoshop renders correctly 1`] = `
                     "MozBoxShadow": "inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000",
                     "OBoxShadow": "inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000",
                     "WebkitBoxShadow": "inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000",
-                    "background": "#22194d",
+                    "background": "#22194dff",
                     "boxShadow": "inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000",
                     "height": "34px",
                     "msBoxShadow": "inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000",
@@ -792,6 +792,58 @@ exports[`Photoshop renders correctly 1`] = `
                 b
               </label>
             </div>
+            <div
+              style={
+                Object {
+                  "position": "relative",
+                }
+              }
+            >
+              <input
+                id="rc-editable-input-7"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder={undefined}
+                spellCheck="false"
+                style={
+                  Object {
+                    "MozBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+                    "OBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+                    "WebkitBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+                    "border": "1px solid #888888",
+                    "boxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+                    "fontSize": "13px",
+                    "height": "18px",
+                    "marginBottom": "5px",
+                    "marginLeft": "40%",
+                    "marginRight": "10px",
+                    "msBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+                    "paddingLeft": "3px",
+                    "width": "40%",
+                  }
+                }
+                value="100"
+              />
+              <label
+                htmlFor="rc-editable-input-7"
+                onMouseDown={[Function]}
+                style={
+                  Object {
+                    "fontSize": "13px",
+                    "height": "18px",
+                    "left": "0px",
+                    "lineHeight": "22px",
+                    "position": "absolute",
+                    "textTransform": "uppercase",
+                    "top": "0px",
+                    "width": "34px",
+                  }
+                }
+              >
+                a
+              </label>
+            </div>
             <div
               style={
                 Object {
@@ -807,7 +859,7 @@ exports[`Photoshop renders correctly 1`] = `
               }
             >
               <input
-                id="rc-editable-input-7"
+                id="rc-editable-input-8"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onKeyDown={[Function]}
@@ -829,10 +881,10 @@ exports[`Photoshop renders correctly 1`] = `
                     "width": "80%",
                   }
                 }
-                value="22194D"
+                value="22194DFF"
               />
               <label
-                htmlFor="rc-editable-input-7"
+                htmlFor="rc-editable-input-8"
                 onMouseDown={[Function]}
                 style={
                   Object {
@@ -893,6 +945,51 @@ exports[`Photoshop renders correctly 1`] = `
               >
                 %
               </div>
+              <div
+                style={
+                  Object {
+                    "height": "5px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "height": "20px",
+                    "lineHeight": "22px",
+                    "paddingBottom": "7px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "height": "20px",
+                    "lineHeight": "22px",
+                    "paddingBottom": "7px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "height": "20px",
+                    "lineHeight": "22px",
+                    "paddingBottom": "7px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "height": "20px",
+                    "lineHeight": "22px",
+                    "paddingBottom": "7px",
+                  }
+                }
+              >
+                %
+              </div>
             </div>
           </div>
         </div>
@@ -952,7 +1049,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-15"
+      id="rc-editable-input-17"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -978,7 +1075,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="0"
     />
     <label
-      htmlFor="rc-editable-input-15"
+      htmlFor="rc-editable-input-17"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1004,7 +1101,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-16"
+      id="rc-editable-input-18"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1030,7 +1127,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="100"
     />
     <label
-      htmlFor="rc-editable-input-16"
+      htmlFor="rc-editable-input-18"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1056,7 +1153,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-17"
+      id="rc-editable-input-19"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1082,7 +1179,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="100"
     />
     <label
-      htmlFor="rc-editable-input-17"
+      htmlFor="rc-editable-input-19"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1115,7 +1212,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-18"
+      id="rc-editable-input-20"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1141,7 +1238,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="255"
     />
     <label
-      htmlFor="rc-editable-input-18"
+      htmlFor="rc-editable-input-20"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1167,7 +1264,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-19"
+      id="rc-editable-input-21"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1193,7 +1290,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="0"
     />
     <label
-      htmlFor="rc-editable-input-19"
+      htmlFor="rc-editable-input-21"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1219,7 +1316,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-20"
+      id="rc-editable-input-22"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1245,7 +1342,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="0"
     />
     <label
-      htmlFor="rc-editable-input-20"
+      htmlFor="rc-editable-input-22"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1263,6 +1360,58 @@ exports[`PhotoshopFields renders correctly 1`] = `
       b
     </label>
   </div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <input
+      id="rc-editable-input-23"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      placeholder={undefined}
+      spellCheck="false"
+      style={
+        Object {
+          "MozBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+          "OBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+          "WebkitBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+          "border": "1px solid #888888",
+          "boxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+          "fontSize": "13px",
+          "height": "18px",
+          "marginBottom": "5px",
+          "marginLeft": "40%",
+          "marginRight": "10px",
+          "msBoxShadow": "inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC",
+          "paddingLeft": "3px",
+          "width": "40%",
+        }
+      }
+      value="100"
+    />
+    <label
+      htmlFor="rc-editable-input-23"
+      onMouseDown={[Function]}
+      style={
+        Object {
+          "fontSize": "13px",
+          "height": "18px",
+          "left": "0px",
+          "lineHeight": "22px",
+          "position": "absolute",
+          "textTransform": "uppercase",
+          "top": "0px",
+          "width": "34px",
+        }
+      }
+    >
+      a
+    </label>
+  </div>
   <div
     style={
       Object {
@@ -1278,7 +1427,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
     }
   >
     <input
-      id="rc-editable-input-21"
+      id="rc-editable-input-24"
       onBlur={[Function]}
       onChange={[Function]}
       onKeyDown={[Function]}
@@ -1303,7 +1452,7 @@ exports[`PhotoshopFields renders correctly 1`] = `
       value="FF0000"
     />
     <label
-      htmlFor="rc-editable-input-21"
+      htmlFor="rc-editable-input-24"
       onMouseDown={[Function]}
       style={
         Object {
@@ -1364,6 +1513,51 @@ exports[`PhotoshopFields renders correctly 1`] = `
     >
       %
     </div>
+    <div
+      style={
+        Object {
+          "height": "5px",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "height": "20px",
+          "lineHeight": "22px",
+          "paddingBottom": "7px",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "height": "20px",
+          "lineHeight": "22px",
+          "paddingBottom": "7px",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "height": "20px",
+          "lineHeight": "22px",
+          "paddingBottom": "7px",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "height": "20px",
+          "lineHeight": "22px",
+          "paddingBottom": "7px",
+        }
+      }
+    >
+      %
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/sketch/SketchFields.js b/src/components/sketch/SketchFields.js
index b2e30227..d4ac0be4 100644
--- a/src/components/sketch/SketchFields.js
+++ b/src/components/sketch/SketchFields.js
@@ -22,7 +22,7 @@ export const SketchFields = ({ onChange, rgb, hsl, hex, disableAlpha }) => {
         paddingLeft: '6px',
       },
       double: {
-        flex: '2',
+        flex: '2.5',
       },
       input: {
         width: '80%',
diff --git a/src/components/sketch/__snapshots__/spec.js.snap b/src/components/sketch/__snapshots__/spec.js.snap
index 2793f6ae..cf6fe9ae 100644
--- a/src/components/sketch/__snapshots__/spec.js.snap
+++ b/src/components/sketch/__snapshots__/spec.js.snap
@@ -481,11 +481,11 @@ exports[`Sketch renders correctly 1`] = `
     <div
       style={
         Object {
-          "MozBoxFlex": "2",
-          "WebkitBoxFlex": "2",
-          "WebkitFlex": "2",
-          "flex": "2",
-          "msFlex": "2",
+          "MozBoxFlex": "2.5",
+          "WebkitBoxFlex": "2.5",
+          "WebkitFlex": "2.5",
+          "flex": "2.5",
+          "msFlex": "2.5",
         }
       }
     >
@@ -516,7 +516,7 @@ exports[`Sketch renders correctly 1`] = `
               "width": "80%",
             }
           }
-          value="22194D"
+          value="22194DFF"
         />
         <label
           htmlFor="rc-editable-input-1"
@@ -1427,11 +1427,11 @@ exports[`SketchFields renders correctly 1`] = `
   <div
     style={
       Object {
-        "MozBoxFlex": "2",
-        "WebkitBoxFlex": "2",
-        "WebkitFlex": "2",
-        "flex": "2",
-        "msFlex": "2",
+        "MozBoxFlex": "2.5",
+        "WebkitBoxFlex": "2.5",
+        "WebkitFlex": "2.5",
+        "flex": "2.5",
+        "msFlex": "2.5",
       }
     }
   >
diff --git a/src/components/twitter/__snapshots__/spec.js.snap b/src/components/twitter/__snapshots__/spec.js.snap
index 6b073a1f..b21dee20 100644
--- a/src/components/twitter/__snapshots__/spec.js.snap
+++ b/src/components/twitter/__snapshots__/spec.js.snap
@@ -394,7 +394,7 @@ exports[`Twitter \`triangle="hide"\` 1`] = `
             "width": "100px",
           }
         }
-        value="22194D"
+        value="22194DFF"
       />
     </div>
     <div
@@ -804,7 +804,7 @@ exports[`Twitter \`triangle="top-right"\` 1`] = `
             "width": "100px",
           }
         }
-        value="22194D"
+        value="22194DFF"
       />
     </div>
     <div
@@ -1214,7 +1214,7 @@ exports[`Twitter renders correctly 1`] = `
             "width": "100px",
           }
         }
-        value="22194D"
+        value="22194DFF"
       />
     </div>
     <div
diff --git a/src/helpers/color.js b/src/helpers/color.js
index c095e061..e70c9035 100644
--- a/src/helpers/color.js
+++ b/src/helpers/color.js
@@ -27,12 +27,12 @@ export const toState = (data, oldHue) => {
   const hsl = color.toHsl()
   const hsv = color.toHsv()
   const rgb = color.toRgb()
-  const hex = color.toHex()
+  const hex = color.toHex8()
   if (hsl.s === 0) {
     hsl.h = oldHue || 0
     hsv.h = oldHue || 0
   }
-  const transparent = hex === '000000' && rgb.a === 0
+  const transparent = hex === '00000000'
 
   return {
     hsl,
@@ -50,7 +50,7 @@ export const isValidHex = (hex) => {
   }
   // disable hex4 and hex8
   const lh = (String(hex).charAt(0) === '#') ? 1 : 0
-  return hex.length !== (4 + lh) && hex.length < (7 + lh) && tinycolor(hex).isValid()
+  return hex.length !== (4 + lh) && hex.length < (9 + lh) && tinycolor(hex).isValid()
 }
 
 export const getContrastingColor = (data) => {
@@ -74,5 +74,6 @@ export const red = {
 
 export const isvalidColorString = (string, type) => {
   const stringWithoutDegree = string.replace('°', '')
+  // eslint-disable-next-line no-underscore-dangle
   return tinycolor(`${ type } (${ stringWithoutDegree })`)._ok
 }
diff --git a/src/helpers/spec.js b/src/helpers/spec.js
index 4042482c..3015800b 100644
--- a/src/helpers/spec.js
+++ b/src/helpers/spec.js
@@ -64,7 +64,7 @@ describe('helpers/color', () => {
     test('returns an object giving a color in all formats', () => {
       expect(color.toState('red')).toEqual({
         hsl: { a: 1, h: 0, l: 0.5, s: 1 },
-        hex: '#ff0000',
+        hex: '#ff0000ff',
         rgb: { r: 255, g: 0, b: 0, a: 1 },
         hsv: { h: 0, s: 1, v: 1, a: 1 },
         oldHue: 0,
@@ -73,7 +73,7 @@ describe('helpers/color', () => {
     })
 
     test('gives hex color with leading hash', () => {
-      expect(color.toState('blue').hex).toEqual('#0000ff')
+      expect(color.toState('blue').hex).toEqual('#0000ffff')
     })
 
     test('doesn\'t mutate hsl color object', () => {
@@ -92,7 +92,7 @@ describe('helpers/color', () => {
   })
 
   describe('isValidHex', () => {
-    test('allows strings of length 3 or 6', () => {
+    test('allows strings of length 3, 6 or 8', () => {
       expect(color.isValidHex('f')).toBeFalsy()
       expect(color.isValidHex('ff')).toBeFalsy()
       expect(color.isValidHex('fff')).toBeTruthy()
@@ -100,7 +100,7 @@ describe('helpers/color', () => {
       expect(color.isValidHex('fffff')).toBeFalsy()
       expect(color.isValidHex('ffffff')).toBeTruthy()
       expect(color.isValidHex('fffffff')).toBeFalsy()
-      expect(color.isValidHex('ffffffff')).toBeFalsy()
+      expect(color.isValidHex('ffffffff')).toBeTruthy()
       expect(color.isValidHex('fffffffff')).toBeFalsy()
       expect(color.isValidHex('ffffffffff')).toBeFalsy()
       expect(color.isValidHex('fffffffffff')).toBeFalsy()