diff --git a/packages/kbn-coloring/src/palettes/constants.ts b/packages/kbn-coloring/src/palettes/constants.ts
index ee9bb9b02b29b..fb35d51c0db13 100644
--- a/packages/kbn-coloring/src/palettes/constants.ts
+++ b/packages/kbn-coloring/src/palettes/constants.ts
@@ -14,3 +14,7 @@ export const DEFAULT_RANGE_TYPE = 'percent';
 export const DEFAULT_MIN_STOP = 0;
 export const DEFAULT_MAX_STOP = 100;
 export const DEFAULT_COLOR_STEPS = 5;
+
+export const DEFAULT_FALLBACK_PALETTE = 'default';
+export const LEGACY_COMPLIMENTARY_PALETTE = 'complimentary';
+export const COMPLEMENTARY_PALETTE = 'complementary';
diff --git a/packages/kbn-coloring/src/palettes/utils.ts b/packages/kbn-coloring/src/palettes/utils.ts
index d3a51388c7a3d..406da5fb7c998 100644
--- a/packages/kbn-coloring/src/palettes/utils.ts
+++ b/packages/kbn-coloring/src/palettes/utils.ts
@@ -19,6 +19,9 @@ import {
   DEFAULT_PALETTE_NAME,
   DEFAULT_MAX_STOP,
   DEFAULT_MIN_STOP,
+  DEFAULT_FALLBACK_PALETTE,
+  LEGACY_COMPLIMENTARY_PALETTE,
+  COMPLEMENTARY_PALETTE,
 } from './constants';
 
 /** @internal **/
@@ -189,3 +192,14 @@ export function reversePalette(paletteColorRepresentation: ColorStop[] = []) {
     }))
     .reverse();
 }
+
+// This is a helper function used for backwards compatibility
+// for the mispelled complementary palette.
+// https://github.com/elastic/kibana/issues/161194
+export function getActivePaletteName(name?: string): string {
+  let paletteName = name || DEFAULT_FALLBACK_PALETTE;
+  if (paletteName === LEGACY_COMPLIMENTARY_PALETTE) {
+    paletteName = COMPLEMENTARY_PALETTE;
+  }
+  return paletteName;
+}
diff --git a/src/plugins/charts/common/constants.ts b/src/plugins/charts/common/constants.ts
index 6d895dcba26ed..050157dd6cec7 100644
--- a/src/plugins/charts/common/constants.ts
+++ b/src/plugins/charts/common/constants.ts
@@ -13,7 +13,7 @@ export const paletteIds = [
   'custom',
   'status',
   'temperature',
-  'complimentary',
+  'complementary',
   'negative',
   'positive',
   'cool',
diff --git a/src/plugins/charts/public/services/palettes/palettes.tsx b/src/plugins/charts/public/services/palettes/palettes.tsx
index 6cbbb548c7fed..4df7e2bea16a9 100644
--- a/src/plugins/charts/public/services/palettes/palettes.tsx
+++ b/src/plugins/charts/public/services/palettes/palettes.tsx
@@ -273,11 +273,11 @@ export const buildPalettes: (
       title: i18n.translate('charts.palettes.temperatureLabel', { defaultMessage: 'Temperature' }),
       ...buildGradient('temperature', euiPaletteForTemperature),
     },
-    complimentary: {
-      title: i18n.translate('charts.palettes.complimentaryLabel', {
-        defaultMessage: 'Complimentary',
+    complementary: {
+      title: i18n.translate('charts.palettes.complementaryLabel', {
+        defaultMessage: 'Complementary',
       }),
-      ...buildGradient('complimentary', euiPaletteComplementary),
+      ...buildGradient('complementary', euiPaletteComplementary),
     },
     negative: {
       title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }),
diff --git a/src/plugins/charts/public/services/palettes/service.ts b/src/plugins/charts/public/services/palettes/service.ts
index 0608c897f6306..7afa85ab58174 100644
--- a/src/plugins/charts/public/services/palettes/service.ts
+++ b/src/plugins/charts/public/services/palettes/service.ts
@@ -7,6 +7,7 @@
  */
 
 import type { PaletteRegistry, PaletteDefinition } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import type { ExpressionsSetup } from '@kbn/expressions-plugin/public';
 import type { ChartsPluginSetup } from '../..';
 import type { LegacyColorsService } from '../legacy_colors';
@@ -29,7 +30,8 @@ export class PaletteService {
         }
         return {
           get: (name: string) => {
-            return this.palettes![name];
+            const paletteName = getActivePaletteName(name);
+            return this.palettes![paletteName];
           },
           getAll: () => {
             return Object.values(this.palettes!);
diff --git a/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx b/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx
index 29d8924a25077..6155cdbd24cb6 100644
--- a/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx
+++ b/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { PaletteOutput, PaletteRegistry } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -27,6 +28,8 @@ export function PalettePicker<ParamName extends string>({
   paramName,
   setPalette,
 }: PalettePickerProps<ParamName>) {
+  const paletteName = getActivePaletteName(activePalette?.name);
+
   const palettesList: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
@@ -35,10 +38,7 @@ export function PalettePicker<ParamName extends string>({
         value: id,
         title,
         type: 'fixed',
-        palette: getCategoricalColors(
-          10,
-          id === activePalette?.name ? activePalette?.params : undefined
-        ),
+        palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };
     });
 
@@ -61,7 +61,7 @@ export function PalettePicker<ParamName extends string>({
             name: palette?.value ?? DEFAULT_PALETTE,
           });
         }}
-        valueOfSelected={activePalette?.name || DEFAULT_PALETTE}
+        valueOfSelected={paletteName}
         selectionDisplay={'palette'}
       />
     </EuiFormRow>
diff --git a/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx b/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx
index 56d763ad64eb5..cd459de244f84 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx
+++ b/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { PaletteRegistry, PaletteOutput } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { rainbowColors } from '../lib/rainbow_colors';
@@ -23,6 +24,7 @@ export interface PalettePickerProps {
 
 export function PalettePicker({ activePalette, palettes, setPalette, color }: PalettePickerProps) {
   const finalGradientColor = computeGradientFinalColor(color);
+  const paletteName = getActivePaletteName(activePalette?.name);
 
   return (
     <EuiColorPalettePicker
@@ -88,7 +90,7 @@ export function PalettePicker({ activePalette, palettes, setPalette, color }: Pa
           });
         }
       }}
-      valueOfSelected={activePalette?.name || 'default'}
+      valueOfSelected={paletteName}
       selectionDisplay={'palette'}
     />
   );
diff --git a/x-pack/plugins/lens/public/shared_components/palette_picker.tsx b/x-pack/plugins/lens/public/shared_components/palette_picker.tsx
index 51977e551128e..6796eee37a542 100644
--- a/x-pack/plugins/lens/public/shared_components/palette_picker.tsx
+++ b/x-pack/plugins/lens/public/shared_components/palette_picker.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import type { PaletteOutput, PaletteRegistry } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -20,6 +21,8 @@ export function PalettePicker({
   activePalette?: PaletteOutput;
   setPalette: (palette: PaletteOutput) => void;
 }) {
+  const paletteName = getActivePaletteName(activePalette?.name);
+
   const palettesToShow: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
@@ -28,10 +31,7 @@ export function PalettePicker({
         value: id,
         title,
         type: 'fixed',
-        palette: getCategoricalColors(
-          10,
-          id === activePalette?.name ? activePalette?.params : undefined
-        ),
+        palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };
     });
   return (
@@ -51,7 +51,7 @@ export function PalettePicker({
             name: newPalette,
           });
         }}
-        valueOfSelected={activePalette?.name || 'default'}
+        valueOfSelected={paletteName}
         selectionDisplay={'palette'}
       />
     </EuiFormRow>
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index ec38ee91966f7..6b370e22b7617 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "Afficher/Masquer la légende",
     "charts.legend.toggleLegendButtonTitle": "Afficher/Masquer la légende",
     "charts.noDataLabel": "Résultat introuvable",
-    "charts.palettes.complimentaryLabel": "Gratuite",
+    "charts.palettes.complementaryLabel": "Gratuite",
     "charts.palettes.coolLabel": "Froide",
     "charts.palettes.customLabel": "Personnalisée",
     "charts.palettes.defaultPaletteLabel": "Par défaut",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 3c871401f9645..35f8d86556042 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
     "charts.legend.toggleLegendButtonTitle": "凡例を切り替える",
     "charts.noDataLabel": "結果が見つかりませんでした",
-    "charts.palettes.complimentaryLabel": "無料",
+    "charts.palettes.complementaryLabel": "無料",
     "charts.palettes.coolLabel": "Cool",
     "charts.palettes.customLabel": "カスタム",
     "charts.palettes.defaultPaletteLabel": "デフォルト",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f1ba72252316c..da95524f62d6b 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "切换图例",
     "charts.legend.toggleLegendButtonTitle": "切换图例",
     "charts.noDataLabel": "找不到结果",
-    "charts.palettes.complimentaryLabel": "免费",
+    "charts.palettes.complementaryLabel": "免费",
     "charts.palettes.coolLabel": "冷",
     "charts.palettes.customLabel": "定制",
     "charts.palettes.defaultPaletteLabel": "默认",