diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
index 99fbfa058a2de..7b84b990f963a 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -14,6 +14,8 @@ import { FramePublicAPI } from '../types';
 import { State } from './types';
 import { Position } from '@elastic/charts';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
+import { chartPluginMock } from 'src/plugins/charts/public/mocks';
+import { EuiColorPicker } from '@elastic/eui';
 
 describe('XY Config panels', () => {
   let frame: FramePublicAPI;
@@ -322,6 +324,8 @@ describe('XY Config panels', () => {
           accessor="bar"
           groupId="left"
           state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
+          formatFactory={jest.fn()}
+          paletteService={chartPluginMock.createPaletteRegistry()}
         />
       );
 
@@ -343,6 +347,8 @@ describe('XY Config panels', () => {
           accessor="bar"
           groupId="left"
           state={state}
+          formatFactory={jest.fn()}
+          paletteService={chartPluginMock.createPaletteRegistry()}
         />
       );
 
@@ -353,5 +359,82 @@ describe('XY Config panels', () => {
 
       expect(options!.map(({ label }) => label)).toEqual(['Auto', 'Left', 'Right']);
     });
+
+    test('sets the color of a dimension to the color from palette service if not set explicitly', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={{
+            ...frame,
+            activeData: {
+              first: {
+                type: 'datatable',
+                columns: [],
+                rows: [{ bar: 123 }],
+              },
+            },
+          }}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={{
+            ...state,
+            layers: [
+              {
+                seriesType: 'bar',
+                layerId: 'first',
+                splitAccessor: undefined,
+                xAccessor: 'foo',
+                accessors: ['bar'],
+              },
+            ],
+          }}
+          formatFactory={jest.fn()}
+          paletteService={chartPluginMock.createPaletteRegistry()}
+        />
+      );
+
+      expect(component.find(EuiColorPicker).prop('color')).toEqual('black');
+    });
+
+    test('uses the overwrite color if set', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={{
+            ...frame,
+            activeData: {
+              first: {
+                type: 'datatable',
+                columns: [],
+                rows: [{ bar: 123 }],
+              },
+            },
+          }}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={{
+            ...state,
+            layers: [
+              {
+                seriesType: 'bar',
+                layerId: 'first',
+                splitAccessor: undefined,
+                xAccessor: 'foo',
+                accessors: ['bar'],
+                yConfig: [{ forAccessor: 'bar', color: 'red' }],
+              },
+            ],
+          }}
+          formatFactory={jest.fn()}
+          paletteService={chartPluginMock.createPaletteRegistry()}
+        />
+      );
+
+      expect(component.find(EuiColorPicker).prop('color')).toEqual('red');
+    });
   });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index 32f503b332e0e..cd8a5993d3ecb 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -629,7 +629,7 @@ const ColorPicker = ({
     <EuiColorPicker
       data-test-subj="indexPattern-dimension-colorPicker"
       compressed
-      isClearable={color !== ''}
+      isClearable={Boolean(overwriteColor)}
       onChange={handleColor}
       color={disabled ? '' : color || currentColor}
       disabled={disabled}