diff --git a/superset-frontend/packages/superset-ui-core/src/color/index.ts b/superset-frontend/packages/superset-ui-core/src/color/index.ts
index f81fcbba72b64..0f7ce6194c6e3 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/index.ts
@@ -22,9 +22,13 @@ import * as CategoricalColorNamespace from './CategoricalColorNamespace';
 export { CategoricalColorNamespace };
 export { default as CategoricalColorScale } from './CategoricalColorScale';
 export { default as CategoricalScheme } from './CategoricalScheme';
+export * from './CategoricalScheme';
 export { default as getCategoricalSchemeRegistry } from './CategoricalSchemeRegistrySingleton';
+export { default as ColorScheme } from './ColorScheme';
+export * from './ColorScheme';
 export { default as getSequentialSchemeRegistry } from './SequentialSchemeRegistrySingleton';
 export { default as SequentialScheme } from './SequentialScheme';
+export * from './SequentialScheme';
 export { default as ColorSchemeRegistry } from './ColorSchemeRegistry';
 export * from './colorSchemes';
 export * from './utils';
diff --git a/superset-frontend/src/setup/setupColors.ts b/superset-frontend/src/setup/setupColors.ts
index 7865e4b2a0ff6..01122243ce0eb 100644
--- a/superset-frontend/src/setup/setupColors.ts
+++ b/superset-frontend/src/setup/setupColors.ts
@@ -18,9 +18,12 @@
  */
 import {
   CategoricalScheme,
+  ColorScheme,
+  ColorSchemeConfig,
   getCategoricalSchemeRegistry,
   getSequentialSchemeRegistry,
   SequentialScheme,
+  SequentialSchemeConfig,
   CategoricalAirbnb,
   CategoricalD3,
   CategoricalEcharts,
@@ -33,9 +36,9 @@ import {
   ColorSchemeRegistry,
 } from '@superset-ui/core';
 
-function registerColorSchemes(
-  registry: ColorSchemeRegistry<unknown>,
-  colorSchemes: (CategoricalScheme | SequentialScheme)[],
+function registerColorSchemes<T extends ColorScheme>(
+  registry: ColorSchemeRegistry<T>,
+  colorSchemes: T[],
   standardDefaultKey: string,
 ) {
   colorSchemes.forEach(scheme => {
@@ -48,9 +51,15 @@ function registerColorSchemes(
 }
 
 export default function setupColors(
-  extraCategoricalColorSchemes: CategoricalScheme[] = [],
-  extraSequentialColorSchemes: SequentialScheme[] = [],
+  extraCategoricalColorSchemeConfigs: ColorSchemeConfig[] = [],
+  extraSequentialColorSchemeConfigs: SequentialSchemeConfig[] = [],
 ) {
+  const extraCategoricalColorSchemes = extraCategoricalColorSchemeConfigs.map(
+    config => new CategoricalScheme(config),
+  );
+  const extraSequentialColorSchemes = extraSequentialColorSchemeConfigs.map(
+    config => new SequentialScheme(config),
+  );
   registerColorSchemes(
     // @ts-ignore
     getCategoricalSchemeRegistry(),