diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
index caad9467bebeb..9fb53ab15d374 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
@@ -12,8 +12,11 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -24,8 +27,6 @@ export function BackendFailedTransactionRateChart({
 }: {
   height: number;
 }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, kuery, environment, rangeFrom, rangeTo },
   } = useApmParams('/backends/overview');
@@ -56,6 +57,9 @@ export function BackendFailedTransactionRateChart({
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.FAILED_TRANSACTION_RATE
+  );
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
@@ -63,7 +67,7 @@ export function BackendFailedTransactionRateChart({
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis7,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendErrorRateChart.chartTitle', {
           defaultMessage: 'Failed transaction rate',
         }),
@@ -74,7 +78,7 @@ export function BackendFailedTransactionRateChart({
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendErrorRateChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -83,7 +87,7 @@ export function BackendFailedTransactionRateChart({
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis7, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   return (
     <TimeseriesChart
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
index f18183dd6079e..9d95b58fe24de 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
@@ -12,16 +12,17 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import {
   getMaxY,
   getResponseTimeTickFormatter,
 } from '../../shared/charts/transaction_charts/helper';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 export function BackendLatencyChart({ height }: { height: number }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, rangeFrom, rangeTo, kuery, environment },
   } = useApmParams('/backends/overview');
@@ -52,6 +53,10 @@ export function BackendLatencyChart({ height }: { height: number }) {
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.LATENCY_AVG
+  );
+
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
@@ -59,7 +64,7 @@ export function BackendLatencyChart({ height }: { height: number }) {
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis1,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendLatencyChart.chartTitle', {
           defaultMessage: 'Latency',
         }),
@@ -70,7 +75,7 @@ export function BackendLatencyChart({ height }: { height: number }) {
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendLatencyChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -79,7 +84,7 @@ export function BackendLatencyChart({ height }: { height: number }) {
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis1, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   const maxY = getMaxY(timeseries);
   const latencyFormatter = getDurationFormatter(maxY);
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
index 2bae8ac54d1b1..c293561f780b1 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
@@ -12,12 +12,13 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 export function BackendThroughputChart({ height }: { height: number }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, rangeFrom, rangeTo, kuery, environment },
   } = useApmParams('/backends/overview');
@@ -48,6 +49,10 @@ export function BackendThroughputChart({ height }: { height: number }) {
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.THROUGHPUT
+  );
+
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
@@ -55,7 +60,7 @@ export function BackendThroughputChart({ height }: { height: number }) {
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis0,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendThroughputChart.chartTitle', {
           defaultMessage: 'Throughput',
         }),
@@ -66,7 +71,7 @@ export function BackendThroughputChart({ height }: { height: number }) {
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendThroughputChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -75,7 +80,7 @@ export function BackendThroughputChart({ height }: { height: number }) {
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis0, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   return (
     <TimeseriesChart
diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx
index adeb3b1750444..8be150e4b99ea 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx
@@ -25,6 +25,10 @@ import { APMQueryParams } from '../../../shared/links/url_helpers';
 import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { TimestampTooltip } from '../../../shared/timestamp_tooltip';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 const GroupIdLink = euiStyled(ErrorDetailLink)`
   font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
@@ -203,9 +207,12 @@ function ErrorGroupList({
             detailedStatistics?.currentPeriod?.[groupId]?.timeseries;
           const previousPeriodTimeseries =
             detailedStatistics?.previousPeriod?.[groupId]?.timeseries;
+          const { currentPeriodColor, previousPeriodColor } =
+            getTimeSeriesColor(ChartType.FAILED_TRANSACTION_RATE);
+
           return (
             <SparkPlot
-              color="euiColorVis7"
+              color={currentPeriodColor}
               series={currentPeriodTimeseries}
               valueLabel={i18n.translate(
                 'xpack.apm.serviceOveriew.errorsTableOccurrences',
@@ -219,6 +226,7 @@ function ErrorGroupList({
               comparisonSeries={
                 comparisonEnabled ? previousPeriodTimeseries : undefined
               }
+              comparisonSeriesColor={previousPeriodColor}
             />
           );
         },
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
index 4617daac2ddcf..65c007061a824 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
@@ -42,6 +42,10 @@ import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { ServiceLink } from '../../../shared/service_link';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { HealthBadge } from './HealthBadge';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 type ServiceListAPIResponse = APIReturnType<'GET /internal/apm/services'>;
 type Items = ServiceListAPIResponse['items'];
@@ -77,6 +81,7 @@ export function getServiceColumns({
   const { isSmall, isLarge, isXl } = breakpoints;
   const showWhenSmallOrGreaterThanLarge = isSmall || !isLarge;
   const showWhenSmallOrGreaterThanXL = isSmall || !isXl;
+
   return [
     ...(showHealthStatusColumn
       ? [
@@ -155,17 +160,23 @@ export function getServiceColumns({
       }),
       sortable: true,
       dataType: 'number',
-      render: (_, { serviceName, latency }) => (
-        <ListMetric
-          series={comparisonData?.currentPeriod[serviceName]?.latency}
-          comparisonSeries={
-            comparisonData?.previousPeriod[serviceName]?.latency
-          }
-          hideSeries={!showWhenSmallOrGreaterThanLarge}
-          color="euiColorVis1"
-          valueLabel={asMillisecondDuration(latency || 0)}
-        />
-      ),
+      render: (_, { serviceName, latency }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.LATENCY_AVG
+        );
+        return (
+          <ListMetric
+            series={comparisonData?.currentPeriod[serviceName]?.latency}
+            comparisonSeries={
+              comparisonData?.previousPeriod[serviceName]?.latency
+            }
+            hideSeries={!showWhenSmallOrGreaterThanLarge}
+            color={currentPeriodColor}
+            valueLabel={asMillisecondDuration(latency || 0)}
+            comparisonSeriesColor={previousPeriodColor}
+          />
+        );
+      },
       align: RIGHT_ALIGNMENT,
     },
     {
@@ -175,17 +186,24 @@ export function getServiceColumns({
       }),
       sortable: true,
       dataType: 'number',
-      render: (_, { serviceName, throughput }) => (
-        <ListMetric
-          series={comparisonData?.currentPeriod[serviceName]?.throughput}
-          comparisonSeries={
-            comparisonData?.previousPeriod[serviceName]?.throughput
-          }
-          hideSeries={!showWhenSmallOrGreaterThanLarge}
-          color="euiColorVis0"
-          valueLabel={asTransactionRate(throughput)}
-        />
-      ),
+      render: (_, { serviceName, throughput }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.THROUGHPUT
+        );
+
+        return (
+          <ListMetric
+            series={comparisonData?.currentPeriod[serviceName]?.throughput}
+            comparisonSeries={
+              comparisonData?.previousPeriod[serviceName]?.throughput
+            }
+            hideSeries={!showWhenSmallOrGreaterThanLarge}
+            color={currentPeriodColor}
+            valueLabel={asTransactionRate(throughput)}
+            comparisonSeriesColor={previousPeriodColor}
+          />
+        );
+      },
       align: RIGHT_ALIGNMENT,
     },
     {
@@ -197,6 +215,9 @@ export function getServiceColumns({
       dataType: 'number',
       render: (_, { serviceName, transactionErrorRate }) => {
         const valueLabel = asPercent(transactionErrorRate, 1);
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
         return (
           <ListMetric
             series={
@@ -206,8 +227,9 @@ export function getServiceColumns({
               comparisonData?.previousPeriod[serviceName]?.transactionErrorRate
             }
             hideSeries={!showWhenSmallOrGreaterThanLarge}
-            color="euiColorVis7"
+            color={currentPeriodColor}
             valueLabel={valueLabel}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx
index 9a3dbf8e2b9dc..4bcf0e475d85f 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx
@@ -12,6 +12,7 @@ import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values
 import { Breakpoints } from '../../../../hooks/use_breakpoints';
 import { getServiceColumns } from './';
 import * as stories from './service_list.stories';
+import * as timeSeriesColor from '../../../shared/charts/helper/get_timeseries_color';
 
 const { Example, EmptyState } = composeStories(stories);
 
@@ -42,6 +43,15 @@ const service: any = {
 };
 
 describe('ServiceList', () => {
+  beforeAll(() => {
+    jest.spyOn(timeSeriesColor, 'getTimeSeriesColor').mockImplementation(() => {
+      return {
+        currentPeriodColor: 'green',
+        previousPeriodColor: 'black',
+      };
+    });
+  });
+
   it('renders empty state', async () => {
     render(<EmptyState />);
 
@@ -82,7 +92,8 @@ describe('ServiceList', () => {
         expect(renderedColumns[3]).toMatchInlineSnapshot(`"request"`);
         expect(renderedColumns[4]).toMatchInlineSnapshot(`
           <ListMetric
-            color="euiColorVis1"
+            color="green"
+            comparisonSeriesColor="black"
             hideSeries={false}
             valueLabel="0 ms"
           />
@@ -107,7 +118,8 @@ describe('ServiceList', () => {
         expect(renderedColumns.length).toEqual(5);
         expect(renderedColumns[2]).toMatchInlineSnapshot(`
           <ListMetric
-            color="euiColorVis1"
+            color="green"
+            comparisonSeriesColor="black"
             hideSeries={true}
             valueLabel="0 ms"
           />
@@ -140,7 +152,8 @@ describe('ServiceList', () => {
           `);
           expect(renderedColumns[3]).toMatchInlineSnapshot(`
             <ListMetric
-              color="euiColorVis1"
+              color="green"
+              comparisonSeriesColor="black"
               hideSeries={false}
               valueLabel="0 ms"
             />
@@ -175,7 +188,8 @@ describe('ServiceList', () => {
           expect(renderedColumns[3]).toMatchInlineSnapshot(`"request"`);
           expect(renderedColumns[4]).toMatchInlineSnapshot(`
             <ListMetric
-              color="euiColorVis1"
+              color="green"
+              comparisonSeriesColor="black"
               hideSeries={false}
               valueLabel="0 ms"
             />
diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/stats_list.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/stats_list.tsx
index 1b8e1f64859f4..ec82d2112f0e2 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/Popover/stats_list.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/Popover/stats_list.tsx
@@ -21,7 +21,11 @@ import {
 } from '../../../../../common/utils/formatters';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { SparkPlot, Color } from '../../../shared/charts/spark_plot';
+import { SparkPlot } from '../../../shared/charts/spark_plot';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 type ServiceNodeReturn =
   APIReturnType<'GET /internal/apm/service-map/service/{serviceName}'>;
@@ -58,7 +62,8 @@ interface Item {
   valueLabel: string | null;
   timeseries?: Coordinate[];
   previousPeriodTimeseries?: Coordinate[];
-  color: Color;
+  color: string;
+  comparisonSeriesColor: string;
 }
 
 export function StatsList({ data, isLoading }: StatsListProps) {
@@ -87,7 +92,9 @@ export function StatsList({ data, isLoading }: StatsListProps) {
         timeseries: currentPeriod?.transactionStats?.latency?.timeseries,
         previousPeriodTimeseries:
           previousPeriod?.transactionStats?.latency?.timeseries,
-        color: 'euiColorVis1',
+        color: getTimeSeriesColor(ChartType.LATENCY_AVG).currentPeriodColor,
+        comparisonSeriesColor: getTimeSeriesColor(ChartType.LATENCY_AVG)
+          .previousPeriodColor,
       },
       {
         title: i18n.translate(
@@ -102,7 +109,9 @@ export function StatsList({ data, isLoading }: StatsListProps) {
         timeseries: currentPeriod?.transactionStats?.throughput?.timeseries,
         previousPeriodTimeseries:
           previousPeriod?.transactionStats?.throughput?.timeseries,
-        color: 'euiColorVis0',
+        color: getTimeSeriesColor(ChartType.THROUGHPUT).currentPeriodColor,
+        comparisonSeriesColor: getTimeSeriesColor(ChartType.THROUGHPUT)
+          .previousPeriodColor,
       },
       {
         title: i18n.translate('xpack.apm.serviceMap.errorRatePopoverStat', {
@@ -116,7 +125,11 @@ export function StatsList({ data, isLoading }: StatsListProps) {
         timeseries: currentPeriod?.failedTransactionsRate?.timeseries,
         previousPeriodTimeseries:
           previousPeriod?.failedTransactionsRate?.timeseries,
-        color: 'euiColorVis7',
+        color: getTimeSeriesColor(ChartType.FAILED_TRANSACTION_RATE)
+          .currentPeriodColor,
+        comparisonSeriesColor: getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        ).previousPeriodColor,
       },
       {
         title: i18n.translate('xpack.apm.serviceMap.avgCpuUsagePopoverStat', {
@@ -125,7 +138,9 @@ export function StatsList({ data, isLoading }: StatsListProps) {
         valueLabel: asPercent(currentPeriod?.cpuUsage?.value, 1, ''),
         timeseries: currentPeriod?.cpuUsage?.timeseries,
         previousPeriodTimeseries: previousPeriod?.cpuUsage?.timeseries,
-        color: 'euiColorVis3',
+        color: getTimeSeriesColor(ChartType.CPU_USAGE).currentPeriodColor,
+        comparisonSeriesColor: getTimeSeriesColor(ChartType.CPU_USAGE)
+          .previousPeriodColor,
       },
       {
         title: i18n.translate(
@@ -137,7 +152,9 @@ export function StatsList({ data, isLoading }: StatsListProps) {
         valueLabel: asPercent(currentPeriod?.memoryUsage?.value, 1, ''),
         timeseries: currentPeriod?.memoryUsage?.timeseries,
         previousPeriodTimeseries: previousPeriod?.memoryUsage?.timeseries,
-        color: 'euiColorVis8',
+        color: getTimeSeriesColor(ChartType.MEMORY_USAGE).currentPeriodColor,
+        comparisonSeriesColor: getTimeSeriesColor(ChartType.MEMORY_USAGE)
+          .previousPeriodColor,
       },
     ],
     [currentPeriod, previousPeriod]
@@ -160,6 +177,7 @@ export function StatsList({ data, isLoading }: StatsListProps) {
           timeseries,
           color,
           previousPeriodTimeseries,
+          comparisonSeriesColor,
         }) => {
           if (!valueLabel) {
             return null;
@@ -184,6 +202,7 @@ export function StatsList({ data, isLoading }: StatsListProps) {
                       color={color}
                       valueLabel={valueLabel}
                       comparisonSeries={previousPeriodTimeseries}
+                      comparisonSeriesColor={comparisonSeriesColor}
                     />
                   ) : (
                     <div>{valueLabel}</div>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_columns.tsx
index fea48dee5d6c0..f379b17ee6b48 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_columns.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_columns.tsx
@@ -14,6 +14,10 @@ import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ErrorDetailLink } from '../../../shared/links/apm/error_detail_link';
 import { TimestampTooltip } from '../../../shared/timestamp_tooltip';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 type ErrorGroupMainStatistics =
   APIReturnType<'GET /internal/apm/services/{serviceName}/errors/groups/main_statistics'>;
@@ -84,10 +88,13 @@ export function getColumns({
         const previousPeriodTimeseries =
           errorGroupDetailedStatistics?.previousPeriod?.[errorGroupId]
             ?.timeseries;
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
 
         return (
           <SparkPlot
-            color="euiColorVis7"
+            color={currentPeriodColor}
             series={currentPeriodTimeseries}
             valueLabel={i18n.translate(
               'xpack.apm.serviceOveriew.errorsTableOccurrences',
@@ -101,6 +108,7 @@ export function getColumns({
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimeseries : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx
index ae543adf2b852..1950c361fe2de 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx
@@ -31,6 +31,10 @@ import { ListMetric } from '../../../shared/list_metric';
 import { getLatencyColumnLabel } from '../../../shared/transactions_table/get_latency_column_label';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { InstanceActionsMenu } from './instance_actions_menu';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 type ServiceInstanceMainStatistics =
   APIReturnType<'GET /internal/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
@@ -111,15 +115,21 @@ export function getColumns({
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.latency;
         const previousPeriodTimestamp =
           detailedStatsData?.previousPeriod?.[serviceNodeName]?.latency;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.LATENCY_AVG
+        );
+
         return (
           <ListMetric
-            color="euiColorVis1"
+            color={currentPeriodColor}
             valueLabel={asMillisecondDuration(latency)}
             hideSeries={!shouldShowSparkPlots}
             series={currentPeriodTimestamp}
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimestamp : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -137,16 +147,22 @@ export function getColumns({
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.throughput;
         const previousPeriodTimestamp =
           detailedStatsData?.previousPeriod?.[serviceNodeName]?.throughput;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.THROUGHPUT
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis0"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             valueLabel={asTransactionRate(throughput)}
             series={currentPeriodTimestamp}
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimestamp : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -164,16 +180,22 @@ export function getColumns({
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.errorRate;
         const previousPeriodTimestamp =
           detailedStatsData?.previousPeriod?.[serviceNodeName]?.errorRate;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis7"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             valueLabel={asPercent(errorRate, 1)}
             series={currentPeriodTimestamp}
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimestamp : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -191,16 +213,22 @@ export function getColumns({
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.cpuUsage;
         const previousPeriodTimestamp =
           detailedStatsData?.previousPeriod?.[serviceNodeName]?.cpuUsage;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.CPU_USAGE
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis2"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             valueLabel={asPercent(cpuUsage, 1)}
             series={currentPeriodTimestamp}
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimestamp : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -218,16 +246,22 @@ export function getColumns({
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.memoryUsage;
         const previousPeriodTimestamp =
           detailedStatsData?.previousPeriod?.[serviceNodeName]?.memoryUsage;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.MEMORY_USAGE
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis3"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             valueLabel={asPercent(memoryUsage, 1)}
             series={currentPeriodTimestamp}
             comparisonSeries={
               comparisonEnabled ? previousPeriodTimestamp : undefined
             }
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
index c3554a68f4f8e..dbbb925fe634b 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
@@ -22,13 +22,16 @@ import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { usePreferredServiceAnomalyTimeseries } from '../../../hooks/use_preferred_service_anomaly_timeseries';
-import { useTheme } from '../../../hooks/use_theme';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
 import {
   getComparisonChartTheme,
   getTimeRangeComparison,
 } from '../../shared/time_comparison/get_time_range_comparison';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 const INITIAL_STATE = {
   currentPeriod: [],
@@ -44,8 +47,6 @@ export function ServiceOverviewThroughputChart({
   kuery: string;
   transactionName?: string;
 }) {
-  const theme = useTheme();
-
   const {
     urlParams: { comparisonEnabled, comparisonType },
   } = useLegacyUrlParams();
@@ -63,7 +64,8 @@ export function ServiceOverviewThroughputChart({
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const { transactionType, serviceName } = useApmServiceContext();
-  const comparisonChartTheme = getComparisonChartTheme(theme);
+
+  const comparisonChartTheme = getComparisonChartTheme();
   const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
     start,
     end,
@@ -109,11 +111,15 @@ export function ServiceOverviewThroughputChart({
     ]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.THROUGHPUT
+  );
+
   const timeseries = [
     {
       data: data.currentPeriod,
       type: 'linemark',
-      color: theme.eui.euiColorVis0,
+      color: currentPeriodColor,
       title: i18n.translate('xpack.apm.serviceOverview.throughtputChartTitle', {
         defaultMessage: 'Throughput',
       }),
@@ -123,7 +129,7 @@ export function ServiceOverviewThroughputChart({
           {
             data: data.previousPeriod,
             type: 'area',
-            color: theme.eui.euiColorMediumShade,
+            color: previousPeriodColor,
             title: i18n.translate(
               'xpack.apm.serviceOverview.throughtputChart.previousPeriodLabel',
               { defaultMessage: 'Previous period' }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
index 7e3752565af2f..d17de1a4edd1b 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
@@ -13,7 +13,6 @@ import { AlertType } from '../../../../../common/alert_types';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { asPercent } from '../../../../../common/utils/formatters';
 import { useFetcher } from '../../../../hooks/use_fetcher';
-import { useTheme } from '../../../../hooks/use_theme';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { TimeseriesChart } from '../timeseries_chart';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
@@ -26,6 +25,7 @@ import { useTimeRange } from '../../../../hooks/use_time_range';
 import { useEnvironmentsContext } from '../../../../context/environments_context/use_environments_context';
 import { ApmMlDetectorType } from '../../../../../common/anomaly_detection/apm_ml_detectors';
 import { usePreferredServiceAnomalyTimeseries } from '../../../../hooks/use_preferred_service_anomaly_timeseries';
+import { ChartType, getTimeSeriesColor } from '../helper/get_timeseries_color';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -56,7 +56,6 @@ export function FailedTransactionRateChart({
   showAnnotations = true,
   kuery,
 }: Props) {
-  const theme = useTheme();
   const {
     urlParams: { transactionName, comparisonEnabled, comparisonType },
   } = useLegacyUrlParams();
@@ -74,7 +73,8 @@ export function FailedTransactionRateChart({
   );
 
   const { serviceName, transactionType, alerts } = useApmServiceContext();
-  const comparisonChartThem = getComparisonChartTheme(theme);
+
+  const comparisonChartThem = getComparisonChartTheme();
   const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
     start,
     end,
@@ -120,11 +120,15 @@ export function FailedTransactionRateChart({
     ]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.FAILED_TRANSACTION_RATE
+  );
+
   const timeseries = [
     {
       data: data.currentPeriod.timeseries,
       type: 'linemark',
-      color: theme.eui.euiColorVis7,
+      color: currentPeriodColor,
       title: i18n.translate('xpack.apm.errorRate.chart.errorRate', {
         defaultMessage: 'Failed transaction rate (avg.)',
       }),
@@ -134,7 +138,7 @@ export function FailedTransactionRateChart({
           {
             data: data.previousPeriod.timeseries,
             type: 'area',
-            color: theme.eui.euiColorMediumShade,
+            color: previousPeriodColor,
             title: i18n.translate(
               'xpack.apm.errorRate.chart.errorRate.previousPeriodLabel',
               { defaultMessage: 'Previous period' }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/get_timeseries_color.ts b/x-pack/plugins/apm/public/components/shared/charts/helper/get_timeseries_color.ts
new file mode 100644
index 0000000000000..5098839330c95
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/charts/helper/get_timeseries_color.ts
@@ -0,0 +1,58 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { euiPaletteColorBlind } from '@elastic/eui';
+
+export const enum ChartType {
+  LATENCY_AVG,
+  LATENCY_P95,
+  LATENCY_P99,
+  THROUGHPUT,
+  FAILED_TRANSACTION_RATE,
+  CPU_USAGE,
+  MEMORY_USAGE,
+}
+
+const palette = euiPaletteColorBlind({ rotations: 2 });
+
+const timeSeriesColorMap: Record<
+  ChartType,
+  { currentPeriodColor: string; previousPeriodColor: string }
+> = {
+  [ChartType.LATENCY_AVG]: {
+    currentPeriodColor: palette[1],
+    previousPeriodColor: palette[11],
+  },
+  [ChartType.LATENCY_P95]: {
+    currentPeriodColor: palette[5],
+    previousPeriodColor: palette[15],
+  },
+  [ChartType.LATENCY_P99]: {
+    currentPeriodColor: palette[7],
+    previousPeriodColor: palette[17],
+  },
+  [ChartType.THROUGHPUT]: {
+    currentPeriodColor: palette[0],
+    previousPeriodColor: palette[10],
+  },
+  [ChartType.FAILED_TRANSACTION_RATE]: {
+    currentPeriodColor: palette[7],
+    previousPeriodColor: palette[17],
+  },
+  [ChartType.CPU_USAGE]: {
+    currentPeriodColor: palette[3],
+    previousPeriodColor: palette[13],
+  },
+  [ChartType.MEMORY_USAGE]: {
+    currentPeriodColor: palette[8],
+    previousPeriodColor: palette[18],
+  },
+};
+
+export function getTimeSeriesColor(chartType: ChartType) {
+  return timeSeriesColorMap[chartType];
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/index.tsx
index d654cb9c0f5d3..6991a7aa7e200 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/index.tsx
@@ -16,7 +16,6 @@ import { LatencyAggregationType } from '../../../../../common/latency_aggregatio
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import { useLicenseContext } from '../../../../context/license/use_license_context';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { useTheme } from '../../../../hooks/use_theme';
 import { useTransactionLatencyChartsFetcher } from '../../../../hooks/use_transaction_latency_chart_fetcher';
 import { TimeseriesChart } from '../../../shared/charts/timeseries_chart';
 import {
@@ -47,8 +46,8 @@ function filterNil<T>(value: T | null | undefined): value is T {
 
 export function LatencyChart({ height, kuery }: Props) {
   const history = useHistory();
-  const theme = useTheme();
-  const comparisonChartTheme = getComparisonChartTheme(theme);
+
+  const comparisonChartTheme = getComparisonChartTheme();
   const { urlParams } = useLegacyUrlParams();
   const { latencyAggregationType, comparisonEnabled } = urlParams;
   const license = useLicenseContext();
diff --git a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
index 0843fafe0f92f..325eb3d12f899 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
@@ -22,18 +22,6 @@ import { useTheme } from '../../../../hooks/use_theme';
 import { unit } from '../../../../utils/style';
 import { getComparisonChartTheme } from '../../time_comparison/get_time_range_comparison';
 
-export type Color =
-  | 'euiColorVis0'
-  | 'euiColorVis1'
-  | 'euiColorVis2'
-  | 'euiColorVis3'
-  | 'euiColorVis4'
-  | 'euiColorVis5'
-  | 'euiColorVis6'
-  | 'euiColorVis7'
-  | 'euiColorVis8'
-  | 'euiColorVis9';
-
 function hasValidTimeseries(
   series?: Coordinate[] | null
 ): series is Coordinate[] {
@@ -48,16 +36,18 @@ export function SparkPlot({
   comparisonSeries = [],
   valueLabel,
   compact,
+  comparisonSeriesColor,
 }: {
-  color: Color;
+  color: string;
   series?: Coordinate[] | null;
   valueLabel: React.ReactNode;
   compact?: boolean;
   comparisonSeries?: Coordinate[];
+  comparisonSeriesColor: string;
 }) {
   const theme = useTheme();
   const defaultChartTheme = useChartTheme();
-  const comparisonChartTheme = getComparisonChartTheme(theme);
+  const comparisonChartTheme = getComparisonChartTheme();
   const hasComparisonSeries = !!comparisonSeries?.length;
 
   const sparkplotChartTheme: PartialTheme = {
@@ -71,8 +61,6 @@ export function SparkPlot({
     ...(hasComparisonSeries ? comparisonChartTheme : {}),
   };
 
-  const colorValue = theme.eui[color];
-
   const chartSize = {
     height: theme.eui.euiSizeL,
     width: compact ? unit * 4 : unit * 5,
@@ -106,7 +94,7 @@ export function SparkPlot({
               xAccessor={'x'}
               yAccessors={['y']}
               data={series}
-              color={colorValue}
+              color={color}
               curve={CurveType.CURVE_MONOTONE_X}
             />
             {hasComparisonSeries && (
@@ -117,7 +105,7 @@ export function SparkPlot({
                 xAccessor={'x'}
                 yAccessors={['y']}
                 data={comparisonSeries}
-                color={theme.eui.euiColorLightestShade}
+                color={comparisonSeriesColor}
                 curve={CurveType.CURVE_MONOTONE_X}
               />
             )}
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index 844957defe67d..34feb0802a5c6 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -27,6 +27,10 @@ import { ListMetric } from '../list_metric';
 import { ITableColumn, ManagedTable } from '../managed_table';
 import { OverviewTableContainer } from '../overview_table_container';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../charts/helper/get_timeseries_color';
 
 export type DependenciesItem = Omit<
   ConnectionStatsItemWithComparisonData,
@@ -82,14 +86,19 @@ export function DependenciesTable(props: Props) {
       }),
       align: RIGHT_ALIGNMENT,
       render: (_, { currentStats, previousStats }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.LATENCY_AVG
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis1"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             series={currentStats.latency.timeseries}
             comparisonSeries={previousStats?.latency.timeseries}
             valueLabel={asMillisecondDuration(currentStats.latency.value)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -102,14 +111,19 @@ export function DependenciesTable(props: Props) {
       }),
       align: RIGHT_ALIGNMENT,
       render: (_, { currentStats, previousStats }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.THROUGHPUT
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis0"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             series={currentStats.throughput.timeseries}
             comparisonSeries={previousStats?.throughput.timeseries}
             valueLabel={asTransactionRate(currentStats.throughput.value)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -122,14 +136,19 @@ export function DependenciesTable(props: Props) {
       }),
       align: RIGHT_ALIGNMENT,
       render: (_, { currentStats, previousStats }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
+
         return (
           <ListMetric
             compact
-            color="euiColorVis7"
+            color={currentPeriodColor}
             hideSeries={!shouldShowSparkPlots}
             series={currentStats.errorRate.timeseries}
             comparisonSeries={previousStats?.errorRate.timeseries}
             valueLabel={asPercent(currentStats.errorRate.value, 1)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts b/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts
index 97c38040c5d96..92611d88aa0cc 100644
--- a/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts
+++ b/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts
@@ -7,23 +7,20 @@
 
 import { PartialTheme } from '@elastic/charts';
 import moment from 'moment';
-import { EuiTheme } from 'src/plugins/kibana_react/common';
 import {
   TimeRangeComparisonType,
   TimeRangeComparisonEnum,
 } from '../../../../common/runtime_types/comparison_type_rt';
 import { getDateDifference } from '../../../../common/utils/formatters';
 
-export function getComparisonChartTheme(theme: EuiTheme): PartialTheme {
+export function getComparisonChartTheme(): PartialTheme {
   return {
     areaSeriesStyle: {
       area: {
-        fill: theme.eui.euiColorLightShade,
         visible: true,
         opacity: 0.5,
       },
       line: {
-        stroke: theme.eui.euiColorMediumShade,
         strokeWidth: 1,
         visible: true,
       },
diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
index 49d5e95344ea4..fcf98795b3709 100644
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/get_columns.tsx
@@ -23,6 +23,10 @@ import { ListMetric } from '../list_metric';
 import { ITableColumn } from '../managed_table';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
 import { getLatencyColumnLabel } from './get_latency_column_label';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../charts/helper/get_timeseries_color';
 
 type TransactionGroupMainStatistics =
   APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/groups/main_statistics'>;
@@ -86,9 +90,14 @@ export function getColumns({
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.latency;
         const previousTimeseries =
           transactionGroupDetailedStatistics?.previousPeriod?.[name]?.latency;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.LATENCY_AVG
+        );
+
         return (
           <ListMetric
-            color="euiColorVis1"
+            color={currentPeriodColor}
             compact
             hideSeries={!shouldShowSparkPlots}
             series={currentTimeseries}
@@ -96,6 +105,7 @@ export function getColumns({
               comparisonEnabled ? previousTimeseries : undefined
             }
             valueLabel={asMillisecondDuration(latency)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -114,9 +124,14 @@ export function getColumns({
         const previousTimeseries =
           transactionGroupDetailedStatistics?.previousPeriod?.[name]
             ?.throughput;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.THROUGHPUT
+        );
+
         return (
           <ListMetric
-            color="euiColorVis0"
+            color={currentPeriodColor}
             compact
             hideSeries={!shouldShowSparkPlots}
             series={currentTimeseries}
@@ -124,6 +139,7 @@ export function getColumns({
               comparisonEnabled ? previousTimeseries : undefined
             }
             valueLabel={asTransactionRate(throughput)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
@@ -141,9 +157,14 @@ export function getColumns({
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.errorRate;
         const previousTimeseries =
           transactionGroupDetailedStatistics?.previousPeriod?.[name]?.errorRate;
+
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
+
         return (
           <ListMetric
-            color="euiColorVis7"
+            color={currentPeriodColor}
             compact
             hideSeries={!shouldShowSparkPlots}
             series={currentTimeseries}
@@ -151,6 +172,7 @@ export function getColumns({
               comparisonEnabled ? previousTimeseries : undefined
             }
             valueLabel={asPercent(errorRate, 1)}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },
diff --git a/x-pack/plugins/apm/public/hooks/use_comparison.ts b/x-pack/plugins/apm/public/hooks/use_comparison.ts
index dbd37c25784cf..93d0e31969c50 100644
--- a/x-pack/plugins/apm/public/hooks/use_comparison.ts
+++ b/x-pack/plugins/apm/public/hooks/use_comparison.ts
@@ -11,13 +11,10 @@ import {
 } from '../components/shared/time_comparison/get_time_range_comparison';
 import { useLegacyUrlParams } from '../context/url_params_context/use_url_params';
 import { useApmParams } from './use_apm_params';
-import { useTheme } from './use_theme';
 import { useTimeRange } from './use_time_range';
 
 export function useComparison() {
-  const theme = useTheme();
-
-  const comparisonChartTheme = getComparisonChartTheme(theme);
+  const comparisonChartTheme = getComparisonChartTheme();
   const { query } = useApmParams('/*');
 
   if (!('rangeFrom' in query && 'rangeTo' in query)) {
diff --git a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
index 1ce5f0a4fa4e3..33bb9095665d8 100644
--- a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
+++ b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
@@ -10,7 +10,6 @@ import { useFetcher } from './use_fetcher';
 import { useLegacyUrlParams } from '../context/url_params_context/use_url_params';
 import { useApmServiceContext } from '../context/apm_service/use_apm_service_context';
 import { getLatencyChartSelector } from '../selectors/latency_chart_selectors';
-import { useTheme } from './use_theme';
 import { getTimeRangeComparison } from '../components/shared/time_comparison/get_time_range_comparison';
 import { useTimeRange } from './use_time_range';
 import { useApmParams } from './use_apm_params';
@@ -23,7 +22,6 @@ export function useTransactionLatencyChartsFetcher({
   environment: string;
 }) {
   const { transactionType, serviceName } = useApmServiceContext();
-  const theme = useTheme();
   const {
     urlParams: {
       transactionName,
@@ -94,7 +92,6 @@ export function useTransactionLatencyChartsFetcher({
     () =>
       getLatencyChartSelector({
         latencyChart: data,
-        theme,
         latencyAggregationType,
       }),
     // It should only update when the data has changed
diff --git a/x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts b/x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts
index 8be5fc8957431..b37bb9a48d3ea 100644
--- a/x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts
+++ b/x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts
@@ -5,22 +5,12 @@
  * 2.0.
  */
 
-import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import { LatencyAggregationType } from '../../common/latency_aggregation_types';
 import {
   getLatencyChartSelector,
   LatencyChartsResponse,
 } from './latency_chart_selectors';
-
-const theme = {
-  eui: {
-    euiColorVis1: 'blue',
-    euiColorVis5: 'red',
-    euiColorVis7: 'black',
-    euiColorVis9: 'yellow',
-    euiColorMediumShade: 'green',
-  },
-} as EuiTheme;
+import * as timeSeriesColor from '../components/shared/charts/helper/get_timeseries_color';
 
 const latencyChartData = {
   currentPeriod: {
@@ -34,9 +24,18 @@ const latencyChartData = {
 } as LatencyChartsResponse;
 
 describe('getLatencyChartSelector', () => {
+  beforeAll(() => {
+    jest.spyOn(timeSeriesColor, 'getTimeSeriesColor').mockImplementation(() => {
+      return {
+        currentPeriodColor: 'green',
+        previousPeriodColor: 'black',
+      };
+    });
+  });
+
   describe('without anomaly', () => {
     it('returns default values when data is undefined', () => {
-      const latencyChart = getLatencyChartSelector({ theme });
+      const latencyChart = getLatencyChartSelector({});
       expect(latencyChart).toEqual({
         currentPeriod: undefined,
         previousPeriod: undefined,
@@ -46,7 +45,6 @@ describe('getLatencyChartSelector', () => {
     it('returns average timeseries', () => {
       const latencyTimeseries = getLatencyChartSelector({
         latencyChart: latencyChartData,
-        theme,
         latencyAggregationType: LatencyAggregationType.avg,
       });
       expect(latencyTimeseries).toEqual({
@@ -55,11 +53,11 @@ describe('getLatencyChartSelector', () => {
           data: [{ x: 1, y: 10 }],
           legendValue: '1 μs',
           type: 'linemark',
-          color: 'blue',
+          color: 'green',
         },
 
         previousPeriod: {
-          color: 'green',
+          color: 'black',
           data: [{ x: 1, y: 10 }],
           type: 'area',
           title: 'Previous period',
@@ -70,7 +68,6 @@ describe('getLatencyChartSelector', () => {
     it('returns 95th percentile timeseries', () => {
       const latencyTimeseries = getLatencyChartSelector({
         latencyChart: latencyChartData,
-        theme,
         latencyAggregationType: LatencyAggregationType.p95,
       });
       expect(latencyTimeseries).toEqual({
@@ -79,12 +76,12 @@ describe('getLatencyChartSelector', () => {
           titleShort: '95th',
           data: [{ x: 1, y: 10 }],
           type: 'linemark',
-          color: 'red',
+          color: 'green',
         },
         previousPeriod: {
           data: [{ x: 1, y: 10 }],
           type: 'area',
-          color: 'green',
+          color: 'black',
           title: 'Previous period',
         },
       });
@@ -93,7 +90,6 @@ describe('getLatencyChartSelector', () => {
     it('returns 99th percentile timeseries', () => {
       const latencyTimeseries = getLatencyChartSelector({
         latencyChart: latencyChartData,
-        theme,
         latencyAggregationType: LatencyAggregationType.p99,
       });
 
@@ -103,12 +99,12 @@ describe('getLatencyChartSelector', () => {
           titleShort: '99th',
           data: [{ x: 1, y: 10 }],
           type: 'linemark',
-          color: 'black',
+          color: 'green',
         },
         previousPeriod: {
           data: [{ x: 1, y: 10 }],
           type: 'area',
-          color: 'green',
+          color: 'black',
           title: 'Previous period',
         },
       });
@@ -119,7 +115,6 @@ describe('getLatencyChartSelector', () => {
     it('returns latency time series and anomaly timeseries', () => {
       const latencyTimeseries = getLatencyChartSelector({
         latencyChart: latencyChartData,
-        theme,
         latencyAggregationType: LatencyAggregationType.p99,
       });
       expect(latencyTimeseries).toEqual({
@@ -128,12 +123,12 @@ describe('getLatencyChartSelector', () => {
           titleShort: '99th',
           data: [{ x: 1, y: 10 }],
           type: 'linemark',
-          color: 'black',
+          color: 'green',
         },
         previousPeriod: {
           data: [{ x: 1, y: 10 }],
           type: 'area',
-          color: 'green',
+          color: 'black',
           title: 'Previous period',
         },
       });
diff --git a/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts b/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
index d656352c64f9f..4c58dd13f3dcf 100644
--- a/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
+++ b/x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts
@@ -6,10 +6,13 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import { asDuration } from '../../common/utils/formatters';
 import { APMChartSpec, Coordinate } from '../../typings/timeseries';
 import { APIReturnType } from '../services/rest/createCallApmApi';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../components/shared/charts/helper/get_timeseries_color';
 
 export type LatencyChartsResponse =
   APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/charts/latency'>;
@@ -21,11 +24,9 @@ export interface LatencyChartData {
 
 export function getLatencyChartSelector({
   latencyChart,
-  theme,
   latencyAggregationType,
 }: {
   latencyChart?: LatencyChartsResponse;
-  theme: EuiTheme;
   latencyAggregationType?: string;
 }): Partial<LatencyChartData> {
   if (
@@ -37,27 +38,35 @@ export function getLatencyChartSelector({
   return {
     currentPeriod: getLatencyTimeseries({
       latencyChart: latencyChart.currentPeriod,
-      theme,
       latencyAggregationType,
     }),
     previousPeriod: getPreviousPeriodTimeseries({
       previousPeriod: latencyChart.previousPeriod,
-      theme,
+      latencyAggregationType,
     }),
   };
 }
 
 function getPreviousPeriodTimeseries({
   previousPeriod,
-  theme,
+  latencyAggregationType,
 }: {
   previousPeriod: LatencyChartsResponse['previousPeriod'];
-  theme: EuiTheme;
+  latencyAggregationType: string;
 }) {
+  let chartType = ChartType.LATENCY_AVG;
+  if (latencyAggregationType === 'p95') {
+    chartType = ChartType.LATENCY_P95;
+  } else if (latencyAggregationType === 'p99') {
+    chartType = ChartType.LATENCY_P99;
+  }
+
+  const { previousPeriodColor } = getTimeSeriesColor(chartType);
+
   return {
     data: previousPeriod.latencyTimeseries ?? [],
     type: 'area',
-    color: theme.eui.euiColorMediumShade,
+    color: previousPeriodColor,
     title: i18n.translate(
       'xpack.apm.serviceOverview.latencyChartTitle.previousPeriodLabel',
       { defaultMessage: 'Previous period' }
@@ -67,11 +76,9 @@ function getPreviousPeriodTimeseries({
 
 function getLatencyTimeseries({
   latencyChart,
-  theme,
   latencyAggregationType,
 }: {
   latencyChart: LatencyChartsResponse['currentPeriod'];
-  theme: EuiTheme;
   latencyAggregationType: string;
 }) {
   const { overallAvgDuration } = latencyChart;
@@ -79,6 +86,7 @@ function getLatencyTimeseries({
 
   switch (latencyAggregationType) {
     case 'avg': {
+      const { currentPeriodColor } = getTimeSeriesColor(ChartType.LATENCY_AVG);
       return {
         title: i18n.translate(
           'xpack.apm.transactions.latency.chart.averageLabel',
@@ -87,10 +95,11 @@ function getLatencyTimeseries({
         data: latencyTimeseries,
         legendValue: asDuration(overallAvgDuration),
         type: 'linemark',
-        color: theme.eui.euiColorVis1,
+        color: currentPeriodColor,
       };
     }
     case 'p95': {
+      const { currentPeriodColor } = getTimeSeriesColor(ChartType.LATENCY_P95);
       return {
         title: i18n.translate(
           'xpack.apm.transactions.latency.chart.95thPercentileLabel',
@@ -99,10 +108,11 @@ function getLatencyTimeseries({
         titleShort: '95th',
         data: latencyTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis5,
+        color: currentPeriodColor,
       };
     }
     case 'p99': {
+      const { currentPeriodColor } = getTimeSeriesColor(ChartType.LATENCY_P99);
       return {
         title: i18n.translate(
           'xpack.apm.transactions.latency.chart.99thPercentileLabel',
@@ -111,7 +121,7 @@ function getLatencyTimeseries({
         titleShort: '99th',
         data: latencyTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis7,
+        color: currentPeriodColor,
       };
     }
   }