diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5e2f5b5ded..0d6cf9d794f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
+- Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067))
 
 ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)
 
diff --git a/src-docs/src/views/color_picker/alpha.js b/src-docs/src/views/color_picker/alpha.js
index 801d973fd04..0ff835994cd 100644
--- a/src-docs/src/views/color_picker/alpha.js
+++ b/src-docs/src/views/color_picker/alpha.js
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Alpha = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [color2, setColor2, errors2] = useColorPicker('211, 96, 134');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [color2, setColor2, errors2] = useColorPickerState('211, 96, 134');
 
   const customSwatches = [
     '#54B399',
diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js
index ba1f02a34d0..44694fea491 100644
--- a/src-docs/src/views/color_picker/color_picker.js
+++ b/src-docs/src/views/color_picker/color_picker.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const ColorPicker = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
   return (
     <EuiFormRow label="Pick a color" isInvalid={!!errors} error={errors}>
       <EuiColorPicker onChange={setColor} color={color} isInvalid={!!errors} />
diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
index af7df586486..4f153a52405 100644
--- a/src-docs/src/views/color_picker/color_stops.js
+++ b/src-docs/src/views/color_picker/color_stops.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import { EuiColorStops, EuiFormRow } from '../../../../src/components';
 
-import { useColorStop } from './utils';
+import { useColorStopsState } from '../../../../src/services';
 
 export const ColorStops = () => {
-  const [colorStops, setColorStops, addColor] = useColorStop(true);
+  const [colorStops, setColorStops, addColor] = useColorStopsState(true);
 
   const [extendedColorStops, setExtendedColorStops] = useState([
     {
diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
index 7f6923ea65d..7e70312e2bc 100644
--- a/src-docs/src/views/color_picker/containers.js
+++ b/src-docs/src/views/color_picker/containers.js
@@ -14,11 +14,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export default () => {
-  const [color, setColor] = useColorPicker('#FFF');
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor] = useColorPickerState('#FFF');
+  const [colorStops, setColorStops] = useColorStopsState();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js
index b5b0601b867..e8c227cd011 100644
--- a/src-docs/src/views/color_picker/custom_button.js
+++ b/src-docs/src/views/color_picker/custom_button.js
@@ -8,10 +8,10 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const CustomButton = () => {
-  const [color, setColor, errors] = useColorPicker('');
+  const [color, setColor, errors] = useColorPickerState('');
   const [selectedColor, setSelectedColor] = useState(color);
   const handleColorChange = (text, { hex, isValid }) => {
     setColor(text, { hex, isValid });
diff --git a/src-docs/src/views/color_picker/custom_swatches.js b/src-docs/src/views/color_picker/custom_swatches.js
index b8256d60b04..bd505656584 100644
--- a/src-docs/src/views/color_picker/custom_swatches.js
+++ b/src-docs/src/views/color_picker/custom_swatches.js
@@ -7,11 +7,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const CustomSwatches = () => {
-  const [color, setColor, errors] = useColorPicker();
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor, errors] = useColorPickerState();
+  const [colorStops, setColorStops] = useColorStopsState();
 
   const customSwatches = ['#333', '#666', '#999', '#CCC'];
 
diff --git a/src-docs/src/views/color_picker/formats.js b/src-docs/src/views/color_picker/formats.js
index 1f568a28716..a4c2bc699ae 100644
--- a/src-docs/src/views/color_picker/formats.js
+++ b/src-docs/src/views/color_picker/formats.js
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Formats = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [color2, setColor2, errors2] = useColorPicker('#D36086');
-  const [color3, setColor3, errors3] = useColorPicker('211, 96, 134');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [color2, setColor2, errors2] = useColorPickerState('#D36086');
+  const [color3, setColor3, errors3] = useColorPickerState('211, 96, 134');
   return (
     <>
       <EuiFormRow label="Auto format" isInvalid={!!errors} error={errors}>
diff --git a/src-docs/src/views/color_picker/inline.js b/src-docs/src/views/color_picker/inline.js
index 789adea7a6c..87cecf3f194 100644
--- a/src-docs/src/views/color_picker/inline.js
+++ b/src-docs/src/views/color_picker/inline.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Inline = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
   return (
     <EuiColorPicker
       onChange={setColor}
diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
index 211e71f59ca..922c4b8ee66 100644
--- a/src-docs/src/views/color_picker/kitchen_sink.js
+++ b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -7,11 +7,14 @@ import {
 } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const KitchenSink = () => {
-  const [color, setColor] = useColorPicker('#D36086');
-  const [colorStops, setColorStops, addStop] = useColorStop(true);
+  const [color, setColor] = useColorPickerState('#D36086');
+  const [colorStops, setColorStops, addStop] = useColorStopsState(true);
 
   return (
     <React.Fragment>
diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js
index f264d20ae53..1f1c8b60463 100644
--- a/src-docs/src/views/color_picker/modes.js
+++ b/src-docs/src/views/color_picker/modes.js
@@ -7,11 +7,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const Modes = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [colorStops, setColorStops] = useColorStopsState();
 
   return (
     <React.Fragment>
diff --git a/src-docs/src/views/color_picker/utils.js b/src/services/color_picker/color_picker.ts
similarity index 67%
rename from src-docs/src/views/color_picker/utils.js
rename to src/services/color_picker/color_picker.ts
index 317af47536d..bc18b09222e 100644
--- a/src-docs/src/views/color_picker/utils.js
+++ b/src/services/color_picker/color_picker.ts
@@ -1,12 +1,17 @@
 import { useMemo, useState } from 'react';
 
+interface colorStopsType {
+  stop: number;
+  color: string;
+}
+
 const generateRandomColor = () =>
   // https://www.paulirish.com/2009/random-hex-color-code-snippets/
   `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 
-export const useColorStop = (useRandomColor = false) => {
-  const [addColor, setAddColor] = useState(generateRandomColor());
-  const [colorStops, setColorStops] = useState([
+export const useColorStopsState = (
+  useRandomColor: boolean = false,
+  initialColorStops: colorStopsType[] = [
     {
       stop: 20,
       color: '#54B399',
@@ -19,9 +24,12 @@ export const useColorStop = (useRandomColor = false) => {
       stop: 65,
       color: '#9170B8',
     },
-  ]);
+  ]
+) => {
+  const [addColor, setAddColor] = useState(generateRandomColor());
+  const [colorStops, setColorStops] = useState(initialColorStops);
 
-  const updateColorStops = colorStops => {
+  const updateColorStops = (colorStops: colorStopsType[]) => {
     setColorStops(colorStops);
     if (useRandomColor) {
       setAddColor(generateRandomColor());
@@ -30,10 +38,10 @@ export const useColorStop = (useRandomColor = false) => {
   return [colorStops, updateColorStops, addColor];
 };
 
-export const useColorPicker = (initialColor = '') => {
+export const useColorPickerState = (initialColor = '') => {
   const [color, setColorValue] = useState(initialColor);
   const [isValid, setIsValid] = useState(true);
-  const setColor = (text, { isValid }) => {
+  const setColor = (text: string, { isValid }: { isValid: boolean }) => {
     setColorValue(text);
     setIsValid(isValid);
   };
diff --git a/src/services/color_picker/index.ts b/src/services/color_picker/index.ts
new file mode 100644
index 00000000000..eff6a64e587
--- /dev/null
+++ b/src/services/color_picker/index.ts
@@ -0,0 +1 @@
+export { useColorPickerState, useColorStopsState } from './color_picker';
diff --git a/src/services/index.ts b/src/services/index.ts
index 78f6f8ff63d..4aaf7acf94f 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -45,6 +45,8 @@ export {
   HSV,
 } from './color';
 
+export { useColorPickerState, useColorStopsState } from './color_picker';
+
 export { copyToClipboard } from './copy_to_clipboard';
 
 export {