diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
new file mode 100644
index 00000000000..3172f31672b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png
index d1c8044163d..520c59ee07a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
new file mode 100644
index 00000000000..2e5b5827ff8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png
index b206566d572..5856748f0fe 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/7845.md b/packages/eui/changelogs/upcoming/7845.md
new file mode 100644
index 00000000000..a7e6062fc56
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7845.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth`
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 371dea2b8a0..940d83bdcdc 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiColorPicker 1`] = `
+exports[`EuiColorPicker color empty string 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -19,18 +19,19 @@ exports[`renders EuiColorPicker 1`] = `
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="rgb(255,238,221)"
-            data-euiicon-type="swatchInput"
+            color="subdued"
+            data-euiicon-type="stopSlash"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
+        placeholder="Transparent"
         type="text"
-        value="#FFEEDD"
+        value=""
       />
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -50,7 +51,7 @@ exports[`renders EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with a clearable input 1`] = `
+exports[`EuiColorPicker color null 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -69,32 +70,23 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="rgb(255,238,221)"
-            data-euiicon-type="swatchInput"
+            color="subdued"
+            data-euiicon-type="stopSlash"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--2icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
+        placeholder="Transparent"
         type="text"
-        value="#FFEEDD"
+        value=""
       />
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
-        <button
-          aria-label="Clear input"
-          class="euiFormControlLayoutClearButton"
-          type="button"
-        >
-          <span
-            class="euiFormControlLayoutClearButton__icon"
-            data-euiicon-type="cross"
-          />
-        </button>
         <span
           class="euiFormControlLayoutCustomIcon"
         >
@@ -110,7 +102,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = `
+exports[`EuiColorPicker color valid string 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -124,7 +116,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -137,7 +129,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFFFFF"
@@ -160,12 +152,12 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
 </div>
 `;
 
-exports[`renders EuiColorPicker with a custom placeholder 1`] = `
+exports[`EuiColorPicker compressed 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--compressed"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -174,24 +166,23 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="subdued"
-            data-euiicon-type="stopSlash"
+            color="rgb(255,238,221)"
+            data-euiicon-type="swatchInput"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-compressed-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
-        placeholder="Auto"
         type="text"
-        value=""
+        value="#FFEEDD"
       />
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -211,12 +202,12 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
 </div>
 `;
 
-exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
+exports[`EuiColorPicker disabled 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout-isDisabled"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -225,49 +216,36 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="subdued"
-            data-euiicon-type="stopSlash"
+            color="rgb(255,238,221)"
+            data-euiicon-type="swatchInput"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
-        placeholder="Transparent"
+        disabled=""
         type="text"
-        value=""
+        value="#FFEEDD"
       />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </span>
-      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
+exports[`EuiColorPicker fullWidth 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--fullWidth"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -276,24 +254,23 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="subdued"
-            data-euiicon-type="stopSlash"
+            color="rgb(255,238,221)"
+            data-euiicon-type="swatchInput"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-fullWidth-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
-        placeholder="Transparent"
         type="text"
-        value=""
+        value="#FFEEDD"
       />
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -313,18 +290,163 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 </div>
 `;
 
-exports[`renders a EuiColorPicker with a prepend and append 1`] = `
+exports[`EuiColorPicker inline 1`] = `
 <div
-  class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
+  class="euiColorPicker testClass1 testClass2 emotion-euiColorPicker-euiTestCss"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--group"
+    class="euiSaturation"
+    data-test-subj="euiSaturation"
+    style="background: hsl(30, 100%, 50%);"
+    tabindex="-1"
+  >
+    <div
+      class="euiSaturation__lightness"
+    >
+      <div
+        class="euiSaturation__saturation"
+      />
+    </div>
+    <button
+      aria-describedby="undefined-instructions"
+      aria-label="#ffeedd"
+      aria-roledescription="HSV color mode saturation and value 2-axis slider"
+      class="euiSaturation__indicator"
+      id="undefined-saturationIndicator"
+      style="left: 0px; top: 0px;"
+    />
+    <span
+      aria-live="assertive"
+      hidden=""
+    >
+      #ffeedd
+    </span>
+    <span
+      hidden=""
+      id="undefined-instructions"
+    >
+      Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
+    </span>
+  </div>
+  <div
+    class="euiHue"
   >
     <label
-      class="euiFormLabel euiFormControlLayout__prepend"
+      class="emotion-euiScreenReaderOnly"
+      for="undefined-hue"
     >
-      prepend
+      Select the HSV color mode 'hue' value
     </label>
+    <p
+      aria-live="polite"
+      class="emotion-euiScreenReaderOnly"
+    >
+      #ffeedd
+    </p>
+    <input
+      class="euiHue__range"
+      id="undefined-hue"
+      max="359"
+      min="0"
+      step="1"
+      type="range"
+      value="30"
+    />
+  </div>
+  <ul
+    class="euiColorPicker__swatches emotion-euiColorPicker__swatches"
+  >
+    <li>
+      <button
+        aria-label="Select #54B399 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(84, 179, 153);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #6092C0 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(96, 146, 192);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #D36086 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(211, 96, 134);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #9170B8 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(145, 112, 184);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #CA8EAE as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(202, 142, 174);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #D6BF57 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(214, 191, 87);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #B9A888 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(185, 168, 136);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #DA8B45 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(218, 139, 69);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #AA6556 as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(170, 101, 86);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #E7664C as the color"
+        class="euiColorPickerSwatch"
+        style="background: rgb(231, 102, 76);"
+        type="button"
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`EuiColorPicker isClearable 1`] = `
+<div
+  class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
+>
+  <div
+    class="euiFormControlLayout"
+  >
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
@@ -332,7 +454,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -345,7 +467,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -353,6 +475,16 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
+        <button
+          aria-label="Clear input"
+          class="euiFormControlLayoutClearButton"
+          type="button"
+        >
+          <span
+            class="euiFormControlLayoutClearButton__icon"
+            data-euiicon-type="cross"
+          />
+        </button>
         <span
           class="euiFormControlLayoutCustomIcon"
         >
@@ -364,16 +496,11 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
         </span>
       </div>
     </div>
-    <label
-      class="euiFormLabel euiFormControlLayout__append"
-    >
-      append
-    </label>
   </div>
 </div>
 `;
 
-exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
+exports[`EuiColorPicker placeholder 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
@@ -392,18 +519,19 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
           <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
-            color="rgb(255,238,221)"
-            data-euiicon-type="swatchInput"
+            color="subdued"
+            data-euiicon-type="stopSlash"
           />
         </span>
       </div>
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
+        placeholder="Auto"
         type="text"
-        value="#FFEEDD"
+        value=""
       />
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -423,13 +551,18 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
 </div>
 `;
 
-exports[`renders compressed EuiColorPicker 1`] = `
+exports[`EuiColorPicker prepend and append 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--compressed"
+    class="euiFormControlLayout euiFormControlLayout--group"
   >
+    <label
+      class="euiFormLabel euiFormControlLayout__prepend"
+    >
+      prepend
+    </label>
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
@@ -437,7 +570,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -450,7 +583,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-compressed-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -469,16 +602,21 @@ exports[`renders compressed EuiColorPicker 1`] = `
         </span>
       </div>
     </div>
+    <label
+      class="euiFormLabel euiFormControlLayout__append"
+    >
+      append
+    </label>
   </div>
 </div>
 `;
 
-exports[`renders disabled EuiColorPicker 1`] = `
+exports[`EuiColorPicker readOnly 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout-isDisabled"
+    class="euiFormControlLayout euiFormControlLayout--readOnly"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -487,7 +625,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -500,9 +638,9 @@ exports[`renders disabled EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
-        disabled=""
+        readonly=""
         type="text"
         value="#FFEEDD"
       />
@@ -511,12 +649,12 @@ exports[`renders disabled EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders fullWidth EuiColorPicker 1`] = `
+exports[`EuiColorPicker renders 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+    class="euiFormControlLayout"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -525,7 +663,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -538,7 +676,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-fullWidth-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -561,184 +699,12 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
 </div>
 `;
 
-exports[`renders inline EuiColorPicker 1`] = `
-<div
-  class="euiColorPicker testClass1 testClass2 emotion-euiTestCss"
->
-  <div>
-    <div
-      class="euiSaturation"
-      data-test-subj="euiSaturation"
-      style="background: hsl(30, 100%, 50%);"
-      tabindex="-1"
-    >
-      <div
-        class="euiSaturation__lightness"
-      >
-        <div
-          class="euiSaturation__saturation"
-        />
-      </div>
-      <button
-        aria-describedby="undefined-instructions"
-        aria-label="#ffeedd"
-        aria-roledescription="HSV color mode saturation and value 2-axis slider"
-        class="euiSaturation__indicator"
-        id="undefined-saturationIndicator"
-        style="left: 0px; top: 0px;"
-      />
-      <span
-        aria-live="assertive"
-        hidden=""
-      >
-        #ffeedd
-      </span>
-      <span
-        hidden=""
-        id="undefined-instructions"
-      >
-        Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
-      </span>
-    </div>
-    <label
-      class="emotion-euiScreenReaderOnly"
-      for="undefined-hue"
-    >
-      Select the HSV color mode 'hue' value
-    </label>
-    <p
-      aria-live="polite"
-      class="emotion-euiScreenReaderOnly"
-    >
-      #ffeedd
-    </p>
-    <div
-      class="euiHue"
-    >
-      <input
-        class="euiHue__range"
-        id="undefined-hue"
-        max="359"
-        min="0"
-        step="1"
-        type="range"
-        value="30"
-      />
-    </div>
-  </div>
-  <ul
-    class="euiColorPicker__swatches"
-  >
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #54B399 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(84, 179, 153);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #6092C0 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(96, 146, 192);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #D36086 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(211, 96, 134);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #9170B8 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(145, 112, 184);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #CA8EAE as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(202, 142, 174);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #D6BF57 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(214, 191, 87);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #B9A888 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(185, 168, 136);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #DA8B45 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(218, 139, 69);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #AA6556 as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(170, 101, 86);"
-        type="button"
-      />
-    </li>
-    <li
-      class="euiColorPicker__swatch-item"
-    >
-      <button
-        aria-label="Select #E7664C as the color"
-        class="euiColorPickerSwatch euiColorPicker__swatchSelect"
-        style="background: rgb(231, 102, 76);"
-        type="button"
-      />
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`renders readOnly EuiColorPicker 1`] = `
+exports[`EuiColorPicker showAlpha 1`] = `
 <div
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--readOnly"
+    class="euiFormControlLayout"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -747,7 +713,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -760,12 +726,24 @@ exports[`renders readOnly EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
+        class="euiFieldText euiColorPicker__input emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
-        readonly=""
         type="text"
         value="#FFEEDD"
       />
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            class="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+          />
+        </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap
index 90784a6edea..e8b95a01ff9 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`EuiHue accepts a hex value 1`] = `
 <div>
-  <label
-    class="emotion-euiScreenReaderOnly"
-    for="undefined-hue"
-  >
-    Select the HSV color mode 'hue' value
-  </label>
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    #00FFFF
-  </p>
   <div
     class="euiHue testClass1 testClass2 emotion-euiTestCss"
   >
+    <label
+      class="emotion-euiScreenReaderOnly"
+      for="undefined-hue"
+    >
+      Select the HSV color mode 'hue' value
+    </label>
+    <p
+      aria-live="polite"
+      class="emotion-euiScreenReaderOnly"
+    >
+      #00FFFF
+    </p>
     <input
       aria-label="aria-label"
       class="euiHue__range"
@@ -34,19 +34,19 @@ exports[`EuiHue accepts a hex value 1`] = `
 
 exports[`EuiHue accepts a hue value 1`] = `
 <div>
-  <label
-    class="emotion-euiScreenReaderOnly"
-    for="undefined-hue"
-  >
-    Select the HSV color mode 'hue' value
-  </label>
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  />
   <div
     class="euiHue testClass1 testClass2 emotion-euiTestCss"
   >
+    <label
+      class="emotion-euiScreenReaderOnly"
+      for="undefined-hue"
+    >
+      Select the HSV color mode 'hue' value
+    </label>
+    <p
+      aria-live="polite"
+      class="emotion-euiScreenReaderOnly"
+    />
     <input
       aria-label="aria-label"
       class="euiHue__range"
@@ -64,19 +64,19 @@ exports[`EuiHue accepts a hue value 1`] = `
 
 exports[`EuiHue is rendered 1`] = `
 <div>
-  <label
-    class="emotion-euiScreenReaderOnly"
-    for="undefined-hue"
-  >
-    Select the HSV color mode 'hue' value
-  </label>
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  />
   <div
     class="euiHue testClass1 testClass2 emotion-euiTestCss"
   >
+    <label
+      class="emotion-euiScreenReaderOnly"
+      for="undefined-hue"
+    >
+      Select the HSV color mode 'hue' value
+    </label>
+    <p
+      aria-live="polite"
+      class="emotion-euiScreenReaderOnly"
+    />
     <input
       aria-label="aria-label"
       class="euiHue__range"
diff --git a/packages/eui/src/components/color_picker/_color_picker.scss b/packages/eui/src/components/color_picker/_color_picker.scss
deleted file mode 100644
index f3657a38090..00000000000
--- a/packages/eui/src/components/color_picker/_color_picker.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.euiColorPicker {
-  position: relative;
-  width: $euiColorPickerWidth;
-}
-
-.euiColorPicker__swatches {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -$euiSizeS / 2;
-}
-
-.euiColorPicker__swatch-item {
-  margin: $euiSizeS / 2;
-}
-
-// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
-.euiSwatchInput__stroke {
-  fill: none;
-  stroke: transparentize($euiColorFullShade, .8);
-}
-
-.euiColorPicker__popoverPanel--pickerOnly {
-  // Override of EuiPanel padding
-  // stylelint-disable-next-line declaration-no-important
-  padding-bottom: 0 !important;
-}
-
-.euiColorPicker__input {
-  // Manually account for custom left icon / color swatch preview
-  --euiFormControlLeftIconsCount: 1;
-}
-
-.euiColorPicker__alphaRange {
-  .euiRangeInput {
-    min-width: 0;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/_hue.scss b/packages/eui/src/components/color_picker/_hue.scss
index fd1fffe95b0..32e48a33177 100644
--- a/packages/eui/src/components/color_picker/_hue.scss
+++ b/packages/eui/src/components/color_picker/_hue.scss
@@ -12,7 +12,6 @@
   );
   // stylelint-enable color-no-hex
   height: $euiSizeL;
-  margin: $euiSizeXS 0;
   position: relative;
 
   // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
diff --git a/packages/eui/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss
index 41255ed1181..ce1aa1558d7 100644
--- a/packages/eui/src/components/color_picker/_index.scss
+++ b/packages/eui/src/components/color_picker/_index.scss
@@ -1,7 +1,6 @@
 @import 'variables';
-@import 'color_picker';
 @import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
 @import 'color_palette_picker/index';
-@import 'color_palette_display/index';
\ No newline at end of file
+@import 'color_palette_display/index';
diff --git a/packages/eui/src/components/color_picker/_variables.scss b/packages/eui/src/components/color_picker/_variables.scss
index 3bc15347438..08cd1445f7b 100644
--- a/packages/eui/src/components/color_picker/_variables.scss
+++ b/packages/eui/src/components/color_picker/_variables.scss
@@ -3,4 +3,3 @@ $euiColorPickerValueRange1: rgba(255, 255, 255, 0);
 $euiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
 $euiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
 $euiColorPickerIndicatorSize: $euiSizeM;
-$euiColorPickerWidth: ($euiSizeL * 5) + ($euiSizeS * 4); // 5 columns of swatches + margins + border
diff --git a/packages/eui/src/components/color_picker/color_picker.stories.tsx b/packages/eui/src/components/color_picker/color_picker.stories.tsx
index e374027358d..5b2b8fe9bc6 100644
--- a/packages/eui/src/components/color_picker/color_picker.stories.tsx
+++ b/packages/eui/src/components/color_picker/color_picker.stories.tsx
@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { enableFunctionToggleControls } from '../../../.storybook/utils';
 
 import { EuiColorPicker, EuiColorPickerProps } from './color_picker';
 
@@ -33,8 +35,52 @@ const meta: Meta<EuiColorPickerProps> = {
     secondaryInputDisplay: 'none',
   },
 };
+enableFunctionToggleControls(meta, ['onChange']);
 
 export default meta;
 type Story = StoryObj<EuiColorPickerProps>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: (args) => <StatefulColorPicker {...args} />,
+};
+
+export const InlineWithAllElements: Story = {
+  tags: ['vrt-only'],
+  args: {
+    // Component defaults
+    display: 'inline',
+    mode: 'default',
+    showAlpha: true,
+    secondaryInputDisplay: 'top',
+  },
+};
+
+const StatefulColorPicker: FunctionComponent<EuiColorPickerProps> = ({
+  color: _color,
+  format,
+  onChange,
+  ...args
+}) => {
+  const [color, setColor] = useState(_color);
+
+  useEffect(() => {
+    setColor(_color);
+  }, [_color]);
+
+  // Reset the color if hex vs rgba format changes, otherwise the output doesn't update
+  useEffect(() => {
+    setColor('');
+  }, [format]);
+
+  return (
+    <EuiColorPicker
+      {...args}
+      color={color}
+      format={format}
+      onChange={(text, output) => {
+        setColor(text);
+        onChange?.(text, output);
+      }}
+    />
+  );
+};
diff --git a/packages/eui/src/components/color_picker/color_picker.styles.ts b/packages/eui/src/components/color_picker/color_picker.styles.ts
index 7a21fa44803..0531e7f8240 100644
--- a/packages/eui/src/components/color_picker/color_picker.styles.ts
+++ b/packages/eui/src/components/color_picker/color_picker.styles.ts
@@ -6,16 +6,50 @@
  * Side Public License, v 1.
  */
 
-import { UseEuiTheme } from '../../services';
-import { mathWithUnits } from '../../global_styling';
+import { css } from '@emotion/react';
 
-export const euiColorPickerVariables = (euiThemeContext: UseEuiTheme) => {
+import { UseEuiTheme, transparentize } from '../../services';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+
+export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => {
   const euiTheme = euiThemeContext.euiTheme;
 
+  // 5 columns of swatches + margins + border
+  const colorPickerWidth = mathWithUnits(
+    [euiTheme.size.l, euiTheme.size.s],
+    (x, y) => x * 5 + y * 4
+  );
+
   return {
-    width: mathWithUnits(
-      [euiTheme.size.l, euiTheme.size.s],
-      (x, y) => x * 5 + y * 4
-    ),
+    euiColorPicker: css`
+      position: relative;
+      ${logicalCSS('width', colorPickerWidth)}
+
+      /* Using flex and gap allows us to easily handle spacing between multiple modes + showAlpha */
+      display: flex;
+      flex-direction: column;
+      gap: ${euiTheme.size.s};
+    `,
+
+    euiColorPicker__swatches: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${euiTheme.size.s};
+    `,
+
+    euiColorPicker__alphaRange: css`
+      .euiRangeInput {
+        ${logicalCSS('min-width', 0)}
+      }
+    `,
+
+    // Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
+    // Targets a custom className applied directly to the <svg> icon
+    euiColorPicker__swatchInputIcon: css`
+      .euiSwatchInput__stroke {
+        fill: none;
+        stroke: ${transparentize(euiTheme.colors.fullShade, 0.2)};
+      }
+    `,
   };
 };
diff --git a/packages/eui/src/components/color_picker/color_picker.test.tsx b/packages/eui/src/components/color_picker/color_picker.test.tsx
index 8a1e66d3b06..e4b8726ad71 100644
--- a/packages/eui/src/components/color_picker/color_picker.test.tsx
+++ b/packages/eui/src/components/color_picker/color_picker.test.tsx
@@ -7,416 +7,359 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
-import { act } from '@testing-library/react';
 
-import { EuiColorPicker } from './color_picker';
 import { VISUALIZATION_COLORS, keys } from '../../services';
-import { requiredProps, findTestSubject, sleep } from '../../test';
+
+import { EuiColorPicker } from './color_picker';
 
 jest.mock('../portal', () => ({
   EuiPortal: ({ children }: { children: any }) => children,
 }));
 
-const onChange = jest.fn();
+describe('EuiColorPicker', () => {
+  const onChange = jest.fn();
+  beforeEach(() => jest.clearAllMocks());
 
-test('renders EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
+  shouldRenderCustomStyles(
+    <EuiColorPicker onChange={onChange} display="inline" />,
+    { skip: { style: true } } // No ...rest
   );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders compressed EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      compressed={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders readOnly EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      readOnly={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders fullWidth EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      fullWidth={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
 
-test('renders disabled EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      disabled={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  it('renders', () => {
+    const { container } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders inline EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      display="inline"
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('compressed', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        compressed={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders a EuiColorPicker with a prepend and append', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      prepend="prepend"
-      append="append"
-      {...requiredProps}
-    />
-  );
+  test('readOnly', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        readOnly={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('fullWidth', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        fullWidth={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders a EuiColorPicker with an alpha range selector', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      showAlpha={true}
-      {...requiredProps}
-    />
-  );
+  test('disabled', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        disabled={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('inline', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        display="inline"
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders EuiColorPicker with an empty swatch when color is null', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={null} {...requiredProps} />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('prepend and append', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        prepend="prepend"
+        append="append"
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders EuiColorPicker with an empty swatch when color is ""', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={''} {...requiredProps} />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('showAlpha', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        showAlpha={true}
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders EuiColorPicker with a color swatch when color is defined', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={'#ffffff'} {...requiredProps} />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  describe('color', () => {
+    test('null', () => {
+      const { container } = render(
+        <EuiColorPicker onChange={onChange} color={null} {...requiredProps} />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
 
-test('renders EuiColorPicker with a custom placeholder', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} placeholder="Auto" {...requiredProps} />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+    test('empty string', () => {
+      const { container } = render(
+        <EuiColorPicker onChange={onChange} color={''} {...requiredProps} />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
 
-test('renders EuiColorPicker with a clearable input', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color={'#ffeedd'}
-      isClearable={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+    test('valid string', () => {
+      const { container } = render(
+        <EuiColorPicker
+          onChange={onChange}
+          color="#ffffff"
+          {...requiredProps}
+        />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
 
-test('popover color selector is not shown by default', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
+  test('placeholder', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        placeholder="Auto"
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
-  expect(colorSelector.length).toBe(0);
-});
+  test('isClearable', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color={'#ffeedd'}
+        isClearable={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('popover color selector is shown when the input is clicked', () => {
-  const onFocusHandler = jest.fn();
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      onFocus={onFocusHandler}
-      color="#ffeedd"
-      {...requiredProps}
-    />
-  );
+  test('popover color selector is not shown by default', () => {
+    const { queryByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
+    );
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  expect(onFocusHandler).toBeCalled();
-  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
-  expect(colorSelector.length).toBe(1);
-});
+    expect(queryByTestSubject('euiColorPickerPopover')).not.toBeInTheDocument();
+  });
 
-test('popover color selector is hidden when the ESC key pressed', async () => {
-  const onBlurHandler = jest.fn();
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      onBlur={onBlurHandler}
-      {...requiredProps}
-    />
-  );
+  test('popover color selector is shown when the input is clicked', () => {
+    const onFocusHandler = jest.fn();
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} onFocus={onFocusHandler} />
+    );
 
-  await act(
-    async () =>
-      await findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate(
-        'click'
-      )
-  );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+    expect(onFocusHandler).toBeCalled();
+    expect(getByTestSubject('euiColorPickerPopover')).toBeInTheDocument();
+  });
 
-  await act(() => sleep());
+  test('popover color selector is hidden when the ESC key pressed', async () => {
+    const onBlurHandler = jest.fn();
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} onBlur={onBlurHandler} />
+    );
 
-  act(() => {
-    findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('keydown', {
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+    fireEvent.keyDown(getByTestSubject('euiColorPickerAnchor'), {
       key: keys.ENTER,
     });
-  });
-
-  await act(() => sleep());
+    expect(getByTestSubject('euiColorPickerPopover')).toBeInTheDocument();
 
-  act(() => {
-    findTestSubject(colorPicker, 'euiColorPickerPopover').simulate('keydown', {
+    fireEvent.keyDown(getByTestSubject('euiColorPickerPopover'), {
       key: keys.ESCAPE,
     });
+    await (async () => {
+      expect(getByTestSubject('euiColorPickerPopover')).not.toBeInTheDocument();
+      expect(onBlurHandler).toBeCalled(); // The blur handler is called just before the portal would be removed.
+    });
   });
 
-  // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
-  expect(onBlurHandler).toBeCalled();
-});
-
-test('popover color selector is hidden and input regains focus when the ENTER key pressed', () => {
-  const onBlurHandler = jest.fn();
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      onBlur={onBlurHandler}
-      {...requiredProps}
-    />
-  );
+  test('popover color selector is hidden and input regains focus when the ENTER key pressed', async () => {
+    const onBlurHandler = jest.fn();
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} onBlur={onBlurHandler} />
+    );
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  findTestSubject(colorPicker, 'euiSaturation').simulate('keydown', {
-    key: keys.ENTER,
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+    fireEvent.keyDown(getByTestSubject('euiColorPickerAnchor'), {
+      key: keys.ENTER,
+    });
+    await (async () => {
+      expect(getByTestSubject('euiColorPickerAnchor')).toHaveFocus();
+      expect(getByTestSubject('euiColorPickerPopover')).not.toBeInTheDocument();
+    });
   });
-  expect(
-    findTestSubject(colorPicker, 'euiColorPickerAnchor').getDOMNode()
-  ).toEqual(document.activeElement);
-  // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
-  expect(onBlurHandler).toBeCalled();
-});
-
-test('Setting a new color calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const event = { target: { value: '#000000' } };
-  const inputs = colorPicker.find('input[type="text"]');
-  expect(inputs.length).toBe(1);
-  inputs.simulate('change', event);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith('#000000', {
-    hex: '#000000',
-    isValid: true,
-    rgba: [0, 0, 0, 1],
-  });
-});
+  test('Setting a new color calls onChange', () => {
+    const { getByTestSubject } = render(<EuiColorPicker onChange={onChange} />);
 
-test('Clicking a swatch calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
+    const event = { target: { value: '#000000' } };
+    fireEvent.change(getByTestSubject('euiColorPickerAnchor'), event);
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
-  expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
-  swatches.first().simulate('click');
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(VISUALIZATION_COLORS[0], {
-    hex: '#54b399',
-    isValid: true,
-    rgba: [84, 179, 153, 1],
+    expect(onChange).toBeCalled();
+    expect(onChange).toBeCalledWith('#000000', {
+      hex: '#000000',
+      isValid: true,
+      rgba: [0, 0, 0, 1],
+    });
   });
-});
 
-test('Setting a new alpha value calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      showAlpha={true}
-      {...requiredProps}
-    />
-  );
+  test('Clicking a swatch calls onChange', () => {
+    const { getByTestSubject } = render(<EuiColorPicker onChange={onChange} />);
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  // Slider
-  const alpha = findTestSubject(colorPicker, 'euiColorPickerAlpha');
-  const event1 = { target: { value: '50' } };
-  const range = alpha.first(); // input[type=range]
-  range.simulate('change', event1);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith('#ffeedd80', {
-    hex: '#ffeedd80',
-    isValid: true,
-    rgba: [255, 238, 221, 0.5],
-  });
-  // Number input
-  const event2 = { target: { value: '25' } };
-  const input = alpha.at(1); // input[type=number]
-  input.simulate('change', event2);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith('#ffeedd40', {
-    hex: '#ffeedd40',
-    isValid: true,
-    rgba: [255, 238, 221, 0.25],
-  });
-});
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
 
-test('Clicking the "clear" button calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      isClearable={true}
-      {...requiredProps}
-    />
-  );
+    const swatches = document.querySelectorAll('button.euiColorPickerSwatch');
+    expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
 
-  colorPicker.find('.euiFormControlLayoutClearButton').simulate('click');
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith('', {
-    hex: '',
-    isValid: false,
-    rgba: [NaN, NaN, NaN, 1],
+    fireEvent.click(swatches[0]);
+    expect(onChange).toBeCalled();
+    expect(onChange).toBeCalledWith(VISUALIZATION_COLORS[0], {
+      hex: '#54b399',
+      isValid: true,
+      rgba: [84, 179, 153, 1],
+    });
   });
-});
 
-test('default mode does renders child components', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
+  test('Setting a new alpha value calls onChange', () => {
+    const { getByTestSubject, getAllByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" showAlpha={true} />
+    );
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const saturation = findTestSubject(colorPicker, 'euiSaturation');
-  expect(saturation.length).toBe(1);
-  const hue = colorPicker.find('EuiHue');
-  expect(hue.length).toBe(1);
-  const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
-  expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
-});
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
 
-test('swatch mode does not render EuiSaturation or EuiHue', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      mode="swatch"
-      color="#ffeedd"
-      {...requiredProps}
-    />
-  );
+    // Slider
+    const [range, input] = getAllByTestSubject('euiColorPickerAlpha');
+    fireEvent.change(range, { target: { value: '50' } });
+    expect(onChange).toBeCalledWith('#ffeedd80', {
+      hex: '#ffeedd80',
+      isValid: true,
+      rgba: [255, 238, 221, 0.5],
+    });
+    // Number input
+    fireEvent.change(input, { target: { value: '25' } });
+    expect(onChange).toBeCalledWith('#ffeedd40', {
+      hex: '#ffeedd40',
+      isValid: true,
+      rgba: [255, 238, 221, 0.25],
+    });
+  });
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const saturation = colorPicker.find('EuiSaturation');
-  expect(saturation.length).toBe(0);
-  const hue = colorPicker.find('EuiHue');
-  expect(hue.length).toBe(0);
-  const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
-  expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
-});
+  test('Clicking the "clear" button calls onChange', () => {
+    const { getByLabelText } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" isClearable={true} />
+    );
+
+    fireEvent.click(getByLabelText('Clear input'));
+    expect(onChange).toBeCalled();
+    expect(onChange).toBeCalledWith('', {
+      hex: '',
+      isValid: false,
+      rgba: [NaN, NaN, NaN, 1],
+    });
+  });
 
-test('picker mode does not render swatches', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      mode="picker"
-      color="#ffeedd"
-      {...requiredProps}
-    />
-  );
+  test('default mode does renders child components', () => {
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" />
+    );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+
+    expect(document.querySelector('.euiSaturation')).toBeInTheDocument();
+    expect(document.querySelector('.euiHue')).toBeInTheDocument();
+    expect(
+      document.querySelectorAll('button.euiColorPickerSwatch').length
+    ).toBe(VISUALIZATION_COLORS.length);
+  });
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const saturation = findTestSubject(colorPicker, 'euiSaturation');
-  expect(saturation.length).toBe(1);
-  const hue = colorPicker.find('EuiHue');
-  expect(hue.length).toBe(1);
-  const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
-  expect(swatches.length).toBe(0);
-});
+  test('swatch mode does not render EuiSaturation or EuiHue', () => {
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} mode="swatch" />
+    );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+
+    expect(document.querySelector('.euiSaturation')).not.toBeInTheDocument();
+    expect(document.querySelector('.euiHue')).not.toBeInTheDocument();
+    expect(
+      document.querySelectorAll('button.euiColorPickerSwatch').length
+    ).toBe(VISUALIZATION_COLORS.length);
+  });
 
-test('secondaryInputDisplay `top` has a popover panel input', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      secondaryInputDisplay="top"
-      color="#ffeedd"
-      {...requiredProps}
-    />
-  );
+  test('picker mode does not render swatches', () => {
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} mode="picker" />
+    );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+
+    expect(document.querySelector('.euiSaturation')).toBeInTheDocument();
+    expect(document.querySelector('.euiHue')).toBeInTheDocument();
+    expect(
+      document.querySelectorAll('button.euiColorPickerSwatch').length
+    ).toBe(0);
+  });
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const inputTop = findTestSubject(colorPicker, 'euiColorPickerInput_top');
-  const inputBottom = findTestSubject(
-    colorPicker,
-    'euiColorPickerInput_bottom'
-  );
-  expect(inputTop.length).toBe(1);
-  expect(inputBottom.length).toBe(0);
-});
+  test('secondaryInputDisplay `top` has a popover panel input', () => {
+    const { getByTestSubject, queryByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} secondaryInputDisplay="top" />
+    );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
 
-test('secondaryInputDisplay `bottom` has a popover panel input', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      secondaryInputDisplay="bottom"
-      color="#ffeedd"
-      {...requiredProps}
-    />
-  );
+    expect(queryByTestSubject('euiColorPickerInput_top')).toBeInTheDocument();
+    expect(
+      queryByTestSubject('euiColorPickerInput_bottom')
+    ).not.toBeInTheDocument();
+  });
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  const inputTop = findTestSubject(colorPicker, 'euiColorPickerInput_top');
-  const inputBottom = findTestSubject(
-    colorPicker,
-    'euiColorPickerInput_bottom'
-  );
-  expect(inputTop.length).toBe(0);
-  expect(inputBottom.length).toBe(1);
+  test('secondaryInputDisplay `bottom` has a popover panel input', () => {
+    const { getByTestSubject, queryByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} secondaryInputDisplay="bottom" />
+    );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
+
+    expect(
+      queryByTestSubject('euiColorPickerInput_top')
+    ).not.toBeInTheDocument();
+    expect(
+      queryByTestSubject('euiColorPickerInput_bottom')
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/eui/src/components/color_picker/color_picker.tsx b/packages/eui/src/components/color_picker/color_picker.tsx
index 6e41de4af9b..362c1bd6d3b 100644
--- a/packages/eui/src/components/color_picker/color_picker.tsx
+++ b/packages/eui/src/components/color_picker/color_picker.tsx
@@ -19,6 +19,11 @@ import React, {
 import classNames from 'classnames';
 import chroma, { ColorSpaces } from 'chroma-js';
 
+import {
+  useEuiMemoizedStyles,
+  VISUALIZATION_COLORS,
+  keys,
+} from '../../services';
 import { CommonProps } from '../common';
 import {
   EuiFieldText,
@@ -28,11 +33,8 @@ import {
   EuiRange,
   EuiRangeProps,
 } from '../form';
-import { getFormControlClassNameForIconCount } from '../form/form_control_layout/_num_icons';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
-import { EuiSpacer } from '../spacer';
-import { VISUALIZATION_COLORS, keys } from '../../services';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 import { EuiHue } from './hue';
@@ -45,6 +47,7 @@ import {
   RGB_FALLBACK,
   RGB_JOIN,
 } from './utils';
+import { euiColorPickerStyles } from './color_picker.styles';
 
 type EuiColorPickerDisplay = 'default' | 'inline';
 type EuiColorPickerMode = 'default' | 'swatch' | 'picker' | 'secondaryInput';
@@ -280,20 +283,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   };
 
   const classes = classNames('euiColorPicker', className);
-  const popoverClass = 'euiColorPicker__popoverAnchor';
-  const panelClasses = classNames('euiColorPicker__popoverPanel', {
-    'euiColorPicker__popoverPanel--pickerOnly':
-      mode === 'picker' && secondaryInputDisplay !== 'bottom',
-    'euiColorPicker__popoverPanel--customButton': button,
-  });
-  const swatchClass = 'euiColorPicker__swatchSelect';
-
-  const numIconsClass = getFormControlClassNameForIconCount({
-    isDropdown: true,
-    clear: isClearable,
-    isInvalid,
-  });
-  const inputClasses = classNames('euiColorPicker__input', numIconsClass);
+  const styles = useEuiMemoizedStyles(euiColorPickerStyles);
 
   const handleOnChange = (text: string) => {
     const output = getOutput(text, showAlpha);
@@ -462,7 +452,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     }
   };
 
-  const inlineInput = secondaryInputDisplay !== 'none' && (
+  const showSecondaryInput =
+    mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
+  const inlineInput = showSecondaryInput && (
     <EuiFormRow
       display="rowCompressed"
       isInvalid={isInvalid}
@@ -475,10 +467,13 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
             : undefined
         }
         readOnly={readOnly}
-        compressed={compressed}
+        isDisabled={disabled}
+        isInvalid={isInvalid}
+        compressed={display === 'inline' ? compressed : true}
       >
         <EuiFieldText
-          compressed={true}
+          controlOnly={true}
+          compressed={display === 'inline' ? compressed : true}
           value={color ? color.toUpperCase() : HEX_FALLBACK}
           placeholder={!color ? placeholder || transparent : undefined}
           onChange={handleColorInput}
@@ -499,35 +494,34 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
 
   const composite = (
     <>
-      {secondaryInputDisplay === 'top' && (
-        <>
-          {inlineInput}
-          <EuiSpacer size="s" />
-        </>
-      )}
+      {secondaryInputDisplay === 'top' && inlineInput}
       {showPicker && (
-        <div onKeyDown={handleOnKeyDown}>
+        <>
           <EuiSaturation
             id={id}
             color={usableHsv}
             hex={chromaColor ? chromaColor.hex() : undefined}
             onChange={handleColorSelection}
             ref={saturationRef}
+            onKeyDown={handleOnKeyDown}
           />
           <EuiHue
             id={id}
             hue={usableHsv[0]}
             hex={chromaColor ? chromaColor.hex() : undefined}
             onChange={handleHueSelection}
+            onKeyDown={handleOnKeyDown}
           />
-        </div>
+        </>
       )}
       {showSwatches && (
-        <ul className="euiColorPicker__swatches">
+        <ul
+          css={styles.euiColorPicker__swatches}
+          className="euiColorPicker__swatches"
+        >
           {swatches.map((swatch, index) => (
-            <li className="euiColorPicker__swatch-item" key={swatch}>
+            <li key={swatch}>
               <EuiColorPickerSwatch
-                className={swatchClass}
                 color={swatch}
                 onClick={() => handleSwatchSelection(swatch)}
                 ref={index === 0 ? swatchRef : undefined}
@@ -536,29 +530,21 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
           ))}
         </ul>
       )}
-      {secondaryInputDisplay === 'bottom' && (
-        <>
-          {mode !== 'picker' && <EuiSpacer size="s" />}
-          {inlineInput}
-        </>
-      )}
+      {secondaryInputDisplay === 'bottom' && inlineInput}
       {showAlpha && (
-        <>
-          <EuiSpacer size="s" />
-
-          <EuiRange
-            className="euiColorPicker__alphaRange"
-            data-test-subj="euiColorPickerAlpha"
-            compressed={true}
-            showInput={true}
-            max={100}
-            min={0}
-            value={alphaRangeValue}
-            append="%"
-            onChange={handleAlphaSelection}
-            aria-label={alphaLabel}
-          />
-        </>
+        <EuiRange
+          css={styles.euiColorPicker__alphaRange}
+          className="euiColorPicker__alphaRange"
+          data-test-subj="euiColorPickerAlpha"
+          compressed={true}
+          showInput={true}
+          max={100}
+          min={0}
+          value={alphaRangeValue}
+          append="%"
+          onChange={handleAlphaSelection}
+          aria-label={alphaLabel}
+        />
       )}
     </>
   );
@@ -581,6 +567,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
                 type: 'swatchInput',
                 side: 'left',
                 color: colorStyle,
+                css: styles.euiColorPicker__swatchInputIcon,
               }
             : {
                 type: 'stopSlash',
@@ -604,14 +591,13 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
         isDropdown
       >
         <EuiFieldText
-          className={inputClasses}
+          className="euiColorPicker__input"
           onClick={handleInputActivity}
           onKeyDown={handleInputActivity}
           onBlur={handleOnBlur}
           value={color ? color.toUpperCase() : HEX_FALLBACK}
           placeholder={!color ? placeholder || transparent : undefined}
           id={id}
-          icon="empty" // Required to make space (left padding) for the color swatch icon
           onChange={handleColorInput}
           inputRef={setInputRef}
           isInvalid={isInvalid}
@@ -629,7 +615,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   }
 
   return display === 'inline' ? (
-    <div className={classes}>{composite}</div>
+    <div css={styles.euiColorPicker} className={classes}>
+      {composite}
+    </div>
   ) : (
     <EuiPopover
       initialFocus={inputRef ?? undefined}
@@ -637,8 +625,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
       isOpen={isColorSelectorShown}
       closePopover={handleFinalSelection}
       zIndex={popoverZIndex}
-      className={popoverClass}
-      panelClassName={panelClasses}
+      className="euiColorPicker__popoverAnchor"
+      panelClassName="euiColorPicker__popoverPanel"
       display={button ? 'inline-block' : 'block'}
       attachToAnchor={button ? false : true}
       anchorPosition="downLeft"
@@ -647,7 +635,11 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
       aria-label={popoverLabel}
       focusTrapProps={inputRef ? { shards: [inputRef] } : undefined}
     >
-      <div className={classes} data-test-subj="euiColorPickerPopover">
+      <div
+        css={styles.euiColorPicker}
+        className={classes}
+        data-test-subj="euiColorPickerPopover"
+      >
         {composite}
       </div>
     </EuiPopover>
diff --git a/packages/eui/src/components/color_picker/hue.tsx b/packages/eui/src/components/color_picker/hue.tsx
index 490ce5ddb45..62ed118d0c5 100644
--- a/packages/eui/src/components/color_picker/hue.tsx
+++ b/packages/eui/src/components/color_picker/hue.tsx
@@ -42,7 +42,7 @@ export const EuiHue: FunctionComponent<EuiHueProps> = ({
   };
   const classes = classNames('euiHue', className);
   return (
-    <React.Fragment>
+    <div className={classes}>
       <EuiScreenReaderOnly>
         <label htmlFor={`${id}-hue`}>
           <EuiI18n
@@ -54,19 +54,17 @@ export const EuiHue: FunctionComponent<EuiHueProps> = ({
       <EuiScreenReaderOnly>
         <p aria-live="polite">{hex}</p>
       </EuiScreenReaderOnly>
-      <div className={classes}>
-        <input
-          id={`${id}-hue`}
-          min={0}
-          max={HUE_RANGE}
-          step={1}
-          type="range"
-          className="euiHue__range"
-          value={hue}
-          onChange={handleChange}
-          {...rest}
-        />
-      </div>
-    </React.Fragment>
+      <input
+        id={`${id}-hue`}
+        min={0}
+        max={HUE_RANGE}
+        step={1}
+        type="range"
+        className="euiHue__range"
+        value={hue}
+        onChange={handleChange}
+        {...rest}
+      />
+    </div>
   );
 };
diff --git a/packages/eui/src/components/color_picker/saturation.tsx b/packages/eui/src/components/color_picker/saturation.tsx
index 1096df230d0..74acecaa070 100644
--- a/packages/eui/src/components/color_picker/saturation.tsx
+++ b/packages/eui/src/components/color_picker/saturation.tsx
@@ -55,6 +55,7 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       hex,
       id,
       onChange,
+      onKeyDown,
       ...rest
     },
     ref
@@ -116,6 +117,7 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       boxRef.current
     );
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(event);
       if (isNil(boxRef?.current)) return;
       const { height, width } = boxRef.current.getBoundingClientRect();
       const { left, top } = indicator;
diff --git a/packages/eui/src/themes/amsterdam/overrides/_hue.scss b/packages/eui/src/themes/amsterdam/overrides/_hue.scss
index b78b8e05b59..d9fcff400a1 100644
--- a/packages/eui/src/themes/amsterdam/overrides/_hue.scss
+++ b/packages/eui/src/themes/amsterdam/overrides/_hue.scss
@@ -2,7 +2,6 @@
   position: relative;
   height: $euiSizeM;
   border-radius: $euiSizeM;
-  margin: $euiSizeS 0;
 
   &::before,
   &::after {