diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
index 4d4363377563d..136fe51674bf1 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
@@ -26,6 +26,14 @@ import { fromNode, delay } from 'bluebird';
 import { ImageComparator } from 'test_utils/image_comparator';
 import simpleloadPng from './simpleload.png';
 
+// Replace with mock when converting to jest tests
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';
+
+const colors = {
+  seedColors,
+};
+
 describe('tag cloud tests', function() {
   const minValue = 1;
   const maxValue = 9;
@@ -124,7 +132,7 @@ describe('tag cloud tests', function() {
     )}`, function() {
       beforeEach(async function() {
         setupDOM();
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(test.data);
         tagCloud.setOptions(test.options);
         await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -156,7 +164,7 @@ describe('tag cloud tests', function() {
 
         //TagCloud takes at least 600ms to complete (due to d3 animation)
         //renderComplete should only notify at the last one
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -188,7 +196,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying options multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setOptions(logScaleTest.options);
@@ -215,7 +223,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying data multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setData(trimDataTest.data);
@@ -245,7 +253,7 @@ describe('tag cloud tests', function() {
       counter = 0;
       setupDOM();
       return new Promise((resolve, reject) => {
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -291,7 +299,7 @@ describe('tag cloud tests', function() {
   describe('should show correct data when state-updates are interleaved with resize event', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(logScaleTest.data);
       tagCloud.setOptions(logScaleTest.options);
 
@@ -329,7 +337,7 @@ describe('tag cloud tests', function() {
       setupDOM();
       domNode.style.width = '1px';
       domNode.style.height = '1px';
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -355,7 +363,7 @@ describe('tag cloud tests', function() {
       domNode.style.width = '1px';
       domNode.style.height = '1px';
 
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -380,7 +388,7 @@ describe('tag cloud tests', function() {
   describe(`tags should no longer fit after making container smaller`, function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -412,7 +420,7 @@ describe('tag cloud tests', function() {
     });
 
     it('should render simple image', async function() {
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
index 0cd1fdf1d7103..75cad3bc167bf 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
@@ -22,11 +22,15 @@ import ngMock from 'ng_mock';
 import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
 import { Vis } from 'ui/vis';
 import { ImageComparator } from 'test_utils/image_comparator';
-import { TagCloudVisualization } from '../tag_cloud_visualization';
+import { createTagCloudVisualization } from '../tag_cloud_visualization';
 import basicdrawPng from './basicdraw.png';
 import afterresizePng from './afterresize.png';
 import afterparamChange from './afterparamchange.png';
 
+// Replace with mock when converting to jest tests
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';
+
 const THRESHOLD = 0.65;
 const PIXEL_DIFF = 64;
 
@@ -55,6 +59,11 @@ describe('TagCloudVisualizationTest', function() {
       { 'col-0': 'BR', 'col-1': 3 },
     ],
   };
+  const TagCloudVisualization = createTagCloudVisualization({
+    colors: {
+      seedColors,
+    },
+  });
 
   beforeEach(ngMock.module('kibana'));
   beforeEach(
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
index 5bd64ec000a6a..f5084fd92cfee 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
@@ -19,7 +19,6 @@
 
 import d3 from 'd3';
 import d3TagCloud from 'd3-cloud';
-import { seedColors } from 'ui/vis/components/color/seed_colors';
 import { EventEmitter } from 'events';
 
 const ORIENTATIONS = {
@@ -38,7 +37,7 @@ const D3_SCALING_FUNCTIONS = {
 };
 
 export class TagCloud extends EventEmitter {
-  constructor(domNode) {
+  constructor(domNode, colors) {
     super();
 
     //DOM
@@ -55,6 +54,7 @@ export class TagCloud extends EventEmitter {
     this._spiral = 'archimedean'; //layout shape
     this._timeInterval = 1000; //time allowed for layout algorithm
     this._padding = 5;
+    this._seedColors = colors.seedColors;
 
     //OPTIONS
     this._orientation = 'single';
@@ -208,7 +208,7 @@ export class TagCloud extends EventEmitter {
       enteringTags.style('font-style', this._fontStyle);
       enteringTags.style('font-weight', () => this._fontWeight);
       enteringTags.style('font-family', () => this._fontFamily);
-      enteringTags.style('fill', getFill);
+      enteringTags.style('fill', this.getFill.bind(this));
       enteringTags.attr('text-anchor', () => 'middle');
       enteringTags.attr('transform', affineTransform);
       enteringTags.attr('data-test-subj', getDisplayText);
@@ -369,6 +369,11 @@ export class TagCloud extends EventEmitter {
     };
     return debug;
   }
+
+  getFill(tag) {
+    const colorScale = d3.scale.ordinal().range(this._seedColors);
+    return colorScale(tag.text);
+  }
 }
 
 TagCloud.STATUS = { COMPLETE: 0, INCOMPLETE: 1 };
@@ -402,11 +407,6 @@ function getSizeInPixels(tag) {
   return `${tag.size}px`;
 }
 
-const colorScale = d3.scale.ordinal().range(seedColors);
-function getFill(tag) {
-  return colorScale(tag.text);
-}
-
 function hashWithinRange(str, max) {
   str = JSON.stringify(str);
   let hash = 0;
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
index 7d6e8252d86d9..f2163abbbc723 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
@@ -31,130 +31,132 @@ import { FeedbackMessage } from './feedback_message';
 
 const MAX_TAG_COUNT = 200;
 
-export class TagCloudVisualization {
-  constructor(node, vis) {
-    this._containerNode = node;
-
-    const cloudRelativeContainer = document.createElement('div');
-    cloudRelativeContainer.classList.add('tgcVis');
-    cloudRelativeContainer.setAttribute('style', 'position: relative');
-    const cloudContainer = document.createElement('div');
-    cloudContainer.classList.add('tgcVis');
-    cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
-    this._containerNode.classList.add('visChart--vertical');
-    cloudRelativeContainer.appendChild(cloudContainer);
-    this._containerNode.appendChild(cloudRelativeContainer);
-
-    this._vis = vis;
-    this._truncated = false;
-    this._tagCloud = new TagCloud(cloudContainer);
-    this._tagCloud.on('select', event => {
-      if (!this._visParams.bucket) {
-        return;
-      }
-      this._vis.API.events.filter({
-        table: event.meta.data,
-        column: 0,
-        row: event.meta.rowIndex,
+export function createTagCloudVisualization({ colors }) {
+  return class TagCloudVisualization {
+    constructor(node, vis) {
+      this._containerNode = node;
+
+      const cloudRelativeContainer = document.createElement('div');
+      cloudRelativeContainer.classList.add('tgcVis');
+      cloudRelativeContainer.setAttribute('style', 'position: relative');
+      const cloudContainer = document.createElement('div');
+      cloudContainer.classList.add('tgcVis');
+      cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
+      this._containerNode.classList.add('visChart--vertical');
+      cloudRelativeContainer.appendChild(cloudContainer);
+      this._containerNode.appendChild(cloudRelativeContainer);
+
+      this._vis = vis;
+      this._truncated = false;
+      this._tagCloud = new TagCloud(cloudContainer, colors);
+      this._tagCloud.on('select', event => {
+        if (!this._visParams.bucket) {
+          return;
+        }
+        this._vis.API.events.filter({
+          table: event.meta.data,
+          column: 0,
+          row: event.meta.rowIndex,
+        });
       });
-    });
-    this._renderComplete$ = Rx.fromEvent(this._tagCloud, 'renderComplete');
-
-    this._feedbackNode = document.createElement('div');
-    this._containerNode.appendChild(this._feedbackNode);
-    this._feedbackMessage = React.createRef();
-    render(
-      <I18nContext>
-        <FeedbackMessage ref={this._feedbackMessage} />
-      </I18nContext>,
-      this._feedbackNode
-    );
-
-    this._labelNode = document.createElement('div');
-    this._containerNode.appendChild(this._labelNode);
-    this._label = React.createRef();
-    render(<Label ref={this._label} />, this._labelNode);
-  }
-
-  async render(data, visParams, status) {
-    if (!(status.resize || status.data || status.params)) return;
-
-    if (status.params || status.data) {
-      this._updateParams(visParams);
-      this._updateData(data);
+      this._renderComplete$ = Rx.fromEvent(this._tagCloud, 'renderComplete');
+
+      this._feedbackNode = document.createElement('div');
+      this._containerNode.appendChild(this._feedbackNode);
+      this._feedbackMessage = React.createRef();
+      render(
+        <I18nContext>
+          <FeedbackMessage ref={this._feedbackMessage} />
+        </I18nContext>,
+        this._feedbackNode
+      );
+
+      this._labelNode = document.createElement('div');
+      this._containerNode.appendChild(this._labelNode);
+      this._label = React.createRef();
+      render(<Label ref={this._label} />, this._labelNode);
     }
 
-    if (status.resize) {
-      this._resize();
-    }
+    async render(data, visParams, status) {
+      if (!(status.resize || status.data || status.params)) return;
+
+      if (status.params || status.data) {
+        this._updateParams(visParams);
+        this._updateData(data);
+      }
 
-    await this._renderComplete$.pipe(take(1)).toPromise();
+      if (status.resize) {
+        this._resize();
+      }
+
+      await this._renderComplete$.pipe(take(1)).toPromise();
+
+      if (data.columns.length !== 2) {
+        this._feedbackMessage.current.setState({
+          shouldShowTruncate: false,
+          shouldShowIncomplete: false,
+        });
+        return;
+      }
 
-    if (data.columns.length !== 2) {
+      this._label.current.setState({
+        label: `${data.columns[0].name} - ${data.columns[1].name}`,
+        shouldShowLabel: visParams.showLabel,
+      });
       this._feedbackMessage.current.setState({
-        shouldShowTruncate: false,
-        shouldShowIncomplete: false,
+        shouldShowTruncate: this._truncated,
+        shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
       });
-      return;
     }
 
-    this._label.current.setState({
-      label: `${data.columns[0].name} - ${data.columns[1].name}`,
-      shouldShowLabel: visParams.showLabel,
-    });
-    this._feedbackMessage.current.setState({
-      shouldShowTruncate: this._truncated,
-      shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
-    });
-  }
-
-  destroy() {
-    this._tagCloud.destroy();
-    unmountComponentAtNode(this._feedbackNode);
-    unmountComponentAtNode(this._labelNode);
-  }
-
-  _updateData(data) {
-    if (!data || !data.rows.length) {
-      this._tagCloud.setData([]);
-      return;
+    destroy() {
+      this._tagCloud.destroy();
+      unmountComponentAtNode(this._feedbackNode);
+      unmountComponentAtNode(this._labelNode);
     }
 
-    const bucket = this._visParams.bucket;
-    const metric = this._visParams.metric;
-    const bucketFormatter = bucket ? getFormat(bucket.format) : null;
-    const tagColumn = bucket ? data.columns[bucket.accessor].id : -1;
-    const metricColumn = data.columns[metric.accessor].id;
-    const tags = data.rows.map((row, rowIndex) => {
-      const tag = row[tagColumn] === undefined ? 'all' : row[tagColumn];
-      const metric = row[metricColumn];
-      return {
-        displayText: bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag,
-        rawText: tag,
-        value: metric,
-        meta: {
-          data: data,
-          rowIndex: rowIndex,
-        },
-      };
-    });
-
-    if (tags.length > MAX_TAG_COUNT) {
-      tags.length = MAX_TAG_COUNT;
-      this._truncated = true;
-    } else {
-      this._truncated = false;
-    }
+    _updateData(data) {
+      if (!data || !data.rows.length) {
+        this._tagCloud.setData([]);
+        return;
+      }
 
-    this._tagCloud.setData(tags);
-  }
+      const bucket = this._visParams.bucket;
+      const metric = this._visParams.metric;
+      const bucketFormatter = bucket ? getFormat(bucket.format) : null;
+      const tagColumn = bucket ? data.columns[bucket.accessor].id : -1;
+      const metricColumn = data.columns[metric.accessor].id;
+      const tags = data.rows.map((row, rowIndex) => {
+        const tag = row[tagColumn] === undefined ? 'all' : row[tagColumn];
+        const metric = row[metricColumn];
+        return {
+          displayText: bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag,
+          rawText: tag,
+          value: metric,
+          meta: {
+            data: data,
+            rowIndex: rowIndex,
+          },
+        };
+      });
 
-  _updateParams(visParams) {
-    this._visParams = visParams;
-    this._tagCloud.setOptions(visParams);
-  }
+      if (tags.length > MAX_TAG_COUNT) {
+        tags.length = MAX_TAG_COUNT;
+        this._truncated = true;
+      } else {
+        this._truncated = false;
+      }
 
-  _resize() {
-    this._tagCloud.resize();
-  }
+      this._tagCloud.setData(tags);
+    }
+
+    _updateParams(visParams) {
+      this._visParams = visParams;
+      this._tagCloud.setOptions(visParams);
+    }
+
+    _resize() {
+      this._tagCloud.resize();
+    }
+  };
 }
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
index 66710791edc83..182da40a3e6ea 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
@@ -27,6 +27,7 @@ import { plugin } from '.';
 const plugins: Readonly<TagCloudPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
index 865229ce0e4c1..9e5940eca1598 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
@@ -20,14 +20,21 @@
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 import { createTagCloudFn } from './tag_cloud_fn';
-import { tagcloudVisDefinition } from './tag_cloud_type';
+import { createTagCloudVisTypeDefinition } from './tag_cloud_type';
 
 /** @internal */
 export interface TagCloudPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
+}
+
+/** @internal */
+export interface TagCloudVisDependencies {
+  colors: ChartsPluginSetup['colors'];
 }
 
 /** @internal */
@@ -38,9 +45,17 @@ export class TagCloudPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: TagCloudPluginSetupDependencies) {
+  public setup(
+    core: CoreSetup,
+    { expressions, visualizations, charts }: TagCloudPluginSetupDependencies
+  ) {
+    const visualizationDependencies: TagCloudVisDependencies = {
+      colors: charts.colors,
+    };
     expressions.registerFunction(createTagCloudFn);
-    visualizations.types.createBaseVisualization(tagcloudVisDefinition);
+    visualizations.types.createBaseVisualization(
+      createTagCloudVisTypeDefinition(visualizationDependencies)
+    );
   }
 
   public start(core: CoreStart) {
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
index 9c673b1122573..626c53b73b241 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
@@ -25,9 +25,10 @@ import { Status } from '../../visualizations/public';
 import { TagCloudOptions } from './components/tag_cloud_options';
 
 // @ts-ignore
-import { TagCloudVisualization } from './components/tag_cloud_visualization';
+import { createTagCloudVisualization } from './components/tag_cloud_visualization';
+import { TagCloudVisDependencies } from './plugin';
 
-export const tagcloudVisDefinition = {
+export const createTagCloudVisTypeDefinition = (deps: TagCloudVisDependencies) => ({
   name: 'tagcloud',
   title: i18n.translate('visTypeTagCloud.vis.tagCloudTitle', { defaultMessage: 'Tag Cloud' }),
   icon: 'visTagCloud',
@@ -44,7 +45,7 @@ export const tagcloudVisDefinition = {
     },
   },
   requiresUpdateStatus: [Status.PARAMS, Status.RESIZE, Status.DATA],
-  visualization: TagCloudVisualization,
+  visualization: createTagCloudVisualization(deps),
   editorConfig: {
     collections: {
       scales: [
@@ -121,4 +122,4 @@ export const tagcloudVisDefinition = {
     ]),
   },
   useCustomNoDataScreen: true,
-};
+});
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts b/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
index 6a4bcb3c50495..f25198b0d0335 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
@@ -111,7 +111,7 @@ export const createGaugeVisTypeDefinition = (deps: KbnVislibVisTypesDependencies
   },
   visualization: createVislibVisController(deps),
   editorConfig: {
-    collections: getGaugeCollections(deps.colorMaps),
+    collections: getGaugeCollections(deps.charts.colorMaps),
     optionsTemplate: GaugeOptions,
     schemas: new Schemas([
       {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/goal.ts b/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
index 586ee74ec548b..79ae52ce72cb9 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
@@ -75,7 +75,7 @@ export const createGoalVisTypeDefinition = (deps: KbnVislibVisTypesDependencies)
     },
   },
   editorConfig: {
-    collections: getGaugeCollections(deps.colorMaps),
+    collections: getGaugeCollections(deps.charts.colorMaps),
     optionsTemplate: GaugeOptions,
     schemas: new Schemas([
       {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts b/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
index 25e5a8987761e..e7c1f379deff6 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
@@ -85,7 +85,7 @@ export const createHeatmapVisTypeDefinition = (deps: KbnVislibVisTypesDependenci
     brush: { disabled: false },
   },
   editorConfig: {
-    collections: getHeatmapCollections(deps.colorMaps),
+    collections: getHeatmapCollections(deps.charts.colorMaps),
     optionsTemplate: HeatmapOptions,
     schemas: new Schemas([
       {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts b/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
index b65197850abb3..11fc7595922a7 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
@@ -26,8 +26,6 @@ import {
   vislibSlicesResponseHandlerProvider,
   // @ts-ignore
 } from 'ui/vis/response_handlers/vislib';
-// @ts-ignore
-import { vislibColor } from 'ui/vis/components/color/color';
 
 import { plugin } from '.';
 import {
@@ -46,7 +44,6 @@ const setupPlugins: Readonly<KbnVislibVisTypesPluginSetupDependencies> = {
   __LEGACY: {
     vislibSeriesResponseHandlerProvider,
     vislibSlicesResponseHandlerProvider,
-    vislibColor,
   },
 };
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts b/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
index 0f2c47b59e332..4a20f57fc5ddf 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
@@ -49,12 +49,11 @@ type KbnVislibVisTypesCoreSetup = CoreSetup<KbnVislibVisTypesPluginStartDependen
 export interface LegacyDependencies {
   vislibSeriesResponseHandlerProvider: ResponseHandlerProvider;
   vislibSlicesResponseHandlerProvider: ResponseHandlerProvider;
-  vislibColor: (colors: Array<string | number>, mappings: any) => (value: any) => any;
 }
 
 export type KbnVislibVisTypesDependencies = LegacyDependencies & {
   uiSettings: IUiSettingsClient;
-  colorMaps: ChartsPluginSetup['colorMaps'];
+  charts: ChartsPluginSetup;
 };
 
 /** @internal */
@@ -81,7 +80,7 @@ export class KbnVislibVisTypesPlugin implements Plugin<Promise<void>, void> {
   ) {
     const visualizationDependencies: Readonly<KbnVislibVisTypesDependencies> = {
       uiSettings: core.uiSettings,
-      colorMaps: charts.colorMaps,
+      charts,
       ...__LEGACY,
     };
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
index e974642b22385..1a667389c83bc 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
@@ -24,12 +24,15 @@ import {
   vislibSeriesResponseHandlerProvider,
   vislibSlicesResponseHandlerProvider,
 } from 'ui/vis/response_handlers/vislib';
-import { vislibColor } from 'ui/vis/components/color/color';
 
 import { Vis } from '../../../vis';
-// TODO: Remove when converted to jest
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { colorMapsService as colorMaps } from '../../../../../../../../plugins/charts/public/services';
+
+// TODO: Remove when converted to jest mocks
+import {
+  colorMapsService as colorMaps,
+  ColorsService,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../../../plugins/charts/public/services';
 
 const $visCanvas = $('<div>')
   .attr('id', 'vislib-vis-fixtures')
@@ -64,10 +67,15 @@ afterEach(function() {
 
 const getDeps = () => {
   const uiSettings = new Map();
+  const colors = new ColorsService();
+  colors.init(uiSettings);
+
   return {
     uiSettings,
-    vislibColor,
-    colorMaps,
+    charts: {
+      colors,
+      colorMaps,
+    },
     vislibSeriesResponseHandlerProvider,
     vislibSlicesResponseHandlerProvider,
   };
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
index 32afb6a008b61..3f27ee8062a75 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
@@ -55,7 +55,7 @@ export class Vis extends EventEmitter {
       this.data,
       this.uiState,
       this.element,
-      this.deps.vislibColor
+      this.deps.charts.colors.vislibColor.bind(this.deps.charts.colors)
     );
   }
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
index e07b73a07ade5..ce67fdeae3811 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
@@ -56,9 +56,9 @@ const defaultConfig = {
 };
 
 export class MeterGauge {
-  constructor(gaugeChart, { colorMaps }) {
+  constructor(gaugeChart, { charts }) {
     this.gaugeChart = gaugeChart;
-    this.colorMaps = colorMaps;
+    this.colorMaps = charts.colorMaps;
     this.gaugeConfig = gaugeChart.gaugeConfig;
     this.gaugeConfig = _.defaultsDeep(this.gaugeConfig, defaultConfig);
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
index 3b1c9f8ff0fbd..42e68bea88f86 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -42,7 +42,7 @@ export class HeatmapChart extends PointSeries {
   constructor(handler, chartEl, chartData, seriesConfigArgs, deps) {
     super(handler, chartEl, chartData, seriesConfigArgs, deps);
 
-    this.colorMaps = deps.colorMaps;
+    this.colorMaps = deps.charts.colorMaps;
     this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults);
 
     this.handler.visConfig.set('legend', {
diff --git a/src/plugins/charts/public/services/colors/color_palette.ts b/src/plugins/charts/public/services/colors/color_palette.ts
index 3c808037705a2..7b8e93bbde240 100644
--- a/src/plugins/charts/public/services/colors/color_palette.ts
+++ b/src/plugins/charts/public/services/colors/color_palette.ts
@@ -19,6 +19,7 @@
 
 import d3 from 'd3';
 import _ from 'lodash';
+
 import { seedColors } from './seed_colors';
 
 const offset = 300; // Hue offset to start at
diff --git a/src/plugins/charts/public/services/colors/colors.ts b/src/plugins/charts/public/services/colors/colors.ts
index 13eeecf0023ed..bbe3ae9a67a6b 100644
--- a/src/plugins/charts/public/services/colors/colors.ts
+++ b/src/plugins/charts/public/services/colors/colors.ts
@@ -22,6 +22,7 @@ import _ from 'lodash';
 import { CoreSetup } from 'kibana/public';
 
 import { MappedColors } from './mapped_colors';
+import { seedColors } from './seed_colors';
 
 /**
  * Accepts an array of strings or numbers that are used to create a
@@ -32,6 +33,8 @@ import { MappedColors } from './mapped_colors';
 export class ColorsService {
   private _mappedColors?: MappedColors;
 
+  public readonly seedColors = seedColors;
+
   public get mappedColors() {
     if (!this._mappedColors) {
       throw new Error('ColorService not yet initialized');
@@ -45,8 +48,6 @@ export class ColorsService {
   }
 
   vislibColor(arrayOfStringsOrNumbers?: any, colorMapping = {}) {
-    colorMapping = colorMapping || {};
-
     if (!Array.isArray(arrayOfStringsOrNumbers)) {
       throw new Error(
         `vislibColor expects an array but recived: ${typeof arrayOfStringsOrNumbers}`