diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2486acf7cad..73e57aa9831 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Added `popoverPlacement` prop in `EuiDatePicker` ([#3359](https://github.com/elastic/eui/pull/3359))
 - Extended `EuiDatePicker`'s `startDate` and `endDate` types to accept `null` values for better interoperability ([#3343](https://github.com/elastic/eui/pull/3343))
 - Added `EuiCommentList` component ([#3344](https://github.com/elastic/eui/pull/3344))
+- Added secondary color value input element to `EuiColorPicker` ([#3336](https://github.com/elastic/eui/pull/3336))
 
 **Bug Fixes**
 
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index 1f90a21358c..5aaf9300bd8 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/src-docs/src/views/color_picker/color_picker_example.js
@@ -122,6 +122,7 @@ const customButtonHtml = renderToHtml(CustomButton);
 const customButtonSnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
+  secondaryInputDisplay="top"
   button={
     <EuiColorPickerSwatch
       color={chosenColor}
@@ -135,6 +136,7 @@ const customBadgeSnippet = `// Be sure to provide relevant accessibility to unma
   onChange={handleChange}
   color={chosenColor}
   isInvalid={hasErrors}
+  secondaryInputDisplay="bottom"
   button={
     <EuiBadge
       color={chosenColor ? chosenColor : 'hollow'}
@@ -467,12 +469,21 @@ export const ColorPickerExample = {
         },
       ],
       text: (
-        <p>
-          Available only in <strong>EuiColorPicker</strong>. You can optionally
-          use a custom button as the trigger for selection using the{' '}
-          <EuiCode>button</EuiCode> prop. Please remember to add accessibility
-          to this component, using proper button markup and aria labeling.
-        </p>
+        <>
+          <p>
+            Available only in <strong>EuiColorPicker</strong>. You can
+            optionally use a custom button as the trigger for selection using
+            the <EuiCode>button</EuiCode> prop. Please remember to add
+            accessibility to this component, using proper button markup and aria
+            labeling.
+          </p>
+          <p>
+            Additionally, use the <EuiCode>secondaryInputDisplay</EuiCode> prop
+            to show a secondary or alternative color value input. Options
+            include <EuiCode>top</EuiCode> and <EuiCode>bottom</EuiCode>{' '}
+            placement.
+          </p>
+        </>
       ),
       snippet: [customButtonSnippet, customBadgeSnippet],
       demo: <CustomButton />,
diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js
index e8c227cd011..a18b6235f31 100644
--- a/src-docs/src/views/color_picker/custom_button.js
+++ b/src-docs/src/views/color_picker/custom_button.js
@@ -23,6 +23,7 @@ export const CustomButton = () => {
         <EuiColorPicker
           onChange={handleColorChange}
           color={color}
+          secondaryInputDisplay="top"
           button={
             <EuiColorPickerSwatch
               color={selectedColor}
@@ -36,6 +37,7 @@ export const CustomButton = () => {
         onChange={handleColorChange}
         color={color}
         isInvalid={!!errors}
+        secondaryInputDisplay="bottom"
         button={
           <EuiBadge
             color={selectedColor ? selectedColor : 'hollow'}
diff --git a/src/components/color_picker/color_picker.test.tsx b/src/components/color_picker/color_picker.test.tsx
index df7422887ea..2c5b8c3db0b 100644
--- a/src/components/color_picker/color_picker.test.tsx
+++ b/src/components/color_picker/color_picker.test.tsx
@@ -283,7 +283,7 @@ test('Setting a new alpha value calls onChange', () => {
   });
 });
 
-test('default mode does redners child components', () => {
+test('default mode does renders child components', () => {
   const colorPicker = mount(
     <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
   );
@@ -334,3 +334,37 @@ test('picker mode does not render swatches', () => {
   const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
   expect(swatches.length).toBe(0);
 });
+
+test('secondaryInputDisplay `top` has a popover panel input', () => {
+  const colorPicker = mount(
+    <EuiColorPicker
+      onChange={onChange}
+      secondaryInputDisplay="top"
+      color="#ffeedd"
+      {...requiredProps}
+    />
+  );
+
+  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  const inputTop = findTestSubject(colorPicker, 'topColorPickerInput');
+  const inputBottom = findTestSubject(colorPicker, 'bottomColorPickerInput');
+  expect(inputTop.length).toBe(1);
+  expect(inputBottom.length).toBe(0);
+});
+
+test('secondaryInputDisplay `bottom` has a popover panel input', () => {
+  const colorPicker = mount(
+    <EuiColorPicker
+      onChange={onChange}
+      secondaryInputDisplay="bottom"
+      color="#ffeedd"
+      {...requiredProps}
+    />
+  );
+
+  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  const inputTop = findTestSubject(colorPicker, 'topColorPickerInput');
+  const inputBottom = findTestSubject(colorPicker, 'bottomColorPickerInput');
+  expect(inputTop.length).toBe(0);
+  expect(inputBottom.length).toBe(1);
+});
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
index 32982a47cdc..3ec4e6190d9 100644
--- a/src/components/color_picker/color_picker.tsx
+++ b/src/components/color_picker/color_picker.tsx
@@ -40,6 +40,7 @@ import {
   EuiFieldText,
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
+  EuiFormRow,
   EuiRange,
 } from '../form';
 import { EuiI18n } from '../i18n';
@@ -59,7 +60,7 @@ import {
 } from './utils';
 
 type EuiColorPickerDisplay = 'default' | 'inline';
-type EuiColorPickerMode = 'default' | 'swatch' | 'picker';
+type EuiColorPickerMode = 'default' | 'swatch' | 'picker' | 'secondaryInput';
 
 export interface EuiColorPickerOutput {
   rgba: ColorSpaces['rgba'];
@@ -106,7 +107,7 @@ export interface EuiColorPickerProps
    */
   isInvalid?: boolean;
   /**
-   * Choose between swatches with gradient picker (default), swatches only, or gradient picker only.
+   * Choose between swatches with gradient picker (default), swatches only, gradient picker only, or secondary input only.
    */
   mode?: EuiColorPickerMode;
   /**
@@ -140,6 +141,10 @@ export interface EuiColorPickerProps
    * Default is to display the last format entered by the user
    */
   format?: 'hex' | 'rgba';
+  /**
+   * Placement option for a secondary color value input.
+   */
+  secondaryInputDisplay?: 'top' | 'bottom' | 'none';
 }
 
 function isKeyboardEvent(
@@ -201,6 +206,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   append,
   showAlpha = false,
   format,
+  secondaryInputDisplay = 'none',
 }) => {
   const preferredFormat = useMemo(() => {
     if (format) return format;
@@ -248,7 +254,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   const classes = classNames('euiColorPicker', className);
   const popoverClass = 'euiColorPicker__popoverAnchor';
   const panelClasses = classNames('euiColorPicker__popoverPanel', {
-    'euiColorPicker__popoverPanel--pickerOnly': mode === 'picker',
+    'euiColorPicker__popoverPanel--pickerOnly':
+      mode === 'picker' && secondaryInputDisplay !== 'bottom',
     'euiColorPicker__popoverPanel--customButton': button,
   });
   const swatchClass = 'euiColorPicker__swatchSelect';
@@ -414,9 +421,49 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     }
   };
 
+  const inlineInput = secondaryInputDisplay !== 'none' && (
+    <EuiI18n
+      tokens={[
+        'euiColorPicker.colorLabel',
+        'euiColorPicker.colorErrorMessage',
+        'euiColorPicker.transparent',
+      ]}
+      defaults={['Color value', 'Invalid color value', 'Transparent']}>
+      {([colorLabel, colorErrorMessage, transparent]: string[]) => (
+        <EuiFormRow
+          display="rowCompressed"
+          isInvalid={isInvalid}
+          error={isInvalid ? colorErrorMessage : null}>
+          <EuiFieldText
+            compressed={true}
+            value={color ? color.toUpperCase() : HEX_FALLBACK}
+            placeholder={!color ? transparent : undefined}
+            onChange={handleColorInput}
+            isInvalid={isInvalid}
+            disabled={disabled}
+            readOnly={readOnly}
+            aria-label={colorLabel}
+            autoComplete="off"
+            data-test-subj={`${secondaryInputDisplay}ColorPickerInput`}
+          />
+        </EuiFormRow>
+      )}
+    </EuiI18n>
+  );
+
+  const showSecondaryInputOnly = mode === 'secondaryInput';
+  const showPicker = mode !== 'swatch' && !showSecondaryInputOnly;
+  const showSwatches = mode !== 'picker' && !showSecondaryInputOnly;
+
   const composite = (
-    <React.Fragment>
-      {mode !== 'swatch' && (
+    <>
+      {secondaryInputDisplay === 'top' && (
+        <>
+          {inlineInput}
+          <EuiSpacer size="s" />
+        </>
+      )}
+      {showPicker && (
         <div onKeyDown={handleOnKeyDown}>
           <EuiSaturation
             id={id}
@@ -433,7 +480,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
           />
         </div>
       )}
-      {mode !== 'picker' && (
+      {showSwatches && (
         <EuiFlexGroup wrap responsive={false} gutterSize="s" role="listbox">
           {swatches.map((swatch, index) => (
             <EuiFlexItem grow={false} key={swatch}>
@@ -456,8 +503,14 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
           ))}
         </EuiFlexGroup>
       )}
+      {secondaryInputDisplay === 'bottom' && (
+        <>
+          {mode !== 'picker' && <EuiSpacer size="s" />}
+          {inlineInput}
+        </>
+      )}
       {showAlpha && (
-        <React.Fragment>
+        <>
           <EuiSpacer size="s" />
           <EuiI18n
             token="euiColorPicker.alphaLabel"
@@ -477,9 +530,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
               />
             )}
           </EuiI18n>
-        </React.Fragment>
+        </>
       )}
-    </React.Fragment>
+    </>
   );
 
   let buttonOrInput;
@@ -514,18 +567,23 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
             color: colorStyle,
           }}>
           <EuiI18n
-            tokens={['euiColorPicker.openLabel', 'euiColorPicker.closeLabel']}
+            tokens={[
+              'euiColorPicker.openLabel',
+              'euiColorPicker.closeLabel',
+              'euiColorPicker.transparent',
+            ]}
             defaults={[
               'Press the escape key to close the popover',
               'Press the down key to open a popover containing color options',
+              'Transparent',
             ]}>
-            {([openLabel, closeLabel]: string[]) => (
+            {([openLabel, closeLabel, transparent]: string[]) => (
               <EuiFieldText
                 className={inputClasses}
                 onClick={handleInputActivity}
                 onKeyDown={handleInputActivity}
                 value={color ? color.toUpperCase() : HEX_FALLBACK}
-                placeholder={!color ? 'Transparent' : undefined}
+                placeholder={!color ? transparent : undefined}
                 id={id}
                 onChange={handleColorInput}
                 icon={chromaColor ? 'swatchInput' : 'stopSlash'}
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx
index 01361ed2a34..615265d9742 100644
--- a/src/components/color_picker/color_stops/color_stop_thumb.tsx
+++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx
@@ -40,7 +40,7 @@ import { keyCodes } from '../../../services';
 import { EuiButtonIcon } from '../../button';
 import { EuiColorPicker, EuiColorPickerProps } from '../color_picker';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { EuiFieldNumber, EuiFieldText, EuiFormRow } from '../../form';
+import { EuiFieldNumber, EuiFormRow } from '../../form';
 import { EuiI18n } from '../../i18n';
 import { EuiPopover } from '../../popover';
 import { EuiScreenReaderOnly } from '../../accessibility';
@@ -155,9 +155,6 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
     onChange({ stop, color: value });
   };
 
-  const handleColorInputChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    handleColorChange(e.target.value);
-
   const handleStopChange = (value: ColorStop['stop']) => {
     const willBeInvalid = value > localMax || value < localMin;
 
@@ -353,65 +350,41 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
               )}
             </EuiI18n>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFormRow display="rowCompressed" hasEmptyLabelSpace={true}>
-              <EuiI18n
-                token="euiColorStopThumb.removeLabel"
-                default="Remove this stop">
-                {(removeLabel: string) => (
-                  <EuiButtonIcon
-                    iconType="trash"
-                    color="danger"
-                    aria-label={removeLabel}
-                    title={removeLabel}
-                    disabled={!onRemove || readOnly}
-                    onClick={handleOnRemove}
-                  />
-                )}
-              </EuiI18n>
-            </EuiFormRow>
-          </EuiFlexItem>
+          {!readOnly && (
+            <EuiFlexItem grow={false}>
+              <EuiFormRow display="rowCompressed" hasEmptyLabelSpace={true}>
+                <EuiI18n
+                  token="euiColorStopThumb.removeLabel"
+                  default="Remove this stop">
+                  {(removeLabel: string) => (
+                    <EuiButtonIcon
+                      iconType="trash"
+                      color="danger"
+                      aria-label={removeLabel}
+                      title={removeLabel}
+                      disabled={!onRemove}
+                      onClick={handleOnRemove}
+                    />
+                  )}
+                </EuiI18n>
+              </EuiFormRow>
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
-        {!readOnly && (
-          <React.Fragment>
-            <EuiSpacer size="m" />
-            <EuiColorPicker
-              onChange={handleColorChange}
-              color={color}
-              mode={colorPickerMode}
-              swatches={colorPickerSwatches}
-              display="inline"
-              showAlpha={colorPickerShowAlpha}
-            />
-          </React.Fragment>
-        )}
-        {colorPickerMode !== 'swatch' && (
-          <React.Fragment>
-            <EuiSpacer size="s" />
-            <EuiI18n
-              tokens={[
-                'euiColorStopThumb.hexLabel',
-                'euiColorStopThumb.hexErrorMessage',
-              ]}
-              defaults={['Color', 'Invalid color value']}>
-              {([hexLabel, hexErrorMessage]: React.ReactChild[]) => (
-                <EuiFormRow
-                  label={hexLabel}
-                  display="rowCompressed"
-                  isInvalid={colorIsInvalid}
-                  error={colorIsInvalid ? hexErrorMessage : null}>
-                  <EuiFieldText
-                    compressed={true}
-                    readOnly={readOnly}
-                    value={color}
-                    isInvalid={colorIsInvalid}
-                    onChange={handleColorInputChange}
-                  />
-                </EuiFormRow>
-              )}
-            </EuiI18n>
-          </React.Fragment>
-        )}
+        {!readOnly && <EuiSpacer size="s" />}
+        <EuiColorPicker
+          readOnly={readOnly}
+          onChange={handleColorChange}
+          color={color}
+          mode={readOnly ? 'secondaryInput' : colorPickerMode}
+          swatches={colorPickerSwatches}
+          display="inline"
+          showAlpha={colorPickerShowAlpha}
+          isInvalid={colorIsInvalid}
+          secondaryInputDisplay={
+            colorPickerMode === 'swatch' ? 'none' : 'bottom'
+          }
+        />
       </div>
     </EuiPopover>
   );