diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
index ca8750a991d83..7c930fa2e2960 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
@@ -22,6 +22,8 @@ import { ColorPicker, ColorPickerProps } from './color_picker';
 import { mount } from 'enzyme';
 import { ReactWrapper } from 'enzyme';
 import { EuiColorPicker, EuiIconTip } from '@elastic/eui';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ColorPicker', () => {
   const defaultProps: ColorPickerProps = {
@@ -42,6 +44,22 @@ describe('ColorPicker', () => {
     expect(component.find('.tvbColorPicker__clear').length).toBe(0);
   });
 
+  it('should render the correct value to the input text if the prop value is hex', () => {
+    const props = { ...defaultProps, value: '#68BC00' };
+    component = mount(<ColorPicker {...props} />);
+    component.find('.tvbColorPicker button').simulate('click');
+    const input = findTestSubject(component, 'topColorPickerInput');
+    expect(input.props().value).toBe('#68BC00');
+  });
+
+  it('should render the correct value to the input text if the prop value is rgba', () => {
+    const props = { ...defaultProps, value: 'rgba(85,66,177,1)' };
+    component = mount(<ColorPicker {...props} />);
+    component.find('.tvbColorPicker button').simulate('click');
+    const input = findTestSubject(component, 'topColorPickerInput');
+    expect(input.props().value).toBe('85,66,177,1');
+  });
+
   it('should render the correct aria label to the color swatch button', () => {
     const props = { ...defaultProps, value: 'rgba(85,66,177,0.59)' };
     component = mount(<ColorPicker {...props} />);
diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx
index be580c80d5941..444e5c90c7a6d 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx
@@ -43,8 +43,10 @@ export interface ColorPickerProps {
 }
 
 export function ColorPicker({ name, value, disableTrash = false, onChange }: ColorPickerProps) {
-  const initialColorValue = value ? value.replace(COMMAS_NUMS_ONLY_RE, '') : '';
-  const [color, setColor] = useState(initialColorValue);
+  const initialColorValue = value?.includes('rgba')
+    ? value.replace(COMMAS_NUMS_ONLY_RE, '')
+    : value;
+  const [color, setColor] = useState(initialColorValue || '');
 
   const handleColorChange: EuiColorPickerProps['onChange'] = (text: string, { rgba, hex }) => {
     setColor(text);