From 17f68d5e324863804de3a649ba9f27f3ac005140 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 28 Jun 2024 12:41:07 -0700
Subject: [PATCH] [Emotion] Convert all color picker components (#7863)

---
 ...uiColorPicker_Inline_With_All_Elements.png | Bin 0 -> 16208 bytes
 ...uiColorPicker_Inline_With_All_Elements.png | Bin 0 -> 46740 bytes
 packages/eui/changelogs/upcoming/7845.md      |   3 +
 packages/eui/changelogs/upcoming/7853.md      |   3 +
 packages/eui/changelogs/upcoming/7854.md      |   5 +
 packages/eui/changelogs/upcoming/7859.md      |   3 +
 .../__snapshots__/color_picker.test.tsx.snap  | 520 +++++++-------
 .../color_picker_swatch.test.tsx.snap         |   2 +-
 .../__snapshots__/hue.test.tsx.snap           |  76 +-
 .../__snapshots__/saturation.test.tsx.snap    |  32 +-
 .../color_picker/_color_picker.scss           |  37 -
 .../color_picker/_color_picker_swatch.scss    |  18 -
 .../eui/src/components/color_picker/_hue.scss |  88 ---
 .../src/components/color_picker/_index.scss   |   7 -
 .../components/color_picker/_saturation.scss  |  57 --
 .../components/color_picker/_variables.scss   |   6 -
 .../color_palette_display.test.tsx.snap       |  32 +-
 .../_color_palette_display.scss               |  18 -
 .../_color_palette_display_fixed.scss         |  12 -
 .../color_palette_display/_index.scss         |   4 -
 .../color_palette_display/_mixins.scss        |  22 -
 .../color_palette_display/_variables.scss     |   6 -
 .../color_palette_display.styles.ts           |  54 ++
 .../color_palette_display.test.tsx            |   5 +-
 .../color_palette_display.tsx                 |  27 +-
 .../color_palette_display_fixed.styles.ts     |  20 +
 .../color_palette_display_fixed.tsx           |   2 +
 .../color_palette_picker.test.tsx.snap        | 340 +++++++--
 .../_color_palette_picker.scss                |   9 -
 .../color_palette_picker/_index.scss          |   1 -
 .../color_palette_picker.test.tsx             |  15 +-
 .../color_palette_picker.tsx                  | 102 +--
 .../color_picker/color_picker.stories.tsx     |  48 +-
 .../color_picker/color_picker.styles.ts       |  48 +-
 .../color_picker/color_picker.test.tsx        | 651 ++++++++----------
 .../components/color_picker/color_picker.tsx  | 110 ++-
 .../color_picker_swatch.styles.ts             |  46 ++
 .../color_picker/color_picker_swatch.test.tsx |   3 +
 .../color_picker/color_picker_swatch.tsx      |   8 +-
 .../src/components/color_picker/hue.styles.ts |  95 +++
 .../src/components/color_picker/hue.test.tsx  |  10 +
 .../eui/src/components/color_picker/hue.tsx   |  39 +-
 .../color_picker/saturation.styles.ts         |  88 +++
 .../color_picker/saturation.test.tsx          |   3 +
 .../components/color_picker/saturation.tsx    | 172 +++--
 .../src/components/form/range/range.styles.ts |   2 +-
 packages/eui/src/components/index.scss        |   1 -
 .../src/themes/amsterdam/overrides/_hue.scss  |  44 --
 .../themes/amsterdam/overrides/_index.scss    |   1 -
 49 files changed, 1592 insertions(+), 1303 deletions(-)
 create mode 100644 packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
 create mode 100644 packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
 create mode 100644 packages/eui/changelogs/upcoming/7845.md
 create mode 100644 packages/eui/changelogs/upcoming/7853.md
 create mode 100644 packages/eui/changelogs/upcoming/7854.md
 create mode 100644 packages/eui/changelogs/upcoming/7859.md
 delete mode 100644 packages/eui/src/components/color_picker/_color_picker.scss
 delete mode 100644 packages/eui/src/components/color_picker/_color_picker_swatch.scss
 delete mode 100644 packages/eui/src/components/color_picker/_hue.scss
 delete mode 100644 packages/eui/src/components/color_picker/_index.scss
 delete mode 100644 packages/eui/src/components/color_picker/_saturation.scss
 delete mode 100644 packages/eui/src/components/color_picker/_variables.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_color_palette_display.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_index.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_mixins.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_variables.scss
 create mode 100644 packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
 create mode 100644 packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_picker/_color_palette_picker.scss
 delete mode 100644 packages/eui/src/components/color_picker/color_palette_picker/_index.scss
 create mode 100644 packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
 create mode 100644 packages/eui/src/components/color_picker/hue.styles.ts
 create mode 100644 packages/eui/src/components/color_picker/saturation.styles.ts
 delete mode 100644 packages/eui/src/themes/amsterdam/overrides/_hue.scss

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 0000000000000000000000000000000000000000..67f60a30e0470558980b332f4b5fbbbb0f3a30ab
GIT binary patch
literal 16208
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

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..263d4deeae5fff8b52ffc394f8cdaab1affee4cf
GIT binary patch
literal 46740
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

literal 0
HcmV?d00001

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/changelogs/upcoming/7853.md b/packages/eui/changelogs/upcoming/7853.md
new file mode 100644
index 00000000000..f2cf7ab7f5f
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7853.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPickerSwatch` to Emotion
diff --git a/packages/eui/changelogs/upcoming/7854.md b/packages/eui/changelogs/upcoming/7854.md
new file mode 100644
index 00000000000..9bf99deb9ff
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7854.md
@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion
+  - Removed `$euiColorPaletteDisplaySizes`
+  - Removed `@mixin euiColorPaletteInnerBorder`
diff --git a/packages/eui/changelogs/upcoming/7859.md b/packages/eui/changelogs/upcoming/7859.md
new file mode 100644
index 00000000000..710884c526e
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7859.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`,  `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize`
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 d89f29a410f..7d6a0f25ffe 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"
 >
@@ -20,18 +20,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"
@@ -51,7 +52,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"
 >
@@ -60,7 +61,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
-      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
+      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
@@ -71,32 +72,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"
         >
@@ -112,7 +104,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"
 >
@@ -127,7 +119,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"
@@ -140,7 +132,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"
@@ -163,12 +155,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"
@@ -178,24 +170,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"
@@ -215,64 +206,51 @@ 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"
-      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
+      style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
         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"
@@ -282,24 +260,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"
@@ -319,27 +296,172 @@ 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 emotion-euiSaturation"
+    data-test-subj="euiSaturation"
+    style="background: rgb(255, 128, 0);"
+    tabindex="-1"
+  >
+    <div
+      class="euiSaturation__lightness emotion-euiSaturation__lightness"
+    >
+      <div
+        class="euiSaturation__saturation emotion-euiSaturation__saturation"
+      />
+    </div>
+    <button
+      aria-describedby="generated-id-instructions"
+      aria-label="#ffeedd"
+      aria-roledescription="HSV color mode saturation and value 2-axis slider"
+      class="euiSaturation__indicator emotion-euiSaturation__indicator"
+      id="generated-id-saturationIndicator"
+      style="inset-inline-start: 0; inset-block-start: 0;"
+    />
+    <span
+      aria-live="assertive"
+      hidden=""
+    >
+      #ffeedd
+    </span>
+    <span
+      hidden=""
+      id="generated-id-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 emotion-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 emotion-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 emotion-euiColorPickerSwatch"
+        style="background: rgb(84, 179, 153);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #6092C0 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(96, 146, 192);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #D36086 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(211, 96, 134);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #9170B8 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(145, 112, 184);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #CA8EAE as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(202, 142, 174);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #D6BF57 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(214, 191, 87);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #B9A888 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(185, 168, 136);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #DA8B45 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(218, 139, 69);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #AA6556 as the color"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
+        style="background: rgb(170, 101, 86);"
+        type="button"
+      />
+    </li>
+    <li>
+      <button
+        aria-label="Select #E7664C as the color"
+        class="euiColorPickerSwatch emotion-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"
-      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
+      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
     >
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -352,7 +474,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"
@@ -360,6 +482,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"
         >
@@ -371,16 +503,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"
 >
@@ -400,18 +527,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"
@@ -431,13 +559,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"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
@@ -446,7 +579,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -459,7 +592,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"
@@ -478,16 +611,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"
@@ -497,7 +635,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -510,9 +648,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"
       />
@@ -521,12 +659,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"
@@ -536,7 +674,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -549,7 +687,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"
@@ -572,194 +710,22 @@ 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: rgb(255, 128, 0);"
-      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"
-      style="--euiFormControlLeftIconsCount: 1;"
+      style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -772,12 +738,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__/color_picker_swatch.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
index daf72f20f11..847c458fcb3 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiColorPickerSwatch is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiColorPickerSwatch testClass1 testClass2 emotion-euiTestCss"
+  class="euiColorPickerSwatch testClass1 testClass2 emotion-euiColorPickerSwatch-euiTestCss"
   data-test-subj="test subject string"
   style="background: transparent;"
   type="button"
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..6f0287ef11f 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,24 +2,24 @@
 
 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"
+    class="euiHue testClass1 testClass2 emotion-euiHue-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"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"
@@ -34,22 +34,22 @@ 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"
+    class="euiHue testClass1 testClass2 emotion-euiHue-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"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"
@@ -64,22 +64,22 @@ 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"
+    class="euiHue testClass1 testClass2 emotion-euiHue-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"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"
diff --git a/packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap
index f6e92bdee0d..8c911b9c214 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap
@@ -3,24 +3,24 @@
 exports[`EuiHue accepts a color 1`] = `
 <div
   aria-label="aria-label"
-  class="euiSaturation testClass1 testClass2 emotion-euiTestCss"
+  class="euiSaturation testClass1 testClass2 emotion-euiSaturation-euiTestCss"
   data-test-subj="test subject string"
   style="background: rgb(0, 255, 255);"
   tabindex="-1"
 >
   <div
-    class="euiSaturation__lightness"
+    class="euiSaturation__lightness emotion-euiSaturation__lightness"
   >
     <div
-      class="euiSaturation__saturation"
+      class="euiSaturation__saturation emotion-euiSaturation__saturation"
     />
   </div>
   <button
-    aria-describedby="undefined-instructions"
+    aria-describedby="generated-id-instructions"
     aria-roledescription="HSV color mode saturation and value 2-axis slider"
-    class="euiSaturation__indicator"
-    id="undefined-saturationIndicator"
-    style="left: 0px; top: 0px;"
+    class="euiSaturation__indicator emotion-euiSaturation__indicator"
+    id="generated-id-saturationIndicator"
+    style="inset-inline-start: 0; inset-block-start: 0;"
   />
   <span
     aria-live="assertive"
@@ -28,7 +28,7 @@ exports[`EuiHue accepts a color 1`] = `
   />
   <span
     hidden=""
-    id="undefined-instructions"
+    id="generated-id-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>
@@ -38,24 +38,24 @@ exports[`EuiHue accepts a color 1`] = `
 exports[`EuiHue is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiSaturation testClass1 testClass2 emotion-euiTestCss"
+  class="euiSaturation testClass1 testClass2 emotion-euiSaturation-euiTestCss"
   data-test-subj="test subject string"
   style="background: rgb(255, 4, 0);"
   tabindex="-1"
 >
   <div
-    class="euiSaturation__lightness"
+    class="euiSaturation__lightness emotion-euiSaturation__lightness"
   >
     <div
-      class="euiSaturation__saturation"
+      class="euiSaturation__saturation emotion-euiSaturation__saturation"
     />
   </div>
   <button
-    aria-describedby="undefined-instructions"
+    aria-describedby="generated-id-instructions"
     aria-roledescription="HSV color mode saturation and value 2-axis slider"
-    class="euiSaturation__indicator"
-    id="undefined-saturationIndicator"
-    style="left: 0px; top: 0px;"
+    class="euiSaturation__indicator emotion-euiSaturation__indicator"
+    id="generated-id-saturationIndicator"
+    style="inset-inline-start: 0; inset-block-start: 0;"
   />
   <span
     aria-live="assertive"
@@ -63,7 +63,7 @@ exports[`EuiHue is rendered 1`] = `
   />
   <span
     hidden=""
-    id="undefined-instructions"
+    id="generated-id-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>
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/_color_picker_swatch.scss b/packages/eui/src/components/color_picker/_color_picker_swatch.scss
deleted file mode 100644
index ba8c5adebfd..00000000000
--- a/packages/eui/src/components/color_picker/_color_picker_swatch.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-.euiColorPickerSwatch {
-  display: inline-block;
-  height: $euiSizeL;
-  width: $euiSizeL;
-  border-radius: $euiBorderRadius / 2;
-  cursor: pointer;
-  border: solid 1px transparentize($euiColorFullShade, .9);
-  box-shadow: inset 0 0 0 1px transparentize($euiColorEmptyShade, .95);
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/_hue.scss b/packages/eui/src/components/color_picker/_hue.scss
deleted file mode 100644
index fd1fffe95b0..00000000000
--- a/packages/eui/src/components/color_picker/_hue.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-// This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
-.euiHue {
-  // stylelint-disable color-no-hex
-  background: linear-gradient(to right,
-    #FF3232 0%,
-    #FFF130 20%,
-    #45FF30 35%,
-    #28FFF0 52%,
-    #282CFF 71%,
-    #FF28FB 88%,
-    #FF0094 100%
-  );
-  // 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
-  &::before,
-  &::after {
-    content: '';
-    left: 0;
-    position: absolute;
-    height: $euiSizeS;
-    background: $euiColorEmptyShade;
-    width: 100%;
-  }
-
-  &::after {
-    bottom: 0;
-  }
-}
-
-// The range itself is the same height
-.euiHue__range {
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-    @include euiRangeThumbStyle;
-  }
-
-  position: relative;
-  height: $euiSizeL;
-  width: calc(100% + 2px); // Allow for overlap
-  margin: 0 -1px; // Use ^ overlap to allow thumb to fully cover gradient ends
-  appearance: none;
-  background: transparent;
-  z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
-
-  // Resets for the range
-
-  // Disable linter for these very unique vendor controls
-  // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: 0;
-  }
-
-  &::-ms-thumb {
-    margin-top: 0;
-  }
-
-  &::-ms-track {
-    height: $euiSizeL;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-
-  &::-moz-focus-outer {
-    border: none;
-  }
-
-  &::-ms-fill-lower,
-  &::-ms-fill-upper {
-    background: transparent;
-  }
-
-  // Thumb has trouble with animation, so we make something similar to `@include euiFocusRing`
-  &:focus {
-    @include euiRangeThumbPerBrowser {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-
-    // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
-    outline: none;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss
deleted file mode 100644
index 41255ed1181..00000000000
--- a/packages/eui/src/components/color_picker/_index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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
diff --git a/packages/eui/src/components/color_picker/_saturation.scss b/packages/eui/src/components/color_picker/_saturation.scss
deleted file mode 100644
index 53d32cdab97..00000000000
--- a/packages/eui/src/components/color_picker/_saturation.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-
-.euiSaturation {
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  border-radius: $euiBorderRadius / 2;
-  touch-action: none; // prevent TouchMove events from scrolling page
-  z-index: 3; // Required to be above the hue slider, which can overlap
-
-  .euiSaturation__lightness,
-  .euiSaturation__saturation {
-    position: absolute;
-    top: -1px; // hides a slight color inconsistency
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: $euiBorderRadius / 2;
-  }
-
-  .euiSaturation__lightness {
-    background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1);
-  }
-
-  .euiSaturation__saturation {
-    background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1);
-  }
-
-  .euiSaturation__indicator {
-    position: absolute;
-    height: $euiColorPickerIndicatorSize;
-    width: $euiColorPickerIndicatorSize;
-    border-radius: 100%;
-    margin-top: $euiColorPickerIndicatorSize * -.5;
-    margin-left: $euiColorPickerIndicatorSize * -.5;
-    border: 1px solid $euiColorDarkestShade;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 100%;
-      border: 1px solid $euiColorLightestShade;
-    }
-  }
-
-  &:focus {
-    outline: none; // Hide focus ring because of `tabindex=0` on Safari
-
-    .euiSaturation__indicator {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-  }
-}
diff --git a/packages/eui/src/components/color_picker/_variables.scss b/packages/eui/src/components/color_picker/_variables.scss
deleted file mode 100644
index 3bc15347438..00000000000
--- a/packages/eui/src/components/color_picker/_variables.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$euiColorPickerValueRange0: rgba(255, 255, 255, 1);
-$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_palette_display/__snapshots__/color_palette_display.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
index cc478348f6f..02b8d337d96 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`EuiColorPaletteDisplay is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -32,7 +32,7 @@ exports[`EuiColorPaletteDisplay is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
   id="id"
 >
@@ -43,7 +43,7 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`
   </span>
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -67,12 +67,12 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`
 exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeMedium"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-m-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -96,12 +96,12 @@ exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -125,12 +125,12 @@ exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeExtraSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-xs-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -154,12 +154,12 @@ exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type fixed and palette with stops 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(84, 179, 153); width: 21%;"
@@ -180,12 +180,12 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type fixed and palette without stops 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -210,7 +210,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type gr
 <span
   aria-hidden="true"
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
@@ -219,7 +219,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type gr
 <span
   aria-hidden="true"
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
diff --git a/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display.scss b/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display.scss
deleted file mode 100644
index 553c8a3f163..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.euiColorPaletteDisplay {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  height: $euiSizeS;
-}
-
-@each $name, $size in $euiColorPaletteDisplaySizes {
-  .euiColorPaletteDisplay--#{$name} {
-    @include euiColorPaletteInnerBorder('dark', $size, .2);
-    height: $size;
-    border-radius: $size;
-  }
-
-  .euiColorPaletteDisplay--#{$name} .euiColorPaletteDisplayFixed__bleedArea {
-    height: $size;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss b/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss
deleted file mode 100644
index f39a743f052..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.euiColorPaletteDisplayFixed {
-  // In a few screen sizes the palette display doesn't get a fully 100% width
-  // it gets 1px less on width and for this reason we're adding an horizontal 1px bleed area
-  &__bleedArea {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    height: $euiSizeS;
-    width: calc(100% + 1px);
-  }
-}
diff --git a/packages/eui/src/components/color_picker/color_palette_display/_index.scss b/packages/eui/src/components/color_picker/color_palette_display/_index.scss
deleted file mode 100644
index 19a628464d6..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_display/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'color_palette_display';
-@import 'color_palette_display_fixed';
diff --git a/packages/eui/src/components/color_picker/color_palette_display/_mixins.scss b/packages/eui/src/components/color_picker/color_palette_display/_mixins.scss
deleted file mode 100644
index 2e44ea649bf..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_display/_mixins.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Useful border shade when dealing with images of unknown color.
-@mixin euiColorPaletteInnerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) {
-  $color: rgba($euiColorDarkestShade, $alpha);
-
-  @if $type == 'light' {
-    $color: rgba($euiColorEmptyShade, $alpha);
-  }
-
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: $borderRadius;
-    content: '';
-    pointer-events: none;
-    border: 1px solid $color;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/color_palette_display/_variables.scss b/packages/eui/src/components/color_picker/color_palette_display/_variables.scss
deleted file mode 100644
index 96c9024c891..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_display/_variables.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// Color Palette Display come in different sizes.
-$euiColorPaletteDisplaySizes: (
-  sizeExtraSmall: $euiSizeXS,
-  sizeSmall: $euiSizeS,
-  sizeMedium: $euiSize,
-);
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
new file mode 100644
index 00000000000..279785d34c0
--- /dev/null
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme, transparentize } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+
+export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  // Border is a pseudo element with transparency
+  const border = `${euiTheme.border.width.thin} solid ${transparentize(
+    euiTheme.colors.darkestShade,
+    0.2
+  )}`;
+
+  return {
+    euiColorPaletteDisplay: css`
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border: ${border};
+        border-radius: inherit;
+      }
+    `,
+
+    // Sizes
+    xs: css`
+      ${logicalCSS('height', euiTheme.size.xs)}
+      border-radius: ${euiTheme.size.xs};
+    `,
+    s: css`
+      ${logicalCSS('height', euiTheme.size.s)}
+      border-radius: ${euiTheme.size.s};
+    `,
+    m: css`
+      ${logicalCSS('height', euiTheme.size.base)}
+      border-radius: ${euiTheme.size.base};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.test.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.test.tsx
index e460c460070..4ca703e8a7f 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.test.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.test.tsx
@@ -7,10 +7,11 @@
  */
 
 import React from 'react';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 import { render } from '../../../test/rtl';
 
 import { EuiColorPaletteDisplay, SIZES } from './color_palette_display';
-import { requiredProps } from '../../../test';
 
 const palette = ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'];
 
@@ -34,6 +35,8 @@ const paletteWithStops = [
 ];
 
 describe('EuiColorPaletteDisplay', () => {
+  shouldRenderCustomStyles(<EuiColorPaletteDisplay palette={palette} />);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiColorPaletteDisplay {...requiredProps} palette={palette} />
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.tsx
index f3976c111af..0937b5ce651 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.tsx
@@ -8,7 +8,10 @@
 
 import React, { FunctionComponent } from 'react';
 import classnames from 'classnames';
-import { ExclusiveUnion, keysOf } from '../../common';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { ExclusiveUnion } from '../../common';
+
 import type { PaletteColorStop } from '../color_palette_picker';
 import {
   EuiColorPaletteDisplayFixed,
@@ -18,16 +21,11 @@ import {
   EuiColorPaletteDisplayGradient,
   EuiColorPaletteDisplayGradientProps,
 } from './color_palette_display_gradient';
+import { euiColorPaletteDisplayStyles } from './color_palette_display.styles';
 
-const sizeToClassNameMap = {
-  xs: 'euiColorPaletteDisplay--sizeExtraSmall',
-  s: 'euiColorPaletteDisplay--sizeSmall',
-  m: 'euiColorPaletteDisplay--sizeMedium',
-};
-
-export const SIZES = keysOf(sizeToClassNameMap);
+export const SIZES = ['xs', 's', 'm'] as const;
 
-export type EuiColorPaletteDisplaySize = keyof typeof sizeToClassNameMap;
+export type EuiColorPaletteDisplaySize = (typeof SIZES)[number];
 
 export interface EuiColorPaletteDisplayShared {
   /**
@@ -61,22 +59,23 @@ export type EuiColorPaletteDisplayProps = {
 export const EuiColorPaletteDisplay: FunctionComponent<
   EuiColorPaletteDisplayProps
 > = ({ type = 'fixed', palette, className, size = 's', ...rest }) => {
-  const classes = classnames(
-    'euiColorPaletteDisplay',
-    className,
-    sizeToClassNameMap[size]
-  );
+  const classes = classnames('euiColorPaletteDisplay', className);
+
+  const styles = useEuiMemoizedStyles(euiColorPaletteDisplayStyles);
+  const cssStyles = [styles.euiColorPaletteDisplay, styles[size]];
 
   return (
     <>
       {type === 'fixed' ? (
         <EuiColorPaletteDisplayFixed
+          css={cssStyles}
           className={classes}
           palette={palette}
           {...rest}
         />
       ) : (
         <EuiColorPaletteDisplayGradient
+          css={cssStyles}
           className={classes}
           palette={palette}
           {...rest}
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts
new file mode 100644
index 00000000000..d104cd3b059
--- /dev/null
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { logicalCSS } from '../../../global_styling';
+
+// In a few screen sizes the palette display doesn't get a fully 100% width -
+// it gets 1px less on width. For this reason we're adding a horizontal 1px bleed area
+export const euiColorPaletteDisplayFixed__bleedArea = css`
+  position: absolute;
+  inset: 0;
+  ${logicalCSS('right', '-1px')}
+  display: flex;
+`;
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
index f36e133c6a9..8452f13346e 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
@@ -11,6 +11,7 @@ import { CommonProps } from '../../common';
 import { getFixedLinearGradient } from '../utils';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiColorPaletteDisplayShared } from './color_palette_display';
+import { euiColorPaletteDisplayFixed__bleedArea } from './color_palette_display_fixed.styles';
 
 export interface EuiColorPaletteDisplayFixedProps
   extends HTMLAttributes<HTMLSpanElement>,
@@ -45,6 +46,7 @@ export const EuiColorPaletteDisplayFixed: FunctionComponent<
         // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
         // and the only accessible text for options is the EuiScreenReaderOnly {title}
         aria-hidden="true"
+        css={euiColorPaletteDisplayFixed__bleedArea}
         className="euiColorPaletteDisplayFixed__bleedArea"
       >
         {paletteStops}
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 3ac2e37b4d2..22e00f78bf8 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
         type="button"
       >
         <span
-          class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+          class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
         >
           <span
             class="emotion-euiScreenReaderOnly"
@@ -114,7 +114,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
           </span>
           <span
             aria-hidden="true"
-            class="euiColorPaletteDisplayFixed__bleedArea"
+            class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
           >
             <span
               style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -181,7 +181,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
         </span>
         <span
           aria-hidden="true"
-          class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+          class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
         />
       </button>
       <div
@@ -231,7 +231,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
         </span>
         <span
           aria-hidden="true"
-          class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+          class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
         />
       </button>
       <div
@@ -295,70 +295,296 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
 `;
 
 exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
-<div
-  class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
->
-  <input
-    type="hidden"
-    value="paletteFixed"
-  />
-  <div
-    class="euiFormControlLayout"
-  >
+<body>
+  <div>
     <div
-      class="euiFormControlLayout__childrenWrapper"
-      style="--euiFormControlRightIconsCount: 1;"
+      class="euiPopover euiInputPopover euiSuperSelect emotion-euiPopover-block-EuiInputPopover"
     >
-      <button
-        aria-haspopup="listbox"
-        class="euiSuperSelectControl emotion-euiSuperSelect__control-open"
-        data-test-subj="colorPalettePicker"
-        type="button"
+      <input
+        type="hidden"
+        value="paletteFixed"
+      />
+      <div
+        class="euiFormControlLayout"
       >
-        <span
-          class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+        <div
+          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
         >
-          <span
-            class="emotion-euiScreenReaderOnly"
-          >
-            Palette 1
-          </span>
-          <span
-            aria-hidden="true"
-            class="euiColorPaletteDisplayFixed__bleedArea"
+          <button
+            aria-haspopup="listbox"
+            class="euiSuperSelectControl emotion-euiSuperSelect__control-open"
+            data-test-subj="colorPalettePicker"
+            type="button"
           >
             <span
-              style="background-color: rgb(31, 176, 178); width: 20%;"
-            />
-            <span
-              style="background-color: rgb(255, 219, 109); width: 20%;"
-            />
-            <span
-              style="background-color: rgb(238, 145, 145); width: 20%;"
-            />
-            <span
-              style="background-color: rgb(255, 255, 255); width: 20%;"
-            />
+              class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
+            >
+              <span
+                class="emotion-euiScreenReaderOnly"
+              >
+                Palette 1
+              </span>
+              <span
+                aria-hidden="true"
+                class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style="background-color: rgb(31, 176, 178); width: 20%;"
+                />
+                <span
+                  style="background-color: rgb(255, 219, 109); width: 20%;"
+                />
+                <span
+                  style="background-color: rgb(238, 145, 145); width: 20%;"
+                />
+                <span
+                  style="background-color: rgb(255, 255, 255); width: 20%;"
+                />
+                <span
+                  style="background-color: rgb(136, 128, 148); width: 20%;"
+                />
+              </span>
+            </span>
+          </button>
+          <div
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+          >
             <span
-              style="background-color: rgb(136, 128, 148); width: 20%;"
-            />
-          </span>
-        </span>
-      </button>
+              class="euiFormControlLayoutCustomIcon"
+            >
+              <span
+                aria-hidden="true"
+                class="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+    <div
+      data-focus-lock-disabled="disabled"
+    >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        aria-live="assertive"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
-        <span
-          class="euiFormControlLayoutCustomIcon"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
+        <div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
           />
-        </span>
+          <div
+            data-focus-lock-disabled="disabled"
+          >
+            <p
+              class="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderDescribeId"
+            >
+              You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.
+            </p>
+            <div
+              aria-activedescendant="paletteFixed"
+              aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
+              aria-label="Select listbox"
+              class="euiSuperSelect__listbox eui-scrollBar emotion-euiSuperSelect__listbox"
+              role="listbox"
+              tabindex="0"
+            >
+              <button
+                aria-label="my palette fixed"
+                aria-selected="true"
+                class="euiContextMenuItem euiSuperSelect__item paletteFixedClass emotion-euiContextMenuItem-m-center-euiSuperSelect__item-hasDividers"
+                data-test-subj="fixed-data-test-subj"
+                id="paletteFixed"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <div
+                    class="euiColorPalettePicker__item"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                    >
+                      Palette 1
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"
+                    />
+                    <span
+                      class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
+                    >
+                      <span
+                        class="emotion-euiScreenReaderOnly"
+                      >
+                        Palette 1
+                      </span>
+                      <span
+                        aria-hidden="true"
+                        class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
+                      >
+                        <span
+                          style="background-color: rgb(31, 176, 178); width: 20%;"
+                        />
+                        <span
+                          style="background-color: rgb(255, 219, 109); width: 20%;"
+                        />
+                        <span
+                          style="background-color: rgb(238, 145, 145); width: 20%;"
+                        />
+                        <span
+                          style="background-color: rgb(255, 255, 255); width: 20%;"
+                        />
+                        <span
+                          style="background-color: rgb(136, 128, 148); width: 20%;"
+                        />
+                      </span>
+                    </span>
+                  </div>
+                </span>
+              </button>
+              <button
+                aria-selected="false"
+                class="euiContextMenuItem euiSuperSelect__item paletteLinearClass emotion-euiContextMenuItem-m-center-euiSuperSelect__item-hasDividers"
+                data-test-subj="gradient-data-test-subj"
+                id="paletteLinear"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="empty"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <div
+                    class="euiColorPalettePicker__item"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                    >
+                      Linear Gradient
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"
+                    />
+                    <span
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      Linear Gradient
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
+                    />
+                  </div>
+                </span>
+              </button>
+              <button
+                aria-selected="false"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item-hasDividers"
+                data-test-subj="gradient-with-stops-data-test-subj"
+                id="paletteLinearStops"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="empty"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <div
+                    class="euiColorPalettePicker__item"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                    >
+                      Linear Gradient with stops
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"
+                    />
+                    <span
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      Linear Gradient with stops
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      class="euiColorPaletteDisplay emotion-euiColorPaletteDisplay-s"
+                    />
+                  </div>
+                </span>
+              </button>
+              <button
+                aria-selected="false"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item-hasDividers"
+                data-test-subj="text-data-test-subj"
+                id="custom"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__icon emotion-euiContextMenu__icon"
+                  color="inherit"
+                  data-euiicon-type="empty"
+                />
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <div
+                    class="euiColorPalettePicker__item"
+                  >
+                    Plain text as a custom option
+                  </div>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
+          />
+        </div>
       </div>
     </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
   </div>
-</div>
+</body>
 `;
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/_color_palette_picker.scss b/packages/eui/src/components/color_picker/color_palette_picker/_color_palette_picker.scss
deleted file mode 100644
index bddc4463ef3..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_picker/_color_palette_picker.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.euiColorPalettePicker {
-  &__itemTitle {
-    @include euiFontSizeXS;
-  }
-
-  &__itemTitle + .euiColorPaletteDisplay {
-    margin-top: $euiSizeXS;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/_index.scss b/packages/eui/src/components/color_picker/color_palette_picker/_index.scss
deleted file mode 100644
index 74598622504..00000000000
--- a/packages/eui/src/components/color_picker/color_palette_picker/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'color_palette_picker';
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx
index 86591e750f9..c9d1c175e99 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx
@@ -7,14 +7,15 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { requiredProps } from '../../../test';
 import { render } from '../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import {
   EuiColorPalettePicker,
   EuiColorPalettePickerPaletteProps,
 } from './color_palette_picker';
-import { requiredProps, takeMountedSnapshot } from '../../../test';
 
 const palettes: EuiColorPalettePickerPaletteProps[] = [
   {
@@ -67,6 +68,8 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [
 ];
 
 describe('EuiColorPalettePicker', () => {
+  shouldRenderCustomStyles(<EuiColorPalettePicker palettes={palettes} />);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiColorPalettePicker
@@ -146,7 +149,7 @@ describe('EuiColorPalettePicker', () => {
   });
 
   test('more props are propagated to each option', () => {
-    const component = mount(
+    const { getByTestSubject, baseElement } = render(
       <EuiColorPalettePicker
         palettes={palettes}
         valueOfSelected="paletteFixed"
@@ -155,10 +158,8 @@ describe('EuiColorPalettePicker', () => {
       />
     );
 
-    component
-      .find('button[data-test-subj="colorPalettePicker"]')
-      .simulate('click');
+    fireEvent.click(getByTestSubject('colorPalettePicker'));
 
-    expect(takeMountedSnapshot(component)).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
index 0c24513f766..86f91dfe5e0 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
@@ -6,13 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent } from 'react';
-
-import { EuiSuperSelect } from '../../form';
+import React, { FunctionComponent, useCallback, useMemo } from 'react';
 
 import { CommonProps } from '../../common';
+import { EuiSpacer } from '../../spacer';
+import { EuiText } from '../../text';
+import {
+  EuiSuperSelect,
+  type EuiSuperSelectProps,
+} from '../../form/super_select'; // Note: needs to be pointed at this specific subdir for Storybook to inherit types correctly??
 
-import { EuiSuperSelectProps } from '../../form/super_select';
 import { EuiColorPaletteDisplay } from '../color_palette_display';
 
 export interface PaletteColorStop {
@@ -115,47 +118,58 @@ export const EuiColorPalettePicker: FunctionComponent<
   selectionDisplay = 'palette',
   ...rest
 }) => {
-  const getPalette = ({
-    type,
-    palette,
-    title,
-  }:
-    | EuiColorPalettePickerPaletteFixedProps
-    | EuiColorPalettePickerPaletteGradientProps) => {
-    return (
-      <EuiColorPaletteDisplay type={type} palette={palette} title={title} />
-    );
-  };
+  const getPalette = useCallback(
+    ({
+      type,
+      palette,
+      title,
+    }:
+      | EuiColorPalettePickerPaletteFixedProps
+      | EuiColorPalettePickerPaletteGradientProps) => {
+      return (
+        <EuiColorPaletteDisplay type={type} palette={palette} title={title} />
+      );
+    },
+    []
+  );
+
+  const paletteOptions = useMemo(
+    () =>
+      palettes.map((item: EuiColorPalettePickerPaletteProps) => {
+        const { type, value, title, palette, ...rest } = item;
+        const paletteForDisplay =
+          item.type !== 'text' ? getPalette(item) : null;
 
-  const paletteOptions = palettes.map(
-    (item: EuiColorPalettePickerPaletteProps) => {
-      const { type, value, title, palette, ...rest } = item;
-      const paletteForDisplay = item.type !== 'text' ? getPalette(item) : null;
-      return {
-        value: String(value),
-        inputDisplay:
-          selectionDisplay === 'title' || type === 'text'
-            ? title
-            : paletteForDisplay,
-        dropdownDisplay: (
-          <div className="euiColorPalettePicker__item">
-            {title && type !== 'text' && (
-              // Accessible labels are managed by color_palette_display_fixed and
-              // color_palette_display_gradient. Adding the aria-hidden attribute
-              // here to ensure screen readers don't speak the listbox options twice.
-              <div
-                aria-hidden="true"
-                className="euiColorPalettePicker__itemTitle"
-              >
-                {title}
-              </div>
-            )}
-            {type === 'text' ? title : paletteForDisplay}
-          </div>
-        ),
-        ...rest,
-      };
-    }
+        return {
+          value: String(value),
+          inputDisplay:
+            selectionDisplay === 'title' || type === 'text'
+              ? title
+              : paletteForDisplay,
+          dropdownDisplay: (
+            <div className="euiColorPalettePicker__item">
+              {title && type !== 'text' && (
+                // Accessible labels are managed by color_palette_display_fixed and
+                // color_palette_display_gradient. Adding the aria-hidden attribute
+                // here to ensure screen readers don't speak the listbox options twice.
+                <>
+                  <EuiText
+                    aria-hidden="true"
+                    className="euiColorPalettePicker__itemTitle"
+                    size="xs"
+                  >
+                    {title}
+                  </EuiText>
+                  <EuiSpacer size="xs" />
+                </>
+              )}
+              {type === 'text' ? title : paletteForDisplay}
+            </div>
+          ),
+          ...rest,
+        };
+      }),
+    [getPalette, palettes, selectionDisplay]
   );
 
   return (
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 264a66c520e..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,414 +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();
-});
+  it('renders', () => {
+    const { container } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('renders disabled EuiColorPicker', () => {
-  const { container } = render(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      disabled={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('compressed', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        compressed={true}
+        {...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('readOnly', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        readOnly={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('fullWidth', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        fullWidth={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  expect(container.firstChild).toMatchSnapshot();
-});
+  test('disabled', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        disabled={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('inline', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color="#ffeedd"
+        display="inline"
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  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 null', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={null} {...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 an empty swatch when color is ""', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={''} {...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 color swatch when color is defined', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} color={'#ffffff'} {...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 custom placeholder', () => {
-  const { container } = render(
-    <EuiColorPicker onChange={onChange} placeholder="Auto" {...requiredProps} />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
+    test('valid string', () => {
+      const { container } = render(
+        <EuiColorPicker
+          onChange={onChange}
+          color="#ffffff"
+          {...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('placeholder', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        placeholder="Auto"
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-test('popover color selector is not shown by default', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
+  test('isClearable', () => {
+    const { container } = render(
+      <EuiColorPicker
+        onChange={onChange}
+        color={'#ffeedd'}
+        isClearable={true}
+        {...requiredProps}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
-  expect(colorSelector.length).toBe(0);
-});
+  test('popover color selector is not shown by default', () => {
+    const { queryByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
+    );
 
-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}
-    />
-  );
+    expect(queryByTestSubject('euiColorPickerPopover')).not.toBeInTheDocument();
+  });
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  expect(onFocusHandler).toBeCalled();
-  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
-  expect(colorSelector.length).toBe(1);
-});
+  test('popover color selector is shown when the input is clicked', () => {
+    const onFocusHandler = jest.fn();
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} onFocus={onFocusHandler} />
+    );
 
-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}
-    />
-  );
-
-  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,
     });
-  });
+    expect(getByTestSubject('euiColorPickerPopover')).toBeInTheDocument();
 
-  await act(() => sleep());
-
-  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', async () => {
+    const onBlurHandler = jest.fn();
+    const { getByTestSubject } = render(
+      <EuiColorPicker onChange={onChange} onBlur={onBlurHandler} />
+    );
 
-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}
-    />
-  );
-
-  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(document.body).toEqual(document.activeElement);
-  expect(onBlurHandler).toHaveBeenCalled();
-});
+  test('Setting a new color calls onChange', () => {
+    const { getByTestSubject } = render(<EuiColorPicker onChange={onChange} />);
 
-test('Setting a new color 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 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],
+    expect(onChange).toBeCalled();
+    expect(onChange).toBeCalledWith('#000000', {
+      hex: '#000000',
+      isValid: true,
+      rgba: [0, 0, 0, 1],
+    });
   });
-});
 
-test('Clicking a swatch calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
-  );
-
-  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],
-  });
-});
+  test('Clicking a swatch calls onChange', () => {
+    const { getByTestSubject } = render(<EuiColorPicker onChange={onChange} />);
 
-test('Setting a new alpha value calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      showAlpha={true}
-      {...requiredProps}
-    />
-  );
+    fireEvent.click(getByTestSubject('euiColorPickerAnchor'));
 
-  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],
-  });
-});
+    const swatches = document.querySelectorAll('button.euiColorPickerSwatch');
+    expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
 
-test('Clicking the "clear" button calls onChange', () => {
-  const colorPicker = mount(
-    <EuiColorPicker
-      onChange={onChange}
-      color="#ffeedd"
-      isClearable={true}
-      {...requiredProps}
-    />
-  );
-
-  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/color_picker_swatch.styles.ts b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
new file mode 100644
index 00000000000..ea923c0248f
--- /dev/null
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme, transparentize } from '../../services';
+import {
+  logicalSizeCSS,
+  mathWithUnits,
+  euiOutline,
+} from '../../global_styling';
+
+export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiColorPickerSwatch: css`
+      display: inline-block;
+      ${logicalSizeCSS(euiTheme.size.l)}
+
+      border-radius: ${mathWithUnits(
+        euiTheme.border.radius.medium,
+        (x) => x / 2
+      )};
+      border: ${euiTheme.border.width.thin} solid
+        ${transparentize(euiTheme.colors.fullShade, 0.1)};
+      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
+        ${transparentize(euiTheme.colors.emptyShade, 0.05)};
+      cursor: pointer;
+
+      &:disabled {
+        cursor: default;
+      }
+
+      /* Focus ring gets slightly cut off if not offset to the center */
+      &:focus {
+        ${euiOutline(euiThemeContext, 'center')}
+      }
+    `,
+  };
+};
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx b/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
index fec38be81d2..23fd78400e7 100644
--- a/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
@@ -8,11 +8,14 @@
 
 import React from 'react';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 
 describe('EuiColorPickerSwatch', () => {
+  shouldRenderCustomStyles(<EuiColorPickerSwatch />);
+
   test('is rendered', () => {
     const { container } = render(<EuiColorPickerSwatch {...requiredProps} />);
 
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.tsx b/packages/eui/src/components/color_picker/color_picker_swatch.tsx
index 9d5a658e04d..431e22ecba1 100644
--- a/packages/eui/src/components/color_picker/color_picker_swatch.tsx
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.tsx
@@ -9,10 +9,12 @@
 import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
+import { useEuiI18n } from '../i18n';
 
 import { getChromaColor } from './utils';
-import { useEuiI18n } from '../i18n';
+import { euiColorPickerSwatchStyles } from './color_picker_swatch.styles';
 
 export type EuiColorPickerSwatchProps = CommonProps &
   Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
@@ -24,11 +26,14 @@ export const EuiColorPickerSwatch = forwardRef<
   EuiColorPickerSwatchProps
 >(({ className, color, style, ...rest }, ref) => {
   const classes = classNames('euiColorPickerSwatch', className);
+  const styles = useEuiMemoizedStyles(euiColorPickerSwatchStyles);
+
   const chromaColor = useMemo(() => getChromaColor(color, true), [color]);
   const background = useMemo(
     () => (chromaColor ? chromaColor.css() : 'transparent'),
     [chromaColor]
   );
+
   const ariaLabel = useEuiI18n(
     'euiColorPickerSwatch.ariaLabel',
     'Select {color} as the color',
@@ -38,6 +43,7 @@ export const EuiColorPickerSwatch = forwardRef<
   return (
     <button
       type="button"
+      css={styles.euiColorPickerSwatch}
       className={classes}
       aria-label={ariaLabel}
       ref={ref}
diff --git a/packages/eui/src/components/color_picker/hue.styles.ts b/packages/eui/src/components/color_picker/hue.styles.ts
new file mode 100644
index 00000000000..49811a9524b
--- /dev/null
+++ b/packages/eui/src/components/color_picker/hue.styles.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme, transparentize } from '../../services';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+import {
+  euiRangeThumbPerBrowser,
+  euiRangeThumbStyle,
+  euiRangeThumbFocusBoxShadow,
+} from '../form/range/range.styles';
+
+export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const height = euiTheme.size.m;
+  const thumbSize = euiTheme.size.l;
+  const thumbBorder = mathWithUnits(
+    euiTheme.border.width.thick,
+    (x) => x * 1.5
+  );
+  const thumbBoxShadow = `
+    0 2px 2px -1px ${transparentize(euiTheme.colors.shadow, 0.2)},
+    0 1px 5px -2px ${transparentize(euiTheme.colors.shadow, 0.2)}`;
+
+  return {
+    // This wraps the range and sets a rainbow gradient,
+    // which allows the range thumb to be larger than the visible track
+    euiHue: css`
+      ${logicalCSS('height', height)}
+      border-radius: ${height};
+      /* stylelint-disable color-no-hex */
+      background: linear-gradient(
+        to right,
+        #ff3232 0%,
+        #fff130 20%,
+        #45ff30 35%,
+        #28fff0 52%,
+        #282cff 71%,
+        #ff28fb 88%,
+        #ff0094 100%
+      );
+      /* stylelint-enable color-no-hex */
+    `,
+
+    euiHue__range: css`
+      ${logicalCSS('height', thumbSize)}
+      /* Allow for overlap */
+      ${logicalCSS('width', `calc(100% + 2px)`)}
+      /* Use ^ overlap to allow thumb to fully cover gradient ends */
+      ${logicalCSS('margin-horizontal', '-1px')}
+      ${logicalCSS(
+        'margin-top',
+        mathWithUnits(height, (x) => x / -2)
+      )}
+
+      /* Resets for the range */
+      appearance: none;
+      background: transparent;
+
+      /* stylelint-disable property-no-vendor-prefix */
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+      }
+      /* stylelint-enable property-no-vendor-prefix */
+
+      /* Indicator styles - for some incredibly bizarre reason, stylelint is unhappy about
+         the semicolons here and can't be stylelint-disabled, hence the syntax workaround */
+      ${euiRangeThumbPerBrowser(
+        [
+          euiRangeThumbStyle(euiThemeContext),
+          'background-color: inherit',
+          `border-width: ${thumbBorder}`,
+          'border-radius: 100%',
+          `box-shadow: ${thumbBoxShadow}`,
+        ].join(';\n')
+      )}
+
+      /* Remove wrapping outline and show focus on thumb only */
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${euiRangeThumbPerBrowser(euiRangeThumbFocusBoxShadow(euiThemeContext))}
+      }
+    `,
+  };
+};
diff --git a/packages/eui/src/components/color_picker/hue.test.tsx b/packages/eui/src/components/color_picker/hue.test.tsx
index 02d36c8bcd2..4e191fd5764 100644
--- a/packages/eui/src/components/color_picker/hue.test.tsx
+++ b/packages/eui/src/components/color_picker/hue.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
 
 import { EuiHue } from './hue';
@@ -17,6 +18,15 @@ const onChange = () => {
 };
 
 describe('EuiHue', () => {
+  shouldRenderCustomStyles(<EuiHue onChange={onChange} />, {
+    skip: { style: true },
+  });
+  // `style` goes onto a different element than `className`s
+  shouldRenderCustomStyles(<EuiHue onChange={onChange} />, {
+    skip: { css: true, className: true },
+    targetSelector: '.euiHue__range',
+  });
+
   test('is rendered', () => {
     const { container } = render(
       <EuiHue onChange={onChange} {...requiredProps} />
diff --git a/packages/eui/src/components/color_picker/hue.tsx b/packages/eui/src/components/color_picker/hue.tsx
index 490ce5ddb45..fad046a5544 100644
--- a/packages/eui/src/components/color_picker/hue.tsx
+++ b/packages/eui/src/components/color_picker/hue.tsx
@@ -12,11 +12,14 @@ import React, {
   FunctionComponent,
 } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../common';
 
+import { useEuiMemoizedStyles } from '../../services';
+import { CommonProps } from '../common';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 
+import { euiHueStyles } from './hue.styles';
+
 const HUE_RANGE = 359;
 
 export type EuiHueProps = Omit<
@@ -37,12 +40,15 @@ export const EuiHue: FunctionComponent<EuiHueProps> = ({
   onChange,
   ...rest
 }) => {
+  const classes = classNames('euiHue', className);
+  const styles = useEuiMemoizedStyles(euiHueStyles);
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     onChange(Number(e.target.value));
   };
-  const classes = classNames('euiHue', className);
+
   return (
-    <React.Fragment>
+    <div css={styles.euiHue} className={classes}>
       <EuiScreenReaderOnly>
         <label htmlFor={`${id}-hue`}>
           <EuiI18n
@@ -54,19 +60,18 @@ 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"
+        css={styles.euiHue__range}
+        className="euiHue__range"
+        value={hue}
+        onChange={handleChange}
+        {...rest}
+      />
+    </div>
   );
 };
diff --git a/packages/eui/src/components/color_picker/saturation.styles.ts b/packages/eui/src/components/color_picker/saturation.styles.ts
new file mode 100644
index 00000000000..a2198d81e80
--- /dev/null
+++ b/packages/eui/src/components/color_picker/saturation.styles.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import {
+  logicalCSS,
+  logicalSizeCSS,
+  mathWithUnits,
+} from '../../global_styling';
+
+export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const indicatorSize = euiTheme.size.m;
+
+  const borderRadius = mathWithUnits(
+    euiTheme.border.radius.medium,
+    (x) => x / 2
+  );
+
+  return {
+    euiSaturation: css`
+      z-index: 3; /* Required to be above the hue slider, which can overlap */
+      position: relative;
+      ${logicalCSS('width', '100%')}
+      ${logicalCSS('padding-bottom', '100%')}
+      border-radius: ${borderRadius};
+      touch-action: none; /* prevent TouchMove events from scrolling page */
+
+      &:focus,
+      &:focus-within {
+        outline: none; /* Hide focus ring from tabindex=0 */
+
+        .euiSaturation__indicator {
+          outline: none; /* Standardize indicator focus ring */
+          box-shadow: 0 0 0 ${euiTheme.focus.width} ${euiTheme.colors.primary};
+          border-color: ${euiTheme.colors.primary};
+        }
+      }
+    `,
+
+    euiSaturation__lightness: css`
+      position: absolute;
+      inset: 0;
+      ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */
+
+      border-radius: ${borderRadius};
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 1),
+        rgba(255, 255, 255, 0)
+      );
+    `,
+    euiSaturation__saturation: css`
+      position: absolute;
+      inset: 0;
+      ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */
+
+      border-radius: ${borderRadius};
+      background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    `,
+
+    euiSaturation__indicator: css`
+      position: absolute;
+      ${logicalSizeCSS(indicatorSize)}
+      transform: translateX(-50%) translateY(-50%);
+      border: ${euiTheme.border.width.thin} solid
+        ${euiTheme.colors.darkestShade};
+      border-radius: 100%;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 100%;
+        border: ${euiTheme.border.width.thin} solid
+          ${euiTheme.colors.lightestShade};
+      }
+    `,
+  };
+};
diff --git a/packages/eui/src/components/color_picker/saturation.test.tsx b/packages/eui/src/components/color_picker/saturation.test.tsx
index 729914cebb7..4d97fa38398 100644
--- a/packages/eui/src/components/color_picker/saturation.test.tsx
+++ b/packages/eui/src/components/color_picker/saturation.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
 
 import { EuiSaturation } from './saturation';
@@ -17,6 +18,8 @@ const onChange = () => {
 };
 
 describe('EuiHue', () => {
+  shouldRenderCustomStyles(<EuiSaturation onChange={onChange} />);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiSaturation onChange={onChange} {...requiredProps} />
diff --git a/packages/eui/src/components/color_picker/saturation.tsx b/packages/eui/src/components/color_picker/saturation.tsx
index 1096df230d0..38e8e7f2da8 100644
--- a/packages/eui/src/components/color_picker/saturation.tsx
+++ b/packages/eui/src/components/color_picker/saturation.tsx
@@ -13,16 +13,24 @@ import React, {
   useEffect,
   useRef,
   useState,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
 import { ColorSpaces } from 'chroma-js';
 
-import { CommonProps } from '../common';
-import { keys, useMouseMove } from '../../services';
+import {
+  keys,
+  useMouseMove,
+  useEuiMemoizedStyles,
+  useGeneratedHtmlId,
+} from '../../services';
 import { isNil } from '../../services/predicate';
+import { logicalStyles } from '../../global_styling';
+import { CommonProps } from '../common';
 import { useEuiI18n } from '../i18n';
 
 import { getEventPosition } from './utils';
+import { euiSaturationStyles } from './saturation.styles';
 
 export type SaturationClientRect = Pick<
   ClientRect,
@@ -53,12 +61,19 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       color = colorDefaultValue,
       'data-test-subj': dataTestSubj = 'euiSaturation',
       hex,
-      id,
+      id: _id,
       onChange,
+      onKeyDown,
       ...rest
     },
     ref
   ) => {
+    const classes = classNames('euiSaturation', className);
+    const styles = useEuiMemoizedStyles(euiSaturationStyles);
+
+    const id = useGeneratedHtmlId({ conditionalId: _id });
+    const instructionsId = `${id}-instructions`;
+    const indicatorId = `${id}-saturationIndicator`;
     const [roleDescString, instructionsString] = useEuiI18n(
       ['euiSaturation.ariaLabel', 'euiSaturation.screenReaderInstructions'],
       [
@@ -87,72 +102,84 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
       }
     }, [color, lastColor]);
 
-    const calculateColor = ({
-      top,
-      height,
-      left,
-      width,
-    }: SaturationClientRect): ColorSpaces['hsv'] => {
-      const [h] = color;
-      const s = left / width;
-      const v = 1 - top / height;
-      return [h, s, v];
-    };
-
-    const handleUpdate = (box: SaturationClientRect) => {
-      const { left, top } = box;
-      setIndicator({ left, top });
-      const newColor = calculateColor(box);
-      setLastColor(newColor);
-      onChange(newColor);
-    };
-    const handleChange = (location: { x: number; y: number }) => {
-      if (isNil(boxRef?.current)) return;
-      const box = getEventPosition(location, boxRef.current);
-      handleUpdate(box);
-    };
+    const calculateColor = useCallback(
+      ({
+        top,
+        height,
+        left,
+        width,
+      }: SaturationClientRect): ColorSpaces['hsv'] => {
+        const [h] = color;
+        const s = left / width;
+        const v = 1 - top / height;
+        return [h, s, v];
+      },
+      [color]
+    );
+
+    const handleUpdate = useCallback(
+      (box: SaturationClientRect) => {
+        const { left, top } = box;
+        setIndicator({ left, top });
+        const newColor = calculateColor(box);
+        setLastColor(newColor);
+        onChange(newColor);
+      },
+      [calculateColor, onChange]
+    );
+    const handleChange = useCallback(
+      (location: { x: number; y: number }) => {
+        if (isNil(boxRef?.current)) return;
+        const box = getEventPosition(location, boxRef.current);
+        handleUpdate(box);
+      },
+      [handleUpdate]
+    );
+
     const [handleMouseDown, handleInteraction] = useMouseMove(
       handleChange,
       boxRef.current
     );
-    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-      if (isNil(boxRef?.current)) return;
-      const { height, width } = boxRef.current.getBoundingClientRect();
-      const { left, top } = indicator;
-      const heightScale = height / 100;
-      const widthScale = width / 100;
-      let newLeft = left;
-      let newTop = top;
-
-      switch (event.key) {
-        case keys.ARROW_DOWN:
-          event.preventDefault();
-          newTop = top < height ? top + heightScale : height;
-          break;
-        case keys.ARROW_LEFT:
-          event.preventDefault();
-          newLeft = left > 0 ? left - widthScale : 0;
-          break;
-        case keys.ARROW_UP:
-          event.preventDefault();
-          newTop = top > 0 ? top - heightScale : 0;
-          break;
-        case keys.ARROW_RIGHT:
-          event.preventDefault();
-          newLeft = left < width ? left + widthScale : width;
-          break;
-        default:
-          return;
-      }
-
-      const newPosition = { left: newLeft, top: newTop };
-      setIndicator(newPosition);
-      const newColor = calculateColor({ width, height, ...newPosition });
-      onChange(newColor);
-    };
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        onKeyDown?.(event);
+        if (isNil(boxRef?.current)) return;
+        const { height, width } = boxRef.current.getBoundingClientRect();
+        const { left, top } = indicator;
+        const heightScale = height / 100;
+        const widthScale = width / 100;
+        let newLeft = left;
+        let newTop = top;
+
+        switch (event.key) {
+          case keys.ARROW_DOWN:
+            event.preventDefault();
+            newTop = top < height ? top + heightScale : height;
+            break;
+          case keys.ARROW_LEFT:
+            event.preventDefault();
+            newLeft = left > 0 ? left - widthScale : 0;
+            break;
+          case keys.ARROW_UP:
+            event.preventDefault();
+            newTop = top > 0 ? top - heightScale : 0;
+            break;
+          case keys.ARROW_RIGHT:
+            event.preventDefault();
+            newLeft = left < width ? left + widthScale : width;
+            break;
+          default:
+            return;
+        }
+
+        const newPosition = { left: newLeft, top: newTop };
+        setIndicator(newPosition);
+        const newColor = calculateColor({ width, height, ...newPosition });
+        onChange(newColor);
+      },
+      [calculateColor, indicator, onChange, onKeyDown]
+    );
 
-    const classes = classNames('euiSaturation', className);
-    const instructionsId = `${id}-instructions`;
     return (
       <div
         onMouseDown={handleMouseDown}
@@ -160,6 +187,7 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
         onTouchMove={handleInteraction}
         onKeyDown={handleKeyDown}
         ref={ref}
+        css={styles.euiSaturation}
         className={classes}
         data-test-subj={dataTestSubj}
         style={{
@@ -168,13 +196,21 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
         tabIndex={-1}
         {...rest}
       >
-        <div className="euiSaturation__lightness" ref={boxRef}>
-          <div className="euiSaturation__saturation" />
+        <div
+          css={styles.euiSaturation__lightness}
+          className="euiSaturation__lightness"
+          ref={boxRef}
+        >
+          <div
+            css={styles.euiSaturation__saturation}
+            className="euiSaturation__saturation"
+          />
         </div>
         <button
-          id={`${id}-saturationIndicator`}
+          id={indicatorId}
+          css={styles.euiSaturation__indicator}
           className="euiSaturation__indicator"
-          style={{ ...indicator }}
+          style={logicalStyles(indicator)}
           aria-roledescription={roleDescString}
           aria-label={hex}
           aria-describedby={instructionsId}
diff --git a/packages/eui/src/components/form/range/range.styles.ts b/packages/eui/src/components/form/range/range.styles.ts
index fa500e50554..4bd5e8c4618 100644
--- a/packages/eui/src/components/form/range/range.styles.ts
+++ b/packages/eui/src/components/form/range/range.styles.ts
@@ -123,7 +123,7 @@ export const euiRangeThumbStyle = (euiThemeContext: UseEuiTheme) => {
 export const euiRangeThumbPerBrowser = (content: string) => {
   return `
     &::-webkit-slider-thumb { ${content}; }
-    &::-moz-range-thumb  { ${content}; }
+    &::-moz-range-thumb { ${content}; }
     &::-ms-thumb {${content}; }
   `;
 };
diff --git a/packages/eui/src/components/index.scss b/packages/eui/src/components/index.scss
index e878de77884..f04354b18aa 100644
--- a/packages/eui/src/components/index.scss
+++ b/packages/eui/src/components/index.scss
@@ -1,6 +1,5 @@
 // Components
 
-@import 'color_picker/index';
 @import 'combo_box/index';
 @import 'date_picker/index';
 @import 'datagrid/index';
diff --git a/packages/eui/src/themes/amsterdam/overrides/_hue.scss b/packages/eui/src/themes/amsterdam/overrides/_hue.scss
deleted file mode 100644
index b78b8e05b59..00000000000
--- a/packages/eui/src/themes/amsterdam/overrides/_hue.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.euiHue {
-  position: relative;
-  height: $euiSizeM;
-  border-radius: $euiSizeM;
-  margin: $euiSizeS 0;
-
-  &::before,
-  &::after {
-    display: none;
-  }
-
-  &__range {
-    @include euiRangeThumbPerBrowser {
-      border: 3px solid $euiRangeThumbBorderColor;
-      box-shadow:
-        0 2px 2px -1px rgba($euiShadowColor, .2),
-        0 1px 5px -2px rgba($euiShadowColor, .2);
-      background-color: inherit;
-    }
-
-    top: - $euiSizeM / 2;
-
-    &:focus {
-      @include euiRangeThumbPerBrowser {
-        @include euiRangeThumbFocusBoxShadow;
-        border: 3px solid $euiRangeThumbBorderColor;
-      }
-
-      outline: none;
-    }
-
-    &:focus:not(:focus-visible) {
-      @include euiRangeThumbPerBrowser {
-        box-shadow:
-          0 2px 2px -1px rgba($euiShadowColor, .2),
-          0 1px 5px -2px rgba($euiShadowColor, .2);
-      }
-    }
-
-    &:focus:focus-visible {
-      outline: none;
-    }
-  }
-}
diff --git a/packages/eui/src/themes/amsterdam/overrides/_index.scss b/packages/eui/src/themes/amsterdam/overrides/_index.scss
index c40e872f408..ba2afa490fd 100644
--- a/packages/eui/src/themes/amsterdam/overrides/_index.scss
+++ b/packages/eui/src/themes/amsterdam/overrides/_index.scss
@@ -3,4 +3,3 @@
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';
 @import 'form_controls';
-@import 'hue';