diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png
index 414de016f85..4094099f976 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png
index 12d93862c70..a9845bf9d5b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ
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/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss
index f400e8660f6..e69de29bb2d 100644
--- a/packages/eui/src/components/color_picker/_index.scss
+++ b/packages/eui/src/components/color_picker/_index.scss
@@ -1,2 +0,0 @@
-@import 'color_palette_picker/index';
-@import 'color_palette_display/index';
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 d8277f1cf44..760a3f46a66 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
@@ -102,7 +102,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"
@@ -111,7 +111,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%;"
@@ -177,7 +177,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
@@ -226,7 +226,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
@@ -289,69 +289,295 @@ 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"
+      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"
         >
-          <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 (