diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js
index 77a84c744..b1e2018a4 100644
--- a/src/components/fields/MarkerColor.js
+++ b/src/components/fields/MarkerColor.js
@@ -110,23 +110,21 @@ class UnconnectedMarkerColor extends Component {
   renderConstantControls() {
     const _ = this.context.localize;
     return (
-      <div className="markercolor-constantcontrols__container">
-        <MultiColorPicker
-          attr="marker.color"
-          multiColorMessage={_(
-            'Each trace will be colored according to the selected colorscale.'
-          )}
-          singleColorMessage={_(
-            'All traces will be colored in the the same color.'
-          )}
-          setColor={this.setColor}
-          setColorScale={this.setColorScale}
-          onConstantColorOptionChange={this.onConstantColorOptionChange}
-          parentSelectedConstantColorOption={
-            this.state.selectedConstantColorOption
-          }
-        />
-      </div>
+      <MultiColorPicker
+        attr="marker.color"
+        multiColorMessage={_(
+          'Each trace will be colored according to the selected colorscale.'
+        )}
+        singleColorMessage={_(
+          'All traces will be colored in the the same color.'
+        )}
+        setColor={this.setColor}
+        setColorScale={this.setColorScale}
+        onConstantColorOptionChange={this.onConstantColorOptionChange}
+        parentSelectedConstantColorOption={
+          this.state.selectedConstantColorOption
+        }
+      />
     );
   }
 
diff --git a/src/components/widgets/ColorPicker.js b/src/components/widgets/ColorPicker.js
index b4d175bb7..84b41d40e 100644
--- a/src/components/widgets/ColorPicker.js
+++ b/src/components/widgets/ColorPicker.js
@@ -1,16 +1,9 @@
 import Fields from 'react-color/lib/components/sketch/SketchFields';
-import PresetColors from 'react-color/lib/components/sketch/SketchPresetColors';
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import PropTypes from 'prop-types';
 import tinycolor from 'tinycolor2';
-import {
-  Alpha,
-  Hue,
-  Saturation,
-  Checkboard,
-} from 'react-color/lib/components/common';
+import {Hue, Saturation} from 'react-color/lib/components/common';
 import {CustomPicker as customPicker} from 'react-color';
-import {DEFAULT_COLORS} from 'lib/constants';
 
 // Utility functions for converting ColorPicker color objects or raw strings
 // into TinyColor objects.
@@ -20,55 +13,28 @@ const toTinyColor = c => tinycolor(getColorSource(c));
 
 class Custom extends Component {
   render() {
-    const {rgb, onChangeComplete} = this.props;
-    const {r, g, b, a} = rgb;
-
-    const activeColor = {
-      backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})`,
-    };
-
-    const _ = this.context.localize;
+    const {onChangeComplete} = this.props;
 
     return (
-      <div>
-        <div>
-          <p className="colorpicker__title">{_('Custom Color')}</p>
-          <div className="colorpicker__saturation">
-            <Saturation {...this.props} />
-          </div>
-          <div className="colorpicker__controls +flex">
-            <div className="colorpicker__sliders">
-              <div className="colorpicker__slider">
-                <Hue {...this.props} />
-              </div>
-              <div className="colorpicker__slider">
-                <Alpha {...this.props} />
-              </div>
-            </div>
-            <div className="colorpicker__active">
-              <Checkboard />
-              <div style={activeColor} className="colorpicker__active-swatch" />
+      <div className="colorpicker__outer">
+        <div className="colorpicker__controls +flex">
+          <div className="colorpicker__sliders">
+            <div className="colorpicker__slider">
+              <Hue {...this.props} />
             </div>
           </div>
-          <div className="colorpicker__custom-input">
-            <Fields {...this.props} onChange={onChangeComplete} />
-          </div>
         </div>
-        <div>
-          <p className="colorpicker__title">{_('Default Colors')}</p>
-          <div className="colorpicker__preset-colors">
-            <PresetColors colors={DEFAULT_COLORS} onClick={onChangeComplete} />
-          </div>
+        <div className="colorpicker__saturation">
+          <Saturation {...this.props} />
+        </div>
+        <div className="colorpicker__custom-input">
+          <Fields {...this.props} onChange={onChangeComplete} />
         </div>
       </div>
     );
   }
 }
 
-Custom.contextTypes = {
-  localize: PropTypes.func,
-};
-
 Custom.propTypes = {
   rgb: PropTypes.object,
   onChangeComplete: PropTypes.func,
@@ -120,32 +86,31 @@ class ColorPicker extends Component {
     const swatchStyle = {backgroundColor: rgbString};
 
     return (
-      <div className="colorpicker__container">
-        <div className="colorpicker">
+      <Fragment>
+        <div className="colorpicker__container">
+          <div className="colorpicker">
+            <div
+              className="colorpicker__swatch +cursor-clickable"
+              style={swatchStyle}
+              onClick={this.toggleVisible}
+            />
+          </div>
+
           <div
-            className="colorpicker__swatch +cursor-clickable"
-            style={swatchStyle}
+            className="colorpicker__selected-color +hover-grey"
             onClick={this.toggleVisible}
-          />
-        </div>
-
-        <div
-          className="colorpicker__selected-color +hover-grey"
-          onClick={this.toggleVisible}
-        >
-          {colorText}
+          >
+            {colorText}
+          </div>
         </div>
 
         {this.state.isVisible && (
-          <div className="colorpicker__popover">
-            <div className="colorpicker__cover" onClick={this.toggleVisible} />
-            <CustomColorPicker
-              color={rgbString}
-              onChangeComplete={this.onSelectedColorChange}
-            />
-          </div>
+          <CustomColorPicker
+            color={rgbString}
+            onChangeComplete={this.onSelectedColorChange}
+          />
         )}
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js
index 429a8f500..f95256e15 100644
--- a/src/components/widgets/ColorscalePicker.js
+++ b/src/components/widgets/ColorscalePicker.js
@@ -44,7 +44,7 @@ class Scale extends Component {
     const _ = this.context.localize;
 
     return (
-      <Fragment>
+      <div className="customPickerContainer__outer">
         <Colorscale colorscale={selected} onClick={this.onClick} />
 
         {showColorscalePicker ? (
@@ -73,7 +73,7 @@ class Scale extends Component {
             ) : null}
           </div>
         ) : null}
-      </Fragment>
+      </div>
     );
   }
 }
diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss
index 85299f62e..664d38209 100644
--- a/src/styles/components/fields/_field.scss
+++ b/src/styles/components/fields/_field.scss
@@ -23,6 +23,7 @@
   &__widget {
     display: flex;
     flex-wrap: wrap;
+    flex-basis: 0;
     padding-right: var(--spacing-half-unit);
     padding-left: var(--spacing-half-unit);
     align-self: center;
diff --git a/src/styles/components/fields/_main.scss b/src/styles/components/fields/_main.scss
index 2abaf1e4c..3c7187a9b 100644
--- a/src/styles/components/fields/_main.scss
+++ b/src/styles/components/fields/_main.scss
@@ -1,3 +1,2 @@
 @import 'field';
 @import 'symbolselector';
-@import 'markercolor';
diff --git a/src/styles/components/fields/_markercolor.scss b/src/styles/components/fields/_markercolor.scss
deleted file mode 100644
index 0ab02f03f..000000000
--- a/src/styles/components/fields/_markercolor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.markercolor-constantcontrols__container {
-  margin-top: var(--spacing-quarter-unit);
-}
diff --git a/src/styles/components/widgets/_colorpicker.scss b/src/styles/components/widgets/_colorpicker.scss
index 522168bfa..6e522ad40 100644
--- a/src/styles/components/widgets/_colorpicker.scss
+++ b/src/styles/components/widgets/_colorpicker.scss
@@ -1,12 +1,11 @@
 $swatch-size: 20px;
-$colorpicker-width: 250px;
-$saturation-picker-height: 160px;
+$saturation-picker-height: 100px;
 $slider-picker-height: 10px;
+$colorpicker-width: 185px;
 
 %colorpicker__component {
   position: relative;
   overflow: hidden;
-  margin: 0 var(--spacing-half-unit);
   border: var(--border-default);
   border-radius: var(--border-radius-small);
   cursor: pointer;
@@ -21,32 +20,15 @@ $slider-picker-height: 10px;
   border: var(--border-default);
   padding: var(--spacing-eighth-unit);
 
-  &__popover {
-    left: -60px;
-    position: absolute;
-    top: 100%;
-    margin: var(--spacing-quarter-unit) 0 var(--spacing-base-unit);
+  &__outer {
     width: $colorpicker-width;
-    background-color: var(--color-background-top);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow-base);
-    border: var(--border-default);
-    @include z-index('cloud');
   }
-  &__cover {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    @include z-index('underground');
-  }
-
   &__container {
     display: flex;
     align-items: center;
     line-height: 2;
     position: relative;
+    width: $colorpicker-width;
   }
   &__selected-color {
     margin-left: var(--spacing-half-unit);
@@ -70,7 +52,7 @@ $slider-picker-height: 10px;
     height: $saturation-picker-height;
   }
   &__custom-input {
-    padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+    padding-top: var(--spacing-eighth-unit);
     input {
       border: var(--border-default) !important;
       box-shadow: none !important;
@@ -84,16 +66,14 @@ $slider-picker-height: 10px;
 
   /* Wrapper style for Hue and Alpha sliders and swatch */
   &__controls {
-    margin: 0 var(--spacing-half-unit);
-
     .colorpicker__sliders {
-      width: 200px;
+      width: 100%;
 
       .colorpicker__slider {
         @extend %colorpicker__component;
         margin: auto 0;
         height: $slider-picker-height;
-        margin-top: var(--spacing-eighth-unit);
+        margin: var(--spacing-eighth-unit) 0;
       }
     }
 
@@ -114,19 +94,4 @@ $slider-picker-height: 10px;
       }
     }
   }
-
-  &__preset-colors {
-    margin: 0 var(--spacing-half-unit);
-    & > div {
-      border-top: var(--border-light) !important; // inline style override
-      padding: var(--spacing-half-unit) !important;
-      padding-bottom: var(--spacing-quarter-unit) !important;
-    }
-  }
-  &__title {
-    margin: var(--spacing-eighth-unit) var(--spacing-half-unit);
-    font-size: var(--font-size-medium);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-section-header);
-  }
 }
diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss
index f931114cc..0bfb639c1 100644
--- a/src/styles/components/widgets/_colorscalepicker.scss
+++ b/src/styles/components/widgets/_colorscalepicker.scss
@@ -1,5 +1,7 @@
+$colorscalepicker-width: 215px;
+
 .colorscalePickerContainer {
-  min-width: 215px;
+  min-width: $colorscalepicker-width;
   position: relative;
   padding: 0;
   resize: none;
@@ -25,4 +27,9 @@
 
 .customPickerContainer {
   margin-top: var(--spacing-quarter-unit);
+
+  &__outer {
+    width: $colorscalepicker-width;
+    text-align: center;
+  }
 }