diff --git a/components/theme/__tests__/token.test.tsx b/components/theme/__tests__/token.test.tsx
index afa825618b1f..b6900f1e2d60 100644
--- a/components/theme/__tests__/token.test.tsx
+++ b/components/theme/__tests__/token.test.tsx
@@ -37,6 +37,7 @@ describe('Theme', () => {
     expect(result.current!.token).toEqual(
       expect.objectContaining({
         colorPrimary: '#1677ff',
+        'blue-6': '#1677ff',
       }),
     );
   });
diff --git a/components/theme/interface/index.ts b/components/theme/interface/index.ts
index 8091dd14389f..274fab0f7f03 100644
--- a/components/theme/interface/index.ts
+++ b/components/theme/interface/index.ts
@@ -27,6 +27,7 @@ export type {
 } from './maps';
 export { PresetColors } from './presetColors';
 export type {
+  LegacyColorPalettes,
   ColorPalettes,
   PresetColorKey,
   PresetColorType,
diff --git a/components/theme/interface/maps/index.ts b/components/theme/interface/maps/index.ts
index a67c579615db..29d3f53d7411 100644
--- a/components/theme/interface/maps/index.ts
+++ b/components/theme/interface/maps/index.ts
@@ -1,4 +1,4 @@
-import type { ColorPalettes } from '../presetColors';
+import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
 import type { SeedToken } from '../seeds';
 import type { ColorMapToken } from './colors';
 import type { FontMapToken } from './font';
@@ -37,6 +37,7 @@ export interface CommonMapToken extends StyleMapToken {
 export interface MapToken
   extends SeedToken,
     ColorPalettes,
+    LegacyColorPalettes,
     ColorMapToken,
     SizeMapToken,
     HeightMapToken,
diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts
index 7adcc1a814b1..e160935e6bcd 100644
--- a/components/theme/interface/presetColors.ts
+++ b/components/theme/interface/presetColors.ts
@@ -14,12 +14,19 @@ export const PresetColors = [
   'gold',
 ] as const;
 
-export type PresetColorKey = typeof PresetColors[number];
+export type PresetColorKey = (typeof PresetColors)[number];
 
 export type PresetColorType = Record<PresetColorKey, string>;
 
 type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
+export type LegacyColorPalettes = {
+  /**
+   * @deprecated
+   */
+  [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
+};
+
 export type ColorPalettes = {
   [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
 };
diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts
index 684f0f14e2ca..0bdc5d0a1624 100644
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@@ -1,6 +1,12 @@
 import { generate } from '@ant-design/colors';
 import type { DerivativeFunc } from '@ant-design/cssinjs';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+  ColorPalettes,
+  LegacyColorPalettes,
+  MapToken,
+  PresetColorType,
+  SeedToken,
+} from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
@@ -12,17 +18,21 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
       const colors = generate(token[colorKey], { theme: 'dark' });
 
       return new Array(10).fill(1).reduce((prev, _, i) => {
+        prev[`${colorKey}-${i + 1}`] = colors[i];
         prev[`${colorKey}${i + 1}`] = colors[i];
         return prev;
-      }, {}) as ColorPalettes;
+      }, {}) as ColorPalettes & LegacyColorPalettes;
     })
-    .reduce((prev, cur) => {
-      prev = {
-        ...prev,
-        ...cur,
-      };
-      return prev;
-    }, {} as ColorPalettes);
+    .reduce(
+      (prev, cur) => {
+        prev = {
+          ...prev,
+          ...cur,
+        };
+        return prev;
+      },
+      {} as ColorPalettes & LegacyColorPalettes,
+    );
 
   const mergedMapToken = mapToken ?? defaultAlgorithm(token);
 
diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts
index 08d398a0f704..ec5d07b9ed28 100644
--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@@ -1,7 +1,13 @@
 import { generate } from '@ant-design/colors';
 import genControlHeight from '../shared/genControlHeight';
 import genSizeMapToken from '../shared/genSizeMapToken';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+  ColorPalettes,
+  LegacyColorPalettes,
+  MapToken,
+  PresetColorType,
+  SeedToken,
+} from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
@@ -14,17 +20,21 @@ export default function derivative(token: SeedToken): MapToken {
       const colors = generate(token[colorKey]);
 
       return new Array(10).fill(1).reduce((prev, _, i) => {
+        prev[`${colorKey}-${i + 1}`] = colors[i];
         prev[`${colorKey}${i + 1}`] = colors[i];
         return prev;
-      }, {}) as ColorPalettes;
+      }, {}) as ColorPalettes & LegacyColorPalettes;
     })
-    .reduce((prev, cur) => {
-      prev = {
-        ...prev,
-        ...cur,
-      };
-      return prev;
-    }, {} as ColorPalettes);
+    .reduce(
+      (prev, cur) => {
+        prev = {
+          ...prev,
+          ...cur,
+        };
+        return prev;
+      },
+      {} as ColorPalettes & LegacyColorPalettes,
+    );
 
   return {
     ...token,