diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 5a5d84eca62..9d866a679eb 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -41,6 +41,18 @@ export interface AngleFromTo {
     x1: Radian;
 }
 
+// @alpha (undocumented)
+export interface AnimKeyframe {
+    // (undocumented)
+    easingFunction: EasingFunction;
+    // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    keyframeConfig: Partial<StaticConfig>;
+    // (undocumented)
+    time: number;
+}
+
 // @public
 export const AnnotationDomainType: Readonly<{
     XDomain: "xDomain";
@@ -607,23 +619,9 @@ export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle;
 // @public (undocumented)
 export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle;
 
-// Warning: (ae-forgotten-export) The symbol "Margins" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const DEFAULT_CHART_MARGINS: Margins;
-
-// @public (undocumented)
-export const DEFAULT_CHART_PADDING: Margins;
-
-// @public (undocumented)
-export const DEFAULT_GEOMETRY_STYLES: SharedGeometryStateStyle;
-
 // @public
 export const DEFAULT_GLOBAL_ID = "__global__";
 
-// @public (undocumented)
-export const DEFAULT_MISSING_COLOR = "red";
-
 // @public (undocumented)
 export const DEFAULT_SETTINGS_SPEC: SettingsSpec;
 
@@ -697,6 +695,9 @@ export type DomainPaddingUnit = $Values<typeof DomainPaddingUnit>;
 // @public (undocumented)
 export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoundedDomain | UnboundedDomainWithInterval;
 
+// @alpha (undocumented)
+export type EasingFunction = (x: Ratio) => Ratio;
+
 // @public (undocumented)
 export type ElementClickListener = (elements: Array<XYChartElementEvent | PartitionElementEvent | HeatmapElementEvent | WordCloudElementEvent>) => void;
 
@@ -1349,6 +1350,9 @@ export interface LogScaleOptions {
 // @public (undocumented)
 export type LowerBoundedDomain = DomainBase & LowerBound;
 
+// @public
+export type Margins = PerSideDistance;
+
 // @public
 export type MarkBuffer = number | ((radius: number) => number);
 
@@ -1413,8 +1417,6 @@ export type OrdinalDomain = (number | string)[];
 // @public (undocumented)
 export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;
 
-// Warning: (ae-forgotten-export) The symbol "PerSideDistance" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export type Padding = PerSideDistance;
 
@@ -1433,8 +1435,6 @@ export type PartialTheme = RecursivePartial<Theme>;
 // @public (undocumented)
 export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
 
-// Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export interface PartitionConfig extends StaticConfig {
     // @alpha (undocumented)
@@ -1494,6 +1494,18 @@ export const PATH_KEY = "path";
 // @public (undocumented)
 export function pathAccessor(n: ArrayEntry): LegendPath;
 
+// @public
+export interface PerSideDistance {
+    // (undocumented)
+    bottom: number;
+    // (undocumented)
+    left: number;
+    // (undocumented)
+    right: number;
+    // (undocumented)
+    top: number;
+}
+
 // @public
 export const Placement: Readonly<{
     Top: "top";
@@ -2135,6 +2147,9 @@ export type TickStyle = StrokeStyle & Visible & {
 // @public (undocumented)
 export function timeFormatter(format: string): TickFormatter;
 
+// @public (undocumented)
+export type TimeMs = number;
+
 // @public
 export function toEntries<T extends Record<string, string>, S>(array: T[], accessor: keyof T, staticValue: S): Record<string, S>;
 
@@ -2417,8 +2432,6 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // src/chart_types/heatmap/layout/types/config_types.ts:20:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:51:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:52:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:139:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:140:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts
index 3f566f9536c..2edfe6d52d7 100644
--- a/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts
+++ b/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { FontFamily } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 
 // todo switch to `io-ts` style, generic way of combining static and runtime type info
 /** @public */
diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
index aec57f22703..0caf43fa348 100644
--- a/packages/charts/src/chart_types/goal_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -9,10 +9,11 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/color';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { Color, LabelAccessor, RecursivePartial } from '../../../utils/common';
+import { LabelAccessor, RecursivePartial } from '../../../utils/common';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
index e42c6f5ff78..b09a568c213 100644
--- a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
+++ b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BandViewModel } from '../../layout/types/viewmodel_types';
@@ -20,7 +21,7 @@ const EMPTY_TOOLTIP = Object.freeze({
 const getBandColor = (value: number, bands: BandViewModel[]) =>
   bands.find(({ value: v }) => {
     return v >= value;
-  })?.fillColor ?? 'white';
+  })?.fillColor ?? Colors.White.rgba;
 
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(
diff --git a/packages/charts/src/chart_types/heatmap/layout/config/config.ts b/packages/charts/src/chart_types/heatmap/layout/config/config.ts
index 6957f4f208a..3e76683f6b4 100644
--- a/packages/charts/src/chart_types/heatmap/layout/config/config.ts
+++ b/packages/charts/src/chart_types/heatmap/layout/config/config.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { Config } from '../types/config_types';
 
 /** @internal */
@@ -22,7 +23,7 @@ export const config: Config = {
 
   brushArea: {
     visible: true,
-    fill: 'black', // black === transparent
+    fill: Colors.Black.rgba,
     stroke: '#69707D', // euiColorDarkShade,
     strokeWidth: 2,
   },
@@ -44,7 +45,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: Colors.Black.rgba,
     fontVariant: 'normal',
     fontWeight: 'normal',
     textOpacity: 1,
@@ -60,7 +61,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: Colors.Black.rgba,
     fontVariant: 'normal',
     fontWeight: 'normal',
     textOpacity: 1,
@@ -92,7 +93,7 @@ export const config: Config = {
       fontSize: 10,
       fontFamily: 'Sans-Serif',
       fontStyle: 'normal',
-      textColor: 'black',
+      textColor: Colors.Black.rgba,
       fontVariant: 'normal',
       fontWeight: 'normal',
       textOpacity: 1,
diff --git a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts
index a1b7a3fef28..f9059d4e20e 100644
--- a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts
+++ b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 import { Cell } from './viewmodel_types';
 
 /**
diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts
index 9f5b7e392ca..c8a1a0d23c7 100644
--- a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts
+++ b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { Font } from '../../../../common/text_utils';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
 import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line';
@@ -92,7 +93,7 @@ export function renderCanvas2d(
               fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal',
               fontVariant: 'normal',
               fontWeight: 'normal',
-              textColor: 'black',
+              textColor: Colors.Black.rgba,
               textOpacity: 1,
             };
             const { padding } = config.yAxisLabel;
diff --git a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts
index 1f781d8e09a..1e0634151a8 100644
--- a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts
+++ b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts
@@ -6,13 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../common/color';
 import { getPredicateFn } from '../../../common/predicate';
-import { Color, safeFormat, ValueFormatter } from '../../../utils/common';
+import { safeFormat, ValueFormatter } from '../../../utils/common';
 import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap';
 import { ColorScale } from '../state/selectors/get_color_scale';
 
-const TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)';
-
 function defaultColorBandFormatter(valueFormatter?: ValueFormatter) {
   return (startValue: number, endValue: number) => {
     const finiteStart = Number.isFinite(startValue);
@@ -50,6 +49,6 @@ function getBandScale(bands: ColorBand[]): ColorScale {
         return color;
       }
     }
-    return TRANSPARENT_COLOR;
+    return Colors.Transparent.rgba;
   };
 }
diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
index f1c10e0ebc2..90e418a36d2 100644
--- a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
+++ b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
@@ -9,13 +9,14 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/color';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
 import { SeriesScales, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
-import { Color, Datum, RecursivePartial } from '../../../utils/common';
+import { Datum, RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts
index 5ecab309122..8bd9029bdcb 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { Color } from '../../../../utils/common';
 import { getBandsColorScale } from '../../scales/band_color_scale';
 import { ColorBand } from '../../specs/heatmap';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
index 15218ae5b5e..8c4df5c5687 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { RGBtoString } from '../../../../common/color_library_wrappers';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
@@ -38,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // X-axis value
           tooltipInfo.values.push({
             label: config.xAxisLabel.name,
-            color: 'transparent',
+            color: Colors.Transparent.rgba,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -53,7 +54,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // Y-axis value
           tooltipInfo.values.push({
             label: config.yAxisLabel.name,
-            color: 'transparent',
+            color: Colors.Transparent.rgba,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -83,7 +84,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     } else {
       tooltipInfo.values.push({
         label: ``,
-        color: 'transparent',
+        color: Colors.Transparent.rgba,
         isHighlighted: false,
         isVisible: true,
         seriesIdentifier: {
diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts
index 92360860a55..842b8f5b7df 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts
@@ -8,9 +8,10 @@
 
 import { $Values as Values } from 'utility-types';
 
+import { Color } from '../../../../common/color';
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry';
 import { Font, FontFamily, PartialFont, TextContrast } from '../../../../common/text_utils';
-import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter } from '../../../../utils/common';
 import { PerSideDistance } from '../../../../utils/dimensions';
 
 /** @public */
diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
index dd90b8b9db5..a9a5c1e8506 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
@@ -7,6 +7,7 @@
  */
 
 import { CategoryKey } from '../../../../common/category';
+import { Colors, Color } from '../../../../common/color';
 import {
   Coordinate,
   Distance,
@@ -20,7 +21,6 @@ import {
 import { Font, VerticalAlignments } from '../../../../common/text_utils';
 import { GroupByAccessor } from '../../../../specs';
 import { LegendPath } from '../../../../state/actions/legend';
-import { Color } from '../../../../utils/common';
 import { ContinuousDomainFocus } from '../../renderer/canvas/partition';
 import { Layer } from '../../specs';
 import { config, MODEL_KEY, ValueGetterName } from '../config';
@@ -140,7 +140,7 @@ const defaultFont: Font = {
   fontVariant: 'normal',
   fontFamily: '',
   fontWeight: 'normal',
-  textColor: 'black',
+  textColor: Colors.Black.rgba,
   textOpacity: 1,
 };
 
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
index ca53cf609d4..040d59e6d71 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { getOnPaperColorSet } from '../../../../common/color_calcs';
 import { TAU } from '../../../../common/constants';
 import {
@@ -17,7 +18,7 @@ import {
   trueBearingToStandardPositionAngle,
 } from '../../../../common/geometry';
 import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../../../../common/text_utils';
-import { Color, ValueFormatter } from '../../../../utils/common';
+import { ValueFormatter } from '../../../../utils/common';
 import { Point } from '../../../../utils/point';
 import { Config, LinkLabelConfig } from '../types/config_types';
 import { LinkLabelVM, RawTextGetter, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types';
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts
index 671af9078ff..510da6ed901 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { measureText } from '../../../../common/text_utils';
 import { SmallMultiplesStyle } from '../../../../specs';
-import { Color, identity, mergePartial, RecursivePartial } from '../../../../utils/common';
+import { identity, mergePartial, RecursivePartial } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Layer, PartitionSpec } from '../../specs';
 import { config as defaultConfig, VALUE_GETTERS } from '../config';
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
index 1ac9b509d89..42c6b2953c2 100644
--- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
+++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Color, Colors } from '../../../../common/color';
 import { argsToRGBString, stringToRGB } from '../../../../common/color_library_wrappers';
 import { TAU } from '../../../../common/constants';
 import { fillTextColor } from '../../../../common/fill_text_color';
@@ -19,7 +20,7 @@ import {
 } from '../../../../common/geometry';
 import { Part, TextMeasure } from '../../../../common/text_utils';
 import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs';
-import { StrokeStyle, ValueFormatter, Color, RecursivePartial } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter, RecursivePartial } from '../../../../utils/common';
 import { Layer } from '../../specs';
 import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config';
 import { Config, FillLabelConfig, PartitionLayout } from '../types/config_types';
@@ -154,7 +155,7 @@ export function makeQuadViewModel(
     const { textColor, textInvertible, textContrast } = { ...fillLabel, ...layer.fillLabel };
     const color =
       !isSunburstLayout && textNegligible
-        ? 'transparent'
+        ? Colors.Transparent.rgba
         : fillTextColor(textColor, textInvertible, textContrast, fillColor, containerBackgroundColor);
     return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor: color, ...node };
   });
diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts
index bdeee974ebb..5a2e4e648d7 100644
--- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts
+++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { AnimationState, ContinuousDomainFocus } from './partition';
 
@@ -88,7 +89,7 @@ export function renderLinearPartitionCanvas2d(
       ctx.beginPath();
       ctx.rect(fx0 + fPadding, y0 + padding / 2, fWidth - fPadding, y1 - y0 - padding);
       ctx.fill();
-      if (textColor === 'transparent' || label === '' || fWidth < 4) return;
+      if (textColor === 'transparent' || textColor === Colors.Transparent.rgba || label === '' || fWidth < 4) return;
       ctx.fillStyle = textColor;
       ctx.save();
       ctx.clip(); // undoing a clip needs context save/restore, which is why it's wrapped in a save/restore
diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts
index 418aff27bdd..4a6a5ddd88c 100644
--- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts
+++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { addOpacity } from '../../../../common/color_calcs';
 import { TAU } from '../../../../common/constants';
 import { Pixels } from '../../../../common/geometry';
 import { cssFontShorthand } from '../../../../common/text_utils';
 import { renderLayers, withContext } from '../../../../renderers/canvas';
-import { Color } from '../../../../utils/common';
 import { MIN_STROKE_WIDTH } from '../../../xy_chart/renderer/canvas/primitives/line';
 import {
   LinkLabelVM,
diff --git a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx
index f0c4d0e4981..00a94989dc7 100644
--- a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx
+++ b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 
+import { Colors } from '../../../../common/color';
 import { TAU } from '../../../../common/constants';
 import { PointObject } from '../../../../common/geometry';
 import { Dimensions } from '../../../../utils/dimensions';
@@ -181,7 +182,7 @@ export class HighlighterComponent extends React.Component<HighlighterProps> {
                 <mask key={maskId(index, innerIndex)} id={maskId(index, innerIndex)}>
                   <rect x={marginLeftPx} y={marginTopPx} width={innerWidth} height={innerHeight} fill="white" />
                   <g transform={`translate(${diskCenter.x}, ${diskCenter.y})`}>
-                    {renderGeometries(geometries, partitionLayout, { color: 'black' }, geometriesFoci, width)}
+                    {renderGeometries(geometries, partitionLayout, { color: Colors.Black.rgba }, geometriesFoci, width)}
                   </g>
                 </mask>
               ),
diff --git a/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts
index 3909110c2dc..2aef183b0aa 100644
--- a/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts
+++ b/packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts
@@ -8,9 +8,9 @@
 
 import { $Values as Values } from 'utility-types';
 
+import { Color } from '../../../../common/color';
 import { Pixels, PointObject, Rectangle } from '../../../../common/geometry';
 import { FontStyle } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 import { config } from '../config/config';
 import { Config } from './config_types';
 
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
index 5795c9eee95..a8ff8a3f241 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/color';
 import { Line } from '../../../../geoms/types';
 import { Scale } from '../../../../scales';
 import { isContinuousScale, isBandScale } from '../../../../scales/types';
@@ -37,7 +38,7 @@ function computeYDomainLineAnnotationDimensions(
     style,
   } = annotationSpec;
   const lineStyle = mergeWithDefaultAnnotationLine(style);
-  const color = lineStyle?.line?.stroke ?? 'red';
+  const color = lineStyle?.line?.stroke ?? Colors.Red.rgba;
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
   // let's use a default Bottom-X/Left-Y axis orientation if we are not showing an axis
   // but we are displaying a line annotation
@@ -134,7 +135,7 @@ function computeXDomainLineAnnotationDimensions(
     style,
   } = annotationSpec;
   const lineStyle = mergeWithDefaultAnnotationLine(style);
-  const color = lineStyle?.line?.stroke ?? 'red';
+  const color = lineStyle?.line?.stroke ?? Colors.Red.rgba;
 
   const lineProps: AnnotationLineProps[] = [];
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/types.ts b/packages/charts/src/chart_types/xy_chart/annotations/types.ts
index 2545acd9c0d..7c8c37fd203 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/types.ts
+++ b/packages/charts/src/chart_types/xy_chart/annotations/types.ts
@@ -8,8 +8,9 @@
 
 import { ComponentType, ReactNode } from 'react';
 
+import { Color } from '../../../common/color';
 import { TooltipPortalSettings } from '../../../components/portal';
-import { Position, Color } from '../../../utils/common';
+import { Position } from '../../../utils/common';
 import { AnnotationType, LineAnnotationDatum, RectAnnotationDatum } from '../utils/specs';
 import { AnnotationLineProps } from './line/types';
 import { AnnotationRectProps } from './rect/types';
diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts
index c55bd78a9fb..4f6b2556b3e 100644
--- a/packages/charts/src/chart_types/xy_chart/legend/legend.ts
+++ b/packages/charts/src/chart_types/xy_chart/legend/legend.ts
@@ -6,11 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { LegendItem } from '../../../common/legend';
 import { SeriesKey, SeriesIdentifier } from '../../../common/series_id';
 import { ScaleType } from '../../../scales/constants';
 import { SortSeriesByConfig, TickFormatterOptions } from '../../../specs';
-import { Color, MergeOptions, mergePartial } from '../../../utils/common';
+import { MergeOptions, mergePartial } from '../../../utils/common';
 import { BandedAccessorType } from '../../../utils/geometry';
 import { getLegendCompareFn, SeriesCompareFn } from '../../../utils/series_sort';
 import { PointStyle, Theme } from '../../../utils/themes/theme';
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
index 553bc265209..1408999a345 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { stringToRGB } from '../../../../../common/color_library_wrappers';
+import { Colors } from '../../../../../common/color';
 import { withContext } from '../../../../../renderers/canvas';
 import { Position } from '../../../../../utils/common';
 import { AxisId } from '../../../../../utils/ids';
@@ -26,8 +26,8 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y:
       renderRect(
         ctx,
         { x: chartX + panelX, y: chartY + panelY, width, height },
-        { color: stringToRGB('rgba(0,0,0,0)') },
-        { color: stringToRGB('rgb(0,0,0)'), width: 1 },
+        { color: Colors.Transparent.rgbaChannels },
+        { color: Colors.Black.rgbaChannels, width: 1 },
       ),
     ),
   );
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts
index e6d0dcb096b..d45ab8f0d95 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { stringToRGB } from '../../../../common/color_library_wrappers';
+import { Colors } from '../../../../common/color';
 import { Rect } from '../../../../geoms/types';
 import { clearCanvas, isCanvasRenderer, renderLayers, withContext } from '../../../../renderers/canvas';
 import { renderAnnotations } from './annotations';
@@ -149,8 +149,8 @@ export function renderXYChartCanvas2d(
             ctx,
             { x: left, y: top, width, height },
             0,
-            { color: stringToRGB('transparent') },
-            { color: stringToRGB('red'), width: 4, dash: [4, 4] },
+            { color: Colors.Transparent.rgbaChannels },
+            { color: Colors.Red.rgbaChannels, width: 4, dash: [4, 4] },
           );
 
           const renderer = geometriesIndex.triangulation([0, 0, width, height])?.render;
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts
index aa24f179814..9ac4312659f 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/area.ts
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../../common/color';
 import { OpacityFn, stringToRGB } from '../../../../../common/color_library_wrappers';
 import { Fill } from '../../../../../geoms/types';
-import { Color, ColorVariant, getColorFromVariant } from '../../../../../utils/common';
+import { ColorVariant, getColorFromVariant } from '../../../../../utils/common';
 import { GeometryStateStyle, AreaStyle } from '../../../../../utils/themes/theme';
 import { getTextureStyles } from '../../../utils/texture';
 
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
index 233557c272b..e928c6c69bc 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../../common/color';
 import { colorIsDark, getTextColorIfTextInvertible } from '../../../../../common/color_calcs';
 import { fillTextColor } from '../../../../../common/fill_text_color';
 import { Font, TextAlign, TextBaseline } from '../../../../../common/text_utils';
@@ -189,11 +190,11 @@ function isOverflow(rect: Rect, chartDimensions: Dimensions, chartRotation: Rota
   return rect.x < 0 || rect.x + rect.width > cWidth || rect.y < 0 || rect.y + rect.height > cHeight;
 }
 
-const DEFAULT_VALUE_COLOR = 'black';
+const DEFAULT_VALUE_COLOR = Colors.Black.rgba;
 // a little bit of alpha makes black font more readable
 const DEFAULT_VALUE_BORDER_COLOR = 'rgba(255, 255, 255, 0.8)';
-const DEFAULT_VALUE_BORDER_SOLID_COLOR = 'rgb(255, 255, 255)';
-const TRANSPARENT_COLOR = 'rgba(0,0,0,0)';
+const DEFAULT_VALUE_BORDER_SOLID_COLOR = Colors.White.rgba;
+
 type ValueFillDefinition = Theme['barSeriesStyle']['displayValue']['fill'];
 
 function getTextColors(
@@ -202,12 +203,12 @@ function getTextColors(
   borderSize: number,
 ): { fillColor: string; shadowColor: string } {
   if (typeof fillDefinition === 'string') {
-    return { fillColor: fillDefinition, shadowColor: TRANSPARENT_COLOR };
+    return { fillColor: fillDefinition, shadowColor: Colors.Transparent.rgba };
   }
   if ('color' in fillDefinition) {
     return {
       fillColor: fillDefinition.color,
-      shadowColor: fillDefinition.borderColor || TRANSPARENT_COLOR,
+      shadowColor: fillDefinition.borderColor || Colors.Transparent.rgba,
     };
   }
   const fillColor =
@@ -216,7 +217,7 @@ function getTextColors(
       fillDefinition.textInvertible,
       fillDefinition.textContrast || false,
       geometryColor,
-      'white',
+      Colors.White.rgba,
     ) || DEFAULT_VALUE_COLOR;
 
   // If the border is too wide it can overlap between a letter or another
@@ -230,8 +231,8 @@ function getTextColors(
           defaultBorderColor,
           false,
           geometryColor,
-        ) || TRANSPARENT_COLOR
-      : TRANSPARENT_COLOR;
+        ) || Colors.Transparent.rgba
+      : Colors.Transparent.rgba;
 
   return {
     fillColor,
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/area.ts b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
index 8cecfffb09e..ab5df53b1ae 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/area.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
@@ -8,8 +8,8 @@
 
 import { area } from 'd3-shape';
 
+import { Color } from '../../../common/color';
 import { Scale } from '../../../scales';
-import { Color } from '../../../utils/common';
 import { CurveType, getCurveFactory } from '../../../utils/curves';
 import { Dimensions } from '../../../utils/dimensions';
 import { AreaGeometry } from '../../../utils/geometry';
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
index 7e975256a1c..aeca1647315 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { Scale } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { TextMeasure, withTextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator';
-import { clamp, Color, isNil, mergePartial } from '../../../utils/common';
+import { clamp, isNil, mergePartial } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { BandedAccessorType, BarGeometry } from '../../../utils/geometry';
 import { BarSeriesStyle, DisplayValueStyle } from '../../../utils/themes/theme';
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
index 7141a3bd194..0b05580653a 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { Scale } from '../../../scales';
-import { Color } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { BubbleGeometry } from '../../../utils/geometry';
 import { BubbleSeriesStyle } from '../../../utils/themes/theme';
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/line.ts b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
index ce669e1bb62..0c24c0c31f3 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/line.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
@@ -8,8 +8,8 @@
 
 import { line } from 'd3-shape';
 
+import { Color } from '../../../common/color';
 import { Scale } from '../../../scales';
-import { Color } from '../../../utils/common';
 import { CurveType, getCurveFactory } from '../../../utils/curves';
 import { Dimensions } from '../../../utils/dimensions';
 import { LineGeometry } from '../../../utils/geometry';
diff --git a/packages/charts/src/chart_types/xy_chart/rendering/points.ts b/packages/charts/src/chart_types/xy_chart/rendering/points.ts
index 78784f85912..cd4f669f03b 100644
--- a/packages/charts/src/chart_types/xy_chart/rendering/points.ts
+++ b/packages/charts/src/chart_types/xy_chart/rendering/points.ts
@@ -6,8 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { Scale } from '../../../scales';
-import { Color, isNil } from '../../../utils/common';
+import { isNil } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { BandedAccessorType, PointGeometry } from '../../../utils/geometry';
 import { PointStyle } from '../../../utils/themes/theme';
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts
index b9ff9cf209a..0d7a25721ce 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_series_color_map.ts
@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { SeriesKey } from '../../../../common/series_id';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
-import { Color } from '../../../../utils/common';
 import { getSeriesColors } from '../../utils/series';
 import { getCustomSeriesColors } from '../utils/utils';
 import { computeSeriesDomainsSelector } from './compute_series_domains';
diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
index 8446af591f2..f7b10de02ff 100644
--- a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
@@ -6,12 +6,13 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { getPredicateFn, Predicate } from '../../../../common/predicate';
 import { SeriesKey, SeriesIdentifier } from '../../../../common/series_id';
 import { Scale } from '../../../../scales';
 import { SortSeriesByConfig } from '../../../../specs';
 import { OrderBy } from '../../../../specs/settings';
-import { mergePartial, Rotation, Color, isUniqueArray } from '../../../../utils/common';
+import { mergePartial, Rotation, isUniqueArray } from '../../../../utils/common';
 import { CurveType } from '../../../../utils/curves';
 import { Dimensions, Size } from '../../../../utils/dimensions';
 import {
diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.ts b/packages/charts/src/chart_types/xy_chart/utils/series.ts
index 565a557f2c3..6bb76934d2a 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/series.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/series.ts
@@ -6,13 +6,14 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { SeriesIdentifier, SeriesKey } from '../../../common/series_id';
 import { ScaleType } from '../../../scales/constants';
 import { BinAgg, Direction, XScaleType } from '../../../specs';
 import { OrderBy } from '../../../specs/settings';
 import { ColorOverrides } from '../../../state/chart_state';
 import { Accessor, AccessorFn, getAccessorValue } from '../../../utils/accessor';
-import { Color, Datum, isNil } from '../../../utils/common';
+import { Datum, isNil } from '../../../utils/common';
 import { GroupId } from '../../../utils/ids';
 import { Logger } from '../../../utils/logger';
 import { ColorConfig } from '../../../utils/themes/theme';
diff --git a/packages/charts/src/chart_types/xy_chart/utils/specs.ts b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
index dc5a27a4910..3d83bb658af 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/specs.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
@@ -10,6 +10,7 @@ import { ReactNode } from 'react';
 import { $Values } from 'utility-types';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/color';
 import { TooltipPortalSettings } from '../../../components/portal/types';
 import { ScaleContinuousType } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
@@ -17,7 +18,7 @@ import { LogScaleOptions } from '../../../scales/scale_continuous';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { Accessor, AccessorFormat, AccessorFn } from '../../../utils/accessor';
-import { RecursivePartial, Color, Position, Datum } from '../../../utils/common';
+import { RecursivePartial, Position, Datum } from '../../../utils/common';
 import { CurveType } from '../../../utils/curves';
 import { OrdinalDomain } from '../../../utils/domain';
 import { AxisId, GroupId } from '../../../utils/ids';
diff --git a/packages/charts/src/chart_types/xy_chart/utils/texture.ts b/packages/charts/src/chart_types/xy_chart/utils/texture.ts
index 11eaf14dd51..9a6ab06e14d 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/texture.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/texture.ts
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../common/color';
 import { OpacityFn } from '../../../common/color_library_wrappers';
 import { Texture } from '../../../geoms/types';
-import { Color, ColorVariant, degToRad, getColorFromVariant } from '../../../utils/common';
+import { ColorVariant, degToRad, getColorFromVariant } from '../../../utils/common';
 import { Point } from '../../../utils/point';
 import { TexturedStyles, TextureShape } from '../../../utils/themes/theme';
 import { TextureRendererFn } from '../renderer/shapes_paths';
diff --git a/packages/charts/src/common/color.ts b/packages/charts/src/common/color.ts
new file mode 100644
index 00000000000..0c7709f7d72
--- /dev/null
+++ b/packages/charts/src/common/color.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { RgbObject } from './color_library_wrappers';
+
+/** @public */
+export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string
+
+/** @internal */
+export const Colors: Record<string, { rgba: Color; rgbaChannels: RgbObject }> = {
+  Red: {
+    rgba: 'rgba(255, 0, 0, 1)',
+    rgbaChannels: { r: 255, g: 0, b: 0, opacity: 1 },
+  },
+  White: {
+    rgba: 'rgba(255, 255, 255, 1)',
+    rgbaChannels: { r: 255, g: 255, b: 255, opacity: 1 },
+  },
+  Black: {
+    rgba: 'rgba(0, 0, 0, 1)',
+    rgbaChannels: { r: 0, g: 0, b: 0, opacity: 1 },
+  },
+  Transparent: {
+    rgba: 'rgba(0, 0, 0, 0)',
+    rgbaChannels: { r: 0, g: 0, b: 0, opacity: 0 },
+  },
+};
diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts
index a4253af754a..b9b05b60979 100644
--- a/packages/charts/src/common/color_calcs.test.ts
+++ b/packages/charts/src/common/color_calcs.test.ts
@@ -7,51 +7,40 @@
  */
 
 import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb';
+import { Colors } from './color';
 import { makeHighContrastColor, combineColors } from './color_calcs';
 
 describe('calcs', () => {
   describe('test makeHighContrastColor', () => {
     it('hex input - should change white text to black when background is white', () => {
-      const expected = '#000';
-      const result = makeHighContrastColor('#fff', '#fff');
-      expect(result).toBe(expected);
+      expect(makeHighContrastColor('#fff', '#fff')).toBe(Colors.Black.rgba);
     });
     it('rgb input - should change white text to black when background is white', () => {
-      const expected = '#000';
-      const result = makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)');
-      expect(result).toBe(expected);
+      expect(makeHighContrastColor('rgb(255, 255, 255)', 'rgb(255, 255, 255)')).toBe(Colors.Black.rgba);
     });
     it('rgba input - should change white text to black when background is white', () => {
-      const expected = '#000';
-      const result = makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)');
-      expect(result).toBe(expected);
+      expect(makeHighContrastColor('rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)')).toBe(Colors.Black.rgba);
     });
     it('word input - should change white text to black when background is white', () => {
-      const expected = '#000';
-      const result = makeHighContrastColor('white', 'white');
-      expect(result).toBe(expected);
+      expect(makeHighContrastColor(Colors.White.rgba, Colors.White.rgba)).toBe(Colors.Black.rgba);
     });
     // test contrast computation
     it('should provide at least 4.5 contrast', () => {
-      const foreground = '#fff'; // white
+      const foreground = Colors.White.rgba;
       const background = 'rgba(255, 255, 51, 0.3)'; // light yellow
-      const result = '#000'; // black
-      expect(result).toBe(makeHighContrastColor(foreground, background));
+      expect(makeHighContrastColor(foreground, background)).toBe(Colors.Black.rgba);
     });
     it('should use black text for hex value', () => {
-      const foreground = '#fff'; // white
+      const foreground = Colors.White.rgba;
       const background = '#7874B2'; // Thailand color
-      const result = '#000'; // black
-      expect(result).toBe(makeHighContrastColor(foreground, background));
+      expect(makeHighContrastColor(foreground, background)).toBe(Colors.Black.rgba);
     });
     it('should switch to black text if background color is in rgba() format - Thailand', () => {
-      const containerBackground = 'white';
+      const containerBackground = Colors.White.rgba;
       const background = 'rgba(120, 116, 178, 0.7)';
       const resultForCombined = 'rgba(161, 158, 201, 1)'; // 0.3 'rgba(215, 213, 232, 1)'; // 0.5 - 'rgba(188, 186, 217, 1)'; //0.7 - ;
       expect(combineColors(background, containerBackground)).toBe(resultForCombined);
-      const foreground = 'white';
-      const resultForContrastedText = '#000'; // switches to black text
-      expect(makeHighContrastColor(foreground, resultForCombined)).toBe(resultForContrastedText);
+      expect(makeHighContrastColor(Colors.White.rgba, resultForCombined)).toBe(Colors.Black.rgba);
     });
   });
   describe('test the combineColors function', () => {
diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts
index 363f3b23bea..2df1ff6fef4 100644
--- a/packages/charts/src/common/color_calcs.ts
+++ b/packages/charts/src/common/color_calcs.ts
@@ -8,7 +8,7 @@
 
 import chroma from 'chroma-js';
 
-import { Color } from '../utils/common';
+import { Color, Colors } from './color';
 import { RgbaTuple, RGBATupleToString, RgbTuple, stringToRGB } from './color_library_wrappers';
 import { Ratio } from './geometry';
 import { TextContrast } from './text_utils';
@@ -64,7 +64,7 @@ export function combineColors(foregroundColor: Color, backgroundColor: Color): C
   const combinedAlpha = alpha1 + alpha2 * (1 - alpha1);
 
   if (combinedAlpha === 0) {
-    return 'rgba(0,0,0,0)';
+    return Colors.Transparent.rgba;
   }
 
   const combinedRed = Math.round((red1 * alpha1 + red2 * alpha2 * (1 - alpha1)) / combinedAlpha);
@@ -102,10 +102,10 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
   let highContrastTextColor = foreground;
   const isBackgroundDark = colorIsDark(background);
   // determine whether white or black text is ideal contrast vs a grey that just passes the ratio
-  if (isBackgroundDark && chroma.deltaE('black', foreground) === 0) {
-    highContrastTextColor = '#fff';
-  } else if (lightness > 0.5 && chroma.deltaE('white', foreground) === 0) {
-    highContrastTextColor = '#000';
+  if (isBackgroundDark && chroma.deltaE(Colors.Black.rgba, foreground) === 0) {
+    highContrastTextColor = Colors.White.rgba;
+  } else if (lightness > 0.5 && chroma.deltaE(Colors.White.rgba, foreground) === 0) {
+    highContrastTextColor = Colors.Black.rgba;
   }
   const precision = 1e8;
   let contrast = getContrast(highContrastTextColor, background);
@@ -176,7 +176,7 @@ export function getTextColorIfTextInvertible(
         : makeHighContrastColor(`rgba(${255 - tr}, ${255 - tg}, ${255 - tb}, ${to})`, backgroundColor, textContrast)
       : makeHighContrastColor(textColor, backgroundColor, textContrast);
   }
-  return 'black'; // this should never happen; added it as previously function return type included undefined; todo
+  return Colors.Black.rgba; // this should never happen; added it as previously function return type included undefined; todo
 }
 
 /**
@@ -189,7 +189,7 @@ export function getOnPaperColorSet(textColor: Color, sectorLineStroke: Color, co
   // determine the ideal contrast color for the link labels
   const validBackgroundColor = isColorValid(containerBackgroundColor)
     ? containerBackgroundColor
-    : 'rgba(255, 255, 255, 0)';
+    : Colors.Transparent.rgba;
   const contrastTextColor = containerBackgroundColor
     ? makeHighContrastColor(textColor, validBackgroundColor)
     : textColor;
diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts
index 38eae172171..000c3d65d78 100644
--- a/packages/charts/src/common/color_library_wrappers.ts
+++ b/packages/charts/src/common/color_library_wrappers.ts
@@ -9,12 +9,14 @@
 import chroma from 'chroma-js';
 import { rgb as d3Rgb, RGBColor as D3RGBColor } from 'd3-color';
 
-import { Color } from '../utils/common';
+import { Color, Colors } from './color';
 
 type RGB = number;
 type A = number;
+
 /** @internal */
 export type RgbTuple = [RGB, RGB, RGB, RGB?];
+
 /** @public */
 export type RgbObject = { r: RGB; g: RGB; b: RGB; opacity: A };
 
@@ -22,11 +24,12 @@ export type RgbObject = { r: RGB; g: RGB; b: RGB; opacity: A };
 export type RgbaTuple = [RGB, RGB, RGB, RGB];
 
 /** @internal */
-export const defaultColor: RgbObject = { r: 255, g: 0, b: 0, opacity: 1 };
-/** @internal */
-export const transparentColor: RgbObject = { r: 0, g: 0, b: 0, opacity: 0 };
-/** @internal */
-export const defaultD3Color: D3RGBColor = d3Rgb(defaultColor.r, defaultColor.g, defaultColor.b, defaultColor.opacity);
+export const defaultD3Color: D3RGBColor = d3Rgb(
+  Colors.Red.rgbaChannels.r,
+  Colors.Red.rgbaChannels.g,
+  Colors.Red.rgbaChannels.b,
+  Colors.Red.rgbaChannels.opacity,
+);
 
 /** @internal */
 export type OpacityFn = (opacity: number, seriesOpacity?: number) => number;
@@ -34,7 +37,7 @@ export type OpacityFn = (opacity: number, seriesOpacity?: number) => number;
 /** @internal */
 export function stringToRGB(cssColorSpecifier?: string, opacity?: number | OpacityFn): RgbObject {
   if (cssColorSpecifier === 'transparent') {
-    return transparentColor;
+    return Colors.Transparent.rgbaChannels;
   }
   const color = getColor(cssColorSpecifier);
 
@@ -62,7 +65,7 @@ export function stringToRGB(cssColorSpecifier?: string, opacity?: number | Opaci
  * @param cssColorSpecifier
  */
 function getColor(cssColorSpecifier: string = ''): RgbObject {
-  if (!chroma.valid(cssColorSpecifier)) return defaultColor;
+  if (!chroma.valid(cssColorSpecifier)) return Colors.Red.rgbaChannels;
 
   const chromaColor = chroma(cssColorSpecifier);
   const color: D3RGBColor = {
@@ -70,7 +73,7 @@ function getColor(cssColorSpecifier: string = ''): RgbObject {
     opacity: chromaColor.alpha(),
   };
 
-  return validateColor(color) ?? defaultColor;
+  return validateColor(color) ?? Colors.Red.rgbaChannels;
 }
 
 /** @internal */
diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts
index 8b226ae94ea..b2405037bc0 100644
--- a/packages/charts/src/common/fill_text_color.ts
+++ b/packages/charts/src/common/fill_text_color.ts
@@ -8,8 +8,8 @@
 
 import chroma from 'chroma-js';
 
-import { Color } from '../utils/common';
 import { Logger } from '../utils/logger';
+import { Color, Colors } from './color';
 import {
   colorIsDark,
   combineColors,
@@ -50,7 +50,7 @@ export function fillTextColor(
       colorIsDark(textColor),
       textColor,
       false,
-      'white', // never used
+      Colors.White.rgba, // never used
     );
   }
 
diff --git a/packages/charts/src/common/legend.ts b/packages/charts/src/common/legend.ts
index ccf069eaed1..46e7cbfd0ca 100644
--- a/packages/charts/src/common/legend.ts
+++ b/packages/charts/src/common/legend.ts
@@ -9,9 +9,9 @@
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { SeriesType } from '../specs';
 import { LegendPath } from '../state/actions/legend';
-import { Color } from '../utils/common';
 import { PointStyle } from '../utils/themes/theme';
 import { CategoryKey, CategoryLabel } from './category';
+import { Color } from './color';
 import { SeriesIdentifier } from './series_id';
 
 /** @internal */
diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
index fed2b24d8ef..d31388f2f00 100644
--- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Chart should render the legend name test 1`] = `
   <Provider store={{...}}>
     <div className=\\"echChart\\" style={{...}}>
       <Connect(ChartBackground)>
-        <ChartBackground backgroundColor=\\"transparent\\" dispatch={[Function: dispatch]}>
+        <ChartBackground backgroundColor=\\"rgba(0, 0, 0, 0)\\" dispatch={[Function: dispatch]}>
           <div className=\\"echChartBackground\\" style={{...}} />
         </ChartBackground>
       </Connect(ChartBackground)>
@@ -96,7 +96,7 @@ exports[`Chart should render the legend name test 1`] = `
                   </XYChart>
                 </Connect(XYChart)>
                 <Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>
-                  <Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"transparent\\" onPointerMove={[Function (anonymous)]} />
+                  <Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"rgba(0, 0, 0, 0)\\" onPointerMove={[Function (anonymous)]} />
                 </Connect(Tooltip)>
                 <Connect(Annotations) getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}}>
                   <Annotations getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}} isChartEmpty={false} chartDimensions={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId=\\"chart1\\" zIndex={0} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]}>
diff --git a/packages/charts/src/components/brush/brush.tsx b/packages/charts/src/components/brush/brush.tsx
index 84cd9011fd9..1eabbd73c6a 100644
--- a/packages/charts/src/components/brush/brush.tsx
+++ b/packages/charts/src/components/brush/brush.tsx
@@ -10,7 +10,8 @@ import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 
 import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect';
-import { RgbObject, stringToRGB } from '../../common/color_library_wrappers';
+import { Colors } from '../../common/color';
+import { RgbObject } from '../../common/color_library_wrappers';
 import { clearCanvas, withContext, withClip } from '../../renderers/canvas';
 import { GlobalChartState } from '../../state/chart_state';
 import { getInternalBrushAreaSelector } from '../../state/selectors/get_internal_brush_area';
@@ -124,7 +125,7 @@ class BrushToolComponent extends React.Component<Props> {
             ctx,
             { x: left, y: top, width, height },
             { color: fillColor ?? DEFAULT_FILL_COLOR },
-            { width: 0, color: stringToRGB('transparent') },
+            { width: 0, color: Colors.Transparent.rgbaChannels },
           );
         },
       );
diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx
index 9c92fbc8540..71754fcba75 100644
--- a/packages/charts/src/components/chart.tsx
+++ b/packages/charts/src/components/chart.tsx
@@ -12,6 +12,7 @@ import { Provider } from 'react-redux';
 import { createStore, Store, Unsubscribe, StoreEnhancer, applyMiddleware, Middleware } from 'redux';
 import uuid from 'uuid';
 
+import { Colors } from '../common/color';
 import { LegendPositionConfig, PointerEvent } from '../specs';
 import { SpecsParser } from '../specs/specs_parser';
 import { onExternalPointerEvent } from '../state/actions/events';
@@ -118,7 +119,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
   getPNGSnapshot(
     // eslint-disable-next-line unicorn/no-object-as-default-parameter
     options = {
-      backgroundColor: 'transparent',
+      backgroundColor: Colors.Transparent.rgba,
       pixelRatio: 2,
     },
   ): {
diff --git a/packages/charts/src/components/chart_background.tsx b/packages/charts/src/components/chart_background.tsx
index f6a58a4b41e..dc71e68618c 100644
--- a/packages/charts/src/components/chart_background.tsx
+++ b/packages/charts/src/components/chart_background.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { Colors } from '../common/color';
 import { GlobalChartState } from '../state/chart_state';
 import { getChartThemeSelector } from '../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized';
@@ -30,7 +31,7 @@ export class ChartBackgroundComponent extends React.Component<ChartBackgroundPro
 const mapStateToProps = (state: GlobalChartState): ChartBackgroundProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return {
-      backgroundColor: 'transparent',
+      backgroundColor: Colors.Transparent.rgba,
     };
   }
   return {
diff --git a/packages/charts/src/components/legend/legend_icon.tsx b/packages/charts/src/components/legend/legend_icon.tsx
index 680f5e833d3..cb4c2b9ebd6 100644
--- a/packages/charts/src/components/legend/legend_icon.tsx
+++ b/packages/charts/src/components/legend/legend_icon.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 
 import { ShapeRendererFn } from '../../chart_types/xy_chart/renderer/shapes_paths';
-import { Color } from '../../utils/common';
+import { Color } from '../../common/color';
 import { PointShape, PointStyle } from '../../utils/themes/theme';
 
 interface LegendIconProps {
diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx
index 5c5723a5baf..4bb0c32e138 100644
--- a/packages/charts/src/components/legend/legend_item.tsx
+++ b/packages/charts/src/components/legend/legend_item.tsx
@@ -9,6 +9,7 @@
 import classNames from 'classnames';
 import React, { Component, createRef, MouseEventHandler } from 'react';
 
+import { Color } from '../../common/color';
 import { LegendItem, LegendItemExtraValues } from '../../common/legend';
 import { SeriesIdentifier } from '../../common/series_id';
 import {
@@ -28,7 +29,7 @@ import {
   onLegendItemOverAction,
   onToggleDeselectSeriesAction,
 } from '../../state/actions/legend';
-import { Color, LayoutDirection } from '../../utils/common';
+import { LayoutDirection } from '../../utils/common';
 import { deepEqual } from '../../utils/fast_deep_equal';
 import { LegendLabelOptions } from '../../utils/themes/theme';
 import { Color as ItemColor } from './color';
diff --git a/packages/charts/src/components/tooltip/tooltip.tsx b/packages/charts/src/components/tooltip/tooltip.tsx
index 30234a52221..420c6f979e4 100644
--- a/packages/charts/src/components/tooltip/tooltip.tsx
+++ b/packages/charts/src/components/tooltip/tooltip.tsx
@@ -12,6 +12,7 @@ import React, { memo, useCallback, useMemo, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { Colors } from '../../common/color';
 import { isColorValid } from '../../common/color_calcs';
 import { TooltipValueFormatter, TooltipSettings, TooltipValue } from '../../specs';
 import { onPointerMove as onPointerMoveAction } from '../../state/actions/mouse';
@@ -113,7 +114,8 @@ const TooltipComponent = ({
           const classes = classNames('echTooltip__item', {
             echTooltip__rowHighlighted: isHighlighted,
           });
-          const adjustedBGColor = isColorValid(color) && chroma(color).alpha() === 0 ? 'transparent' : backgroundColor;
+          const adjustedBGColor =
+            isColorValid(color) && chroma(color).alpha() === 0 ? Colors.Transparent.rgba : backgroundColor;
 
           return (
             <div
@@ -209,7 +211,7 @@ const HIDDEN_TOOLTIP_PROPS = {
   settings: {},
   rotation: 0 as Rotation,
   chartId: '',
-  backgroundColor: 'transparent',
+  backgroundColor: Colors.Transparent.rgba,
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): TooltipDispatchProps =>
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
index e8284900767..08f67e61a2e 100644
--- a/packages/charts/src/index.ts
+++ b/packages/charts/src/index.ts
@@ -18,7 +18,7 @@ export { DebugState } from './state/types';
 export { toEntries } from './utils/common';
 export { CurveType } from './utils/curves';
 export { ContinuousDomain, OrdinalDomain } from './utils/domain';
-export { SimplePadding, Padding } from './utils/dimensions';
+export { Margins, SimplePadding, Padding, PerSideDistance } from './utils/dimensions';
 export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters';
 export { SeriesIdentifier, SeriesKey } from './common/series_id';
 export { XYChartSeriesIdentifier, DataSeriesDatum, FilledValues } from './chart_types/xy_chart/utils/series';
@@ -34,6 +34,8 @@ export {
   Config as PartitionConfig,
   FillLabelConfig as PartitionFillLabel,
   PartitionLayout,
+  AnimKeyframe,
+  EasingFunction,
 } from './chart_types/partition_chart/layout/types/config_types';
 export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index';
 export * from './chart_types/goal_chart/specs/index';
@@ -81,7 +83,6 @@ export {
   IsAny,
   IsUnknown,
   ColorVariant,
-  Color,
   LabelAccessor,
   ShowAccessor,
   ValueAccessor,
@@ -92,6 +93,7 @@ export { DataGenerator } from './utils/data_generators/data_generator';
 export * from './utils/themes/merge_utils';
 export { MODEL_KEY } from './chart_types/partition_chart/layout/config';
 export { LegendStrategy } from './chart_types/partition_chart/layout/utils/highlighted_geoms';
-export { Ratio } from './common/geometry';
+export { Ratio, TimeMs } from './common/geometry';
 export { AdditiveNumber } from './utils/accessor';
 export { FontStyle, FONT_STYLES } from './common/text_utils';
+export { Color } from './common/color';
diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx
index 3be5b78c25b..1c07aa9229e 100644
--- a/packages/charts/src/specs/settings.tsx
+++ b/packages/charts/src/specs/settings.tsx
@@ -14,6 +14,7 @@ import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/grou
 import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms';
 import { WordModel } from '../chart_types/wordcloud/layout/types/viewmodel_types';
 import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series';
+import { Color } from '../common/color';
 import { SeriesIdentifier } from '../common/series_id';
 import { TooltipPortalSettings } from '../components';
 import { CustomTooltip } from '../components/tooltip/types';
@@ -22,7 +23,6 @@ import { LegendPath } from '../state/actions/legend';
 import { getConnect, specComponentFactory } from '../state/spec_factory';
 import { Accessor } from '../utils/accessor';
 import {
-  Color,
   HorizontalAlignment,
   LayoutDirection,
   Position,
diff --git a/packages/charts/src/state/actions/colors.ts b/packages/charts/src/state/actions/colors.ts
index da1ade0004d..fb1c24e3afd 100644
--- a/packages/charts/src/state/actions/colors.ts
+++ b/packages/charts/src/state/actions/colors.ts
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../common/color';
 import { SeriesKey } from '../../common/series_id';
-import { Color } from '../../utils/common';
 
 /** @internal */
 export const CLEAR_TEMPORARY_COLORS = 'CLEAR_TEMPORARY_COLORS';
diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts
index 07f59b7a010..a7020b1c5f3 100644
--- a/packages/charts/src/state/chart_state.ts
+++ b/packages/charts/src/state/chart_state.ts
@@ -15,12 +15,13 @@ import { PartitionState } from '../chart_types/partition_chart/state/chart_state
 import { WordcloudState } from '../chart_types/wordcloud/state/chart_state';
 import { XYAxisChartState } from '../chart_types/xy_chart/state/chart_state';
 import { CategoryKey } from '../common/category';
+import { Color } from '../common/color';
 import { LegendItem, LegendItemExtraValues } from '../common/legend';
 import { SeriesIdentifier, SeriesKey } from '../common/series_id';
 import { AnchorPosition } from '../components/portal/types';
 import { TooltipInfo } from '../components/tooltip/types';
 import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec } from '../specs';
-import { Color, keepDistinct } from '../utils/common';
+import { keepDistinct } from '../utils/common';
 import { Dimensions } from '../utils/dimensions';
 import { Logger } from '../utils/logger';
 import { Point } from '../utils/point';
diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts
index 4efd01e9d24..32d13bbb858 100644
--- a/packages/charts/src/utils/common.test.ts
+++ b/packages/charts/src/utils/common.test.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../common/color';
 import {
   clamp,
   compareByValueAsc,
@@ -1016,7 +1017,7 @@ describe('common utilities', () => {
     });
 
     it('should return transparent if ColorVariant is None', () => {
-      expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe('transparent');
+      expect(getColorFromVariant(seriesColor, ColorVariant.None)).toBe(Colors.Transparent.rgba);
     });
 
     it('should return color if Color is passed', () => {
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx
index 3802c8de7b7..5d1943f47db 100644
--- a/packages/charts/src/utils/common.tsx
+++ b/packages/charts/src/utils/common.tsx
@@ -11,6 +11,7 @@ import { $Values, isPrimitive } from 'utility-types';
 import { v1 as uuidV1 } from 'uuid';
 
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
+import { Color, Colors } from '../common/color';
 import { Degrees, Radian } from '../common/geometry';
 import { AdditiveNumber } from './accessor';
 import { Point } from './point';
@@ -121,8 +122,6 @@ export type Rotation = 0 | 90 | -90 | 180;
 /** @public */
 export type Rendering = 'canvas' | 'svg';
 /** @public */
-export type Color = string; // todo static/runtime type it this for proper color string content; several places in the code, and ultimate use, dictate it not be an empty string
-/** @public */
 export type StrokeStyle = Color; // now narrower than string | CanvasGradient | CanvasPattern
 
 /** @internal */
@@ -151,7 +150,7 @@ export function getColorFromVariant(seriesColor: Color, color?: Color | ColorVar
   }
 
   if (color === ColorVariant.None) {
-    return 'transparent';
+    return Colors.Transparent.rgba;
   }
 
   return color || seriesColor;
diff --git a/packages/charts/src/utils/dimensions.ts b/packages/charts/src/utils/dimensions.ts
index 22c5d51091c..e58d06975bd 100644
--- a/packages/charts/src/utils/dimensions.ts
+++ b/packages/charts/src/utils/dimensions.ts
@@ -32,7 +32,7 @@ export interface PerSideDistance {
 }
 
 /**
- * fixme consider deactivating @typescript-eslint/no-empty-interface
+ * fixme consider deactivating \@typescript-eslint/no-empty-interface
  * see https://github.com/elastic/elastic-charts/pull/660#discussion_r419474171
  * @public
  */
diff --git a/packages/charts/src/utils/geometry.ts b/packages/charts/src/utils/geometry.ts
index f9382ff8be1..ecddeaf86fa 100644
--- a/packages/charts/src/utils/geometry.ts
+++ b/packages/charts/src/utils/geometry.ts
@@ -10,8 +10,8 @@ import { $Values } from 'utility-types';
 
 import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series';
 import { LabelOverflowConstraint } from '../chart_types/xy_chart/utils/specs';
+import { Color } from '../common/color';
 import { Fill, Stroke } from '../geoms/types';
-import { Color } from './common';
 import { Dimensions } from './dimensions';
 import { BarSeriesStyle, PointStyle, AreaStyle, LineStyle, PointShape } from './themes/theme';
 
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 3659ae33045..ee14d5a580e 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../common/color';
 import { palettes } from './colors';
 import { Theme } from './theme';
 import {
@@ -28,7 +29,7 @@ export const DARK_THEME: Theme = {
     point: {
       visible: true,
       strokeWidth: 1,
-      fill: 'black',
+      fill: Colors.Black.rgba,
       radius: 2,
       opacity: 1,
     },
@@ -37,7 +38,7 @@ export const DARK_THEME: Theme = {
     point: {
       visible: true,
       strokeWidth: 1,
-      fill: 'black',
+      fill: Colors.Black.rgba,
       radius: 2,
       opacity: 1,
     },
@@ -54,7 +55,7 @@ export const DARK_THEME: Theme = {
     },
     point: {
       visible: false,
-      fill: 'black',
+      fill: Colors.Black.rgba,
       strokeWidth: 0.5,
       radius: 1,
       opacity: 1,
@@ -81,7 +82,7 @@ export const DARK_THEME: Theme = {
   arcSeriesStyle: {
     arc: {
       visible: true,
-      stroke: 'white',
+      stroke: Colors.White.rgba,
       strokeWidth: 1,
       opacity: 1,
     },
@@ -190,7 +191,7 @@ export const DARK_THEME: Theme = {
     },
   },
   background: {
-    color: 'transparent',
+    color: Colors.Transparent.rgba,
   },
   goal: {
     minFontSize: 8,
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index 6cb327139e3..435409eb038 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../common/color';
 import { palettes } from './colors';
 import { Theme } from './theme';
 import {
@@ -28,7 +29,7 @@ export const LIGHT_THEME: Theme = {
     point: {
       visible: true,
       strokeWidth: 1,
-      fill: 'white',
+      fill: Colors.White.rgba,
       radius: 2,
       opacity: 1,
     },
@@ -37,7 +38,7 @@ export const LIGHT_THEME: Theme = {
     point: {
       visible: true,
       strokeWidth: 1,
-      fill: 'white',
+      fill: Colors.White.rgba,
       radius: 2,
       opacity: 1,
     },
@@ -55,7 +56,7 @@ export const LIGHT_THEME: Theme = {
     point: {
       visible: false,
       strokeWidth: 1,
-      fill: 'white',
+      fill: Colors.White.rgba,
       radius: 2,
       opacity: 1,
     },
@@ -81,7 +82,7 @@ export const LIGHT_THEME: Theme = {
   arcSeriesStyle: {
     arc: {
       visible: true,
-      stroke: 'black',
+      stroke: Colors.Black.rgba,
       strokeWidth: 1,
       opacity: 1,
     },
@@ -190,7 +191,7 @@ export const LIGHT_THEME: Theme = {
     },
   },
   background: {
-    color: 'transparent',
+    color: Colors.Transparent.rgba,
   },
   goal: {
     minFontSize: 8,
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index f1224c08d4b..f5afae1d951 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -8,9 +8,10 @@
 
 import { $Values } from 'utility-types';
 
+import { Color } from '../../common/color';
 import { Pixels, Ratio } from '../../common/geometry';
 import { FontStyle } from '../../common/text_utils';
-import { Color, ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common';
+import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common';
 import { Margins, SimplePadding } from '../dimensions';
 import { Point } from '../point';
 
diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts
index 460b1ccc0aa..ca88d9a46c3 100644
--- a/packages/charts/src/utils/themes/theme_common.ts
+++ b/packages/charts/src/utils/themes/theme_common.ts
@@ -6,20 +6,21 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../common/color';
 import { Margins } from '../dimensions';
 import { SharedGeometryStateStyle } from './theme';
 
-/** @public */
-export const DEFAULT_MISSING_COLOR = 'red';
+/** @internal */
+export const DEFAULT_MISSING_COLOR = Colors.Red.rgba;
 
-/** @public */
+/** @internal */
 export const DEFAULT_CHART_PADDING: Margins = {
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
 };
-/** @public */
+/** @internal */
 export const DEFAULT_CHART_MARGINS: Margins = {
   left: 10,
   right: 10,
@@ -27,7 +28,7 @@ export const DEFAULT_CHART_MARGINS: Margins = {
   bottom: 10,
 };
 
-/** @public */
+/** @internal */
 export const DEFAULT_GEOMETRY_STYLES: SharedGeometryStateStyle = {
   default: {
     opacity: 1,
diff --git a/storybook/stories/goal/10_band_in_band.tsx b/storybook/stories/goal/10_band_in_band.tsx
index 2a98c018850..53acc5bd334 100644
--- a/storybook/stories/goal/10_band_in_band.tsx
+++ b/storybook/stories/goal/10_band_in_band.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/11_gaps.tsx b/storybook/stories/goal/11_gaps.tsx
index 382bd08c13b..d6abe23e422 100644
--- a/storybook/stories/goal/11_gaps.tsx
+++ b/storybook/stories/goal/11_gaps.tsx
@@ -9,10 +9,9 @@
 import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/12_range.tsx b/storybook/stories/goal/12_range.tsx
index 4835c1b7400..741670184d6 100644
--- a/storybook/stories/goal/12_range.tsx
+++ b/storybook/stories/goal/12_range.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/13_confidence_level.tsx b/storybook/stories/goal/13_confidence_level.tsx
index 88dc08d33d3..b3b73c935fa 100644
--- a/storybook/stories/goal/13_confidence_level.tsx
+++ b/storybook/stories/goal/13_confidence_level.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/14_one_third.tsx b/storybook/stories/goal/14_one_third.tsx
index 25e9005bd09..926cab9d8b4 100644
--- a/storybook/stories/goal/14_one_third.tsx
+++ b/storybook/stories/goal/14_one_third.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/15_half_circle.tsx b/storybook/stories/goal/15_half_circle.tsx
index 499cfbe8ea4..9349daa2f19 100644
--- a/storybook/stories/goal/15_half_circle.tsx
+++ b/storybook/stories/goal/15_half_circle.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/16_two_thirds.tsx b/storybook/stories/goal/16_two_thirds.tsx
index fda193d6c9f..94f9d4863f5 100644
--- a/storybook/stories/goal/16_two_thirds.tsx
+++ b/storybook/stories/goal/16_two_thirds.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/17_three_quarters.tsx b/storybook/stories/goal/17_three_quarters.tsx
index 461f433c08b..51e4acf4196 100644
--- a/storybook/stories/goal/17_three_quarters.tsx
+++ b/storybook/stories/goal/17_three_quarters.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/17_total_circle.tsx b/storybook/stories/goal/17_total_circle.tsx
index 4875d002369..0d621f3871a 100644
--- a/storybook/stories/goal/17_total_circle.tsx
+++ b/storybook/stories/goal/17_total_circle.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/17_very_small_gap.tsx b/storybook/stories/goal/17_very_small_gap.tsx
index 614e74cce0d..9b84fe491a9 100644
--- a/storybook/stories/goal/17_very_small_gap.tsx
+++ b/storybook/stories/goal/17_very_small_gap.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/19_horizontal_negative.tsx b/storybook/stories/goal/19_horizontal_negative.tsx
index f9b727366d9..1d892bc3f99 100644
--- a/storybook/stories/goal/19_horizontal_negative.tsx
+++ b/storybook/stories/goal/19_horizontal_negative.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/20_vertical_negative.tsx b/storybook/stories/goal/20_vertical_negative.tsx
index a54c266e5b1..3b95d1c441e 100644
--- a/storybook/stories/goal/20_vertical_negative.tsx
+++ b/storybook/stories/goal/20_vertical_negative.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/21_goal_negative.tsx b/storybook/stories/goal/21_goal_negative.tsx
index f8d77218cc8..03cb914e772 100644
--- a/storybook/stories/goal/21_goal_negative.tsx
+++ b/storybook/stories/goal/21_goal_negative.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/22_horizontal_plusminus.tsx b/storybook/stories/goal/22_horizontal_plusminus.tsx
index 8d8307f1848..05a8596140b 100644
--- a/storybook/stories/goal/22_horizontal_plusminus.tsx
+++ b/storybook/stories/goal/22_horizontal_plusminus.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/23_vertical_plusminus.tsx b/storybook/stories/goal/23_vertical_plusminus.tsx
index 07a8df63810..e0c54124165 100644
--- a/storybook/stories/goal/23_vertical_plusminus.tsx
+++ b/storybook/stories/goal/23_vertical_plusminus.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/24_goal_plusminus.tsx b/storybook/stories/goal/24_goal_plusminus.tsx
index f5fbaa2534d..bc4a5ef6a98 100644
--- a/storybook/stories/goal/24_goal_plusminus.tsx
+++ b/storybook/stories/goal/24_goal_plusminus.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/2_gauge_with_target.tsx b/storybook/stories/goal/2_gauge_with_target.tsx
index 0224ed91564..3047f339689 100644
--- a/storybook/stories/goal/2_gauge_with_target.tsx
+++ b/storybook/stories/goal/2_gauge_with_target.tsx
@@ -9,10 +9,9 @@
 import { number, color, array, boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/3_horizontal_bullet.tsx b/storybook/stories/goal/3_horizontal_bullet.tsx
index 496d8759a47..4aa11c20408 100644
--- a/storybook/stories/goal/3_horizontal_bullet.tsx
+++ b/storybook/stories/goal/3_horizontal_bullet.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/4_vertical_bullet.tsx b/storybook/stories/goal/4_vertical_bullet.tsx
index 15fc6d892ea..23780939ed4 100644
--- a/storybook/stories/goal/4_vertical_bullet.tsx
+++ b/storybook/stories/goal/4_vertical_bullet.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/5_minimal.tsx b/storybook/stories/goal/5_minimal.tsx
index 233bc97cf01..bec0ce07f41 100644
--- a/storybook/stories/goal/5_minimal.tsx
+++ b/storybook/stories/goal/5_minimal.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/6_minimal_horizontal.tsx b/storybook/stories/goal/6_minimal_horizontal.tsx
index ce4f1ebb011..72abd280126 100644
--- a/storybook/stories/goal/6_minimal_horizontal.tsx
+++ b/storybook/stories/goal/6_minimal_horizontal.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/7_horizontal_bar.tsx b/storybook/stories/goal/7_horizontal_bar.tsx
index 5b9c0c18f85..05441b3e9bd 100644
--- a/storybook/stories/goal/7_horizontal_bar.tsx
+++ b/storybook/stories/goal/7_horizontal_bar.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/8_irregular_ticks.tsx b/storybook/stories/goal/8_irregular_ticks.tsx
index 6333c8b7058..019cedf9667 100644
--- a/storybook/stories/goal/8_irregular_ticks.tsx
+++ b/storybook/stories/goal/8_irregular_ticks.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/goal/9_minimal_band.tsx b/storybook/stories/goal/9_minimal_band.tsx
index b81f809fa05..2ba04234d76 100644
--- a/storybook/stories/goal/9_minimal_band.tsx
+++ b/storybook/stories/goal/9_minimal_band.tsx
@@ -8,10 +8,9 @@
 
 import React from 'react';
 
-import { Chart, Goal, Settings } from '@elastic/charts';
+import { Chart, Color, Goal, Settings } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
-import { Color } from '@elastic/charts/src/utils/common';
 
 import { useBaseTheme } from '../../use_base_theme';
 
diff --git a/storybook/stories/interactions/17_png_export.tsx b/storybook/stories/interactions/17_png_export.tsx
index 765976e5c22..315d5ebe2df 100644
--- a/storybook/stories/interactions/17_png_export.tsx
+++ b/storybook/stories/interactions/17_png_export.tsx
@@ -21,12 +21,12 @@ import {
   Datum,
   Goal,
   ChartType,
+  Color,
 } from '@elastic/charts';
 import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
 import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
-import { Color } from '@elastic/charts/src/utils/common';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';