diff --git a/packages/superset-ui-color/src/CategoricalColorNamespace.js b/packages/superset-ui-color/src/CategoricalColorNamespace.js
index eb52ddfa68..38a4ffae99 100644
--- a/packages/superset-ui-color/src/CategoricalColorNamespace.js
+++ b/packages/superset-ui-color/src/CategoricalColorNamespace.js
@@ -9,17 +9,17 @@ export default class CategoricalColorNamespace {
     this.forcedItems = {};
   }
 
-  getScale(schemeName) {
-    const name = schemeName || getCategoricalSchemeRegistry().getDefaultKey();
-    const scale = this.scales[name];
+  getScale(schemeId) {
+    const id = schemeId || getCategoricalSchemeRegistry().getDefaultKey();
+    const scale = this.scales[id];
     if (scale) {
       return scale;
     }
     const newScale = new CategoricalColorScale(
-      getCategoricalSchemeRegistry().get(name).colors,
+      getCategoricalSchemeRegistry().get(id).colors,
       this.forcedItems,
     );
-    this.scales[name] = newScale;
+    this.scales[id] = newScale;
 
     return newScale;
   }
@@ -52,9 +52,9 @@ export function getNamespace(name = DEFAULT_NAMESPACE) {
   return newInstance;
 }
 
-export function getColor(value, scheme, namespace) {
+export function getColor(value, schemeId, namespace) {
   return getNamespace(namespace)
-    .getScale(scheme)
+    .getScale(schemeId)
     .getColor(value);
 }
 
diff --git a/packages/superset-ui-color/src/ColorScheme.js b/packages/superset-ui-color/src/ColorScheme.js
index d64690796f..bd01c6739e 100644
--- a/packages/superset-ui-color/src/ColorScheme.js
+++ b/packages/superset-ui-color/src/ColorScheme.js
@@ -1,14 +1,9 @@
 import { isRequired } from '@superset-ui/core';
 
 export default class ColorScheme {
-  constructor({
-    name = isRequired('name'),
-    label,
-    colors = isRequired('colors'),
-    description = '',
-  }) {
-    this.name = name;
-    this.label = label || name;
+  constructor({ colors = isRequired('colors'), description = '', id = isRequired('id'), label }) {
+    this.id = id;
+    this.label = label || id;
     this.colors = colors;
     this.description = description;
   }
diff --git a/packages/superset-ui-color/src/colorSchemes/categorical/airbnb.js b/packages/superset-ui-color/src/colorSchemes/categorical/airbnb.js
index faa5871ac4..ce4275cb6a 100644
--- a/packages/superset-ui-color/src/colorSchemes/categorical/airbnb.js
+++ b/packages/superset-ui-color/src/colorSchemes/categorical/airbnb.js
@@ -4,7 +4,7 @@ import CategoricalScheme from '../../CategoricalScheme';
 
 const schemes = [
   {
-    name: 'bnbColors',
+    id: 'bnbColors',
     colors: [
       '#ff5a5f', // rausch
       '#7b0051', // hackb
diff --git a/packages/superset-ui-color/src/colorSchemes/categorical/d3.js b/packages/superset-ui-color/src/colorSchemes/categorical/d3.js
index 92a4021fac..47ef49da0b 100644
--- a/packages/superset-ui-color/src/colorSchemes/categorical/d3.js
+++ b/packages/superset-ui-color/src/colorSchemes/categorical/d3.js
@@ -4,7 +4,7 @@ import CategoricalScheme from '../../CategoricalScheme';
 
 const schemes = [
   {
-    name: 'd3Category10',
+    id: 'd3Category10',
     colors: [
       '#1f77b4',
       '#ff7f0e',
@@ -19,7 +19,7 @@ const schemes = [
     ],
   },
   {
-    name: 'd3Category20',
+    id: 'd3Category20',
     colors: [
       '#1f77b4',
       '#aec7e8',
@@ -44,7 +44,7 @@ const schemes = [
     ],
   },
   {
-    name: 'd3Category20b',
+    id: 'd3Category20b',
     colors: [
       '#393b79',
       '#5254a3',
@@ -69,7 +69,7 @@ const schemes = [
     ],
   },
   {
-    name: 'd3Category20c',
+    id: 'd3Category20c',
     colors: [
       '#3182bd',
       '#6baed6',
diff --git a/packages/superset-ui-color/src/colorSchemes/categorical/google.js b/packages/superset-ui-color/src/colorSchemes/categorical/google.js
index fb81740f76..f40e771a9d 100644
--- a/packages/superset-ui-color/src/colorSchemes/categorical/google.js
+++ b/packages/superset-ui-color/src/colorSchemes/categorical/google.js
@@ -4,7 +4,7 @@ import CategoricalScheme from '../../CategoricalScheme';
 
 const schemes = [
   {
-    name: 'googleCategory10c',
+    id: 'googleCategory10c',
     colors: [
       '#3366cc',
       '#dc3912',
@@ -19,7 +19,7 @@ const schemes = [
     ],
   },
   {
-    name: 'googleCategory20c',
+    id: 'googleCategory20c',
     colors: [
       '#3366cc',
       '#dc3912',
diff --git a/packages/superset-ui-color/src/colorSchemes/categorical/lyft.js b/packages/superset-ui-color/src/colorSchemes/categorical/lyft.js
index bf272e5449..f9881ae310 100644
--- a/packages/superset-ui-color/src/colorSchemes/categorical/lyft.js
+++ b/packages/superset-ui-color/src/colorSchemes/categorical/lyft.js
@@ -4,7 +4,7 @@ import CategoricalScheme from '../../CategoricalScheme';
 
 const schemes = [
   {
-    name: 'lyftColors',
+    id: 'lyftColors',
     colors: [
       '#EA0B8C',
       '#6C838E',
diff --git a/packages/superset-ui-color/src/colorSchemes/sequential/common.js b/packages/superset-ui-color/src/colorSchemes/sequential/common.js
index e3fb318935..9ce414021d 100644
--- a/packages/superset-ui-color/src/colorSchemes/sequential/common.js
+++ b/packages/superset-ui-color/src/colorSchemes/sequential/common.js
@@ -4,61 +4,61 @@ import SequentialScheme from '../../SequentialScheme';
 
 const schemes = [
   {
-    name: 'blue_white_yellow',
+    id: 'blue_white_yellow',
     label: 'blue/white/yellow',
     colors: ['#00d1c1', 'white', '#ffb400'],
   },
   {
-    name: 'fire',
+    id: 'fire',
     colors: ['white', 'yellow', 'red', 'black'],
   },
   {
-    name: 'white_black',
+    id: 'white_black',
     label: 'white/black',
     colors: ['white', 'black'],
   },
   {
-    name: 'black_white',
+    id: 'black_white',
     label: 'black/white',
     colors: ['black', 'white'],
   },
   {
-    name: 'dark_blue',
+    id: 'dark_blue',
     label: 'dark blues',
     colors: ['#EBF5F8', '#6BB1CC', '#357E9B', '#1B4150', '#092935'],
   },
   {
-    name: 'pink_grey',
+    id: 'pink_grey',
     label: 'pink/grey',
     isDiverging: true,
     colors: ['#E70B81', '#FAFAFA', '#666666'],
   },
   {
-    name: 'greens',
+    id: 'greens',
     colors: ['#ffffcc', '#78c679', '#006837'],
   },
   {
-    name: 'purples',
+    id: 'purples',
     colors: ['#f2f0f7', '#9e9ac8', '#54278f'],
   },
   {
-    name: 'oranges',
+    id: 'oranges',
     colors: ['#fef0d9', '#fc8d59', '#b30000'],
   },
   {
-    name: 'red_yellow_blue',
+    id: 'red_yellow_blue',
     label: 'red/yellow/blue',
     isDiverging: true,
     colors: ['#d7191c', '#fdae61', '#ffffbf', '#abd9e9', '#2c7bb6'],
   },
   {
-    name: 'brown_white_green',
+    id: 'brown_white_green',
     label: 'brown/white/green',
     isDiverging: true,
     colors: ['#a6611a', '#dfc27d', '#f5f5f5', '#80cdc1', '#018571'],
   },
   {
-    name: 'purple_white_green',
+    id: 'purple_white_green',
     label: 'purple/white/green',
     isDiverging: true,
     colors: ['#7b3294', '#c2a5cf', '#f7f7f7', '#a6dba0', '#008837'],
diff --git a/packages/superset-ui-color/src/colorSchemes/sequential/d3.js b/packages/superset-ui-color/src/colorSchemes/sequential/d3.js
index 9a2a00d9ae..e243691239 100644
--- a/packages/superset-ui-color/src/colorSchemes/sequential/d3.js
+++ b/packages/superset-ui-color/src/colorSchemes/sequential/d3.js
@@ -4,7 +4,7 @@ import SequentialScheme from '../../SequentialScheme';
 
 const schemes = [
   {
-    name: 'schemeBrBG',
+    id: 'schemeBrBG',
     label: 'brown/green',
     isDiverging: true,
     colors: [
@@ -21,7 +21,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePRGn',
+    id: 'schemePRGn',
     label: 'purple/green',
     isDiverging: true,
     colors: [
@@ -38,7 +38,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePiYG',
+    id: 'schemePiYG',
     label: 'pink/green',
     isDiverging: true,
     colors: [
@@ -55,7 +55,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePuOr',
+    id: 'schemePuOr',
     label: 'purple/orange',
     isDiverging: true,
     colors: [
@@ -72,7 +72,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeRdBu',
+    id: 'schemeRdBu',
     label: 'red/blue',
     isDiverging: true,
     colors: [
@@ -89,7 +89,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeRdGy',
+    id: 'schemeRdGy',
     label: 'red/gray/black',
     isDiverging: true,
     colors: [
@@ -106,7 +106,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeRdYlBu',
+    id: 'schemeRdYlBu',
     label: 'red/yellow/blue',
     colors: [
       '#a50026',
@@ -123,7 +123,7 @@ const schemes = [
     isDiverging: true,
   },
   {
-    name: 'schemeRdYlGn',
+    id: 'schemeRdYlGn',
     label: 'red/yellow/green',
     colors: [
       '#a50026',
@@ -140,7 +140,7 @@ const schemes = [
     isDiverging: true,
   },
   {
-    name: 'schemeSpectral',
+    id: 'schemeSpectral',
     label: 'rainbow',
     colors: [
       '#9e0142',
@@ -156,7 +156,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeBlues',
+    id: 'schemeBlues',
     label: 'blues',
     colors: [
       '#b5d4e9',
@@ -170,7 +170,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeGreens',
+    id: 'schemeGreens',
     label: 'greens',
     colors: [
       '#b7e2b1',
@@ -184,7 +184,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeGrays',
+    id: 'schemeGrays',
     label: 'grays',
     colors: [
       '#cecece',
@@ -198,7 +198,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeOranges',
+    id: 'schemeOranges',
     label: 'oranges',
     colors: [
       '#fdc28c',
@@ -212,7 +212,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePurples',
+    id: 'schemePurples',
     label: 'purples',
     colors: [
       '#cecee5',
@@ -226,7 +226,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeReds',
+    id: 'schemeReds',
     label: 'reds',
     colors: [
       '#fcaa8e',
@@ -240,7 +240,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeViridis',
+    id: 'schemeViridis',
     label: 'Viridis',
     colors: [
       '#482475',
@@ -256,7 +256,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeInferno',
+    id: 'schemeInferno',
     label: 'Inferno',
     colors: [
       '#160b39',
@@ -272,7 +272,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeMagma',
+    id: 'schemeMagma',
     label: 'Magma',
     colors: [
       '#140e36',
@@ -288,7 +288,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeWarm',
+    id: 'schemeWarm',
     label: 'Warm',
     colors: [
       '#963db3',
@@ -304,7 +304,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeCool',
+    id: 'schemeCool',
     label: 'Cool',
     colors: [
       '#6054c8',
@@ -320,7 +320,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeCubehelixDefault',
+    id: 'schemeCubehelixDefault',
     label: 'Cube Helix',
     colors: [
       '#1a1530',
@@ -336,7 +336,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeBuGn',
+    id: 'schemeBuGn',
     label: 'blue/green',
     colors: [
       '#b7e4da',
@@ -350,7 +350,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeBuPu',
+    id: 'schemeBuPu',
     label: 'blue/purple',
     colors: [
       '#b2cae1',
@@ -364,7 +364,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeGnBu',
+    id: 'schemeGnBu',
     label: 'green/blue',
     colors: [
       '#bde5bf',
@@ -378,7 +378,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeOrRd',
+    id: 'schemeOrRd',
     label: 'orange/red',
     colors: [
       '#fdca94',
@@ -392,7 +392,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePuBuGn',
+    id: 'schemePuBuGn',
     label: 'purple/blue/green',
     colors: [
       '#bec9e2',
@@ -406,7 +406,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePuBu',
+    id: 'schemePuBu',
     label: 'purple/blue',
     colors: [
       '#bfc9e2',
@@ -420,7 +420,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemePuRd',
+    id: 'schemePuRd',
     label: 'purple/red',
     colors: [
       '#d0aad2',
@@ -434,7 +434,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeRdPu',
+    id: 'schemeRdPu',
     label: 'red/purple',
     colors: [
       '#fbb5bc',
@@ -448,7 +448,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeYlGnBu',
+    id: 'schemeYlGnBu',
     label: 'yellow/green/blue',
     colors: [
       '#d5eeb3',
@@ -463,7 +463,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeYlGn',
+    id: 'schemeYlGn',
     label: 'yellow/green',
     colors: [
       '#e4f4ac',
@@ -478,7 +478,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeYlOrBr',
+    id: 'schemeYlOrBr',
     label: 'yellow/orange/brown',
     colors: [
       '#feeaa1',
@@ -493,7 +493,7 @@ const schemes = [
     ],
   },
   {
-    name: 'schemeYlOrRd',
+    id: 'schemeYlOrRd',
     label: 'yellow/orange/red',
     colors: [
       '#fee087',
diff --git a/packages/superset-ui-color/test/CategoricalColorNameSpace.test.js b/packages/superset-ui-color/test/CategoricalColorNameSpace.test.js
index 6d45787d63..c7d92ad33c 100644
--- a/packages/superset-ui-color/test/CategoricalColorNameSpace.test.js
+++ b/packages/superset-ui-color/test/CategoricalColorNameSpace.test.js
@@ -13,14 +13,14 @@ describe('CategoricalColorNamespace', () => {
       .registerValue(
         'testColors',
         new CategoricalScheme({
-          name: 'testColors',
+          id: 'testColors',
           colors: ['red', 'green', 'blue'],
         }),
       )
       .registerValue(
         'testColors2',
         new CategoricalScheme({
-          name: 'testColors2',
+          id: 'testColors2',
           colors: ['red', 'green', 'blue'],
         }),
       );
diff --git a/packages/superset-ui-color/test/ColorScheme.test.js b/packages/superset-ui-color/test/ColorScheme.test.js
index 2bb1047803..c400d55a50 100644
--- a/packages/superset-ui-color/test/ColorScheme.test.js
+++ b/packages/superset-ui-color/test/ColorScheme.test.js
@@ -4,11 +4,11 @@ describe('ColorScheme', () => {
   describe('new ColorScheme()', () => {
     it('requires name and color', () => {
       expect(() => new ColorScheme()).toThrow();
-      expect(() => new ColorScheme({ name: 'test' })).toThrow();
+      expect(() => new ColorScheme({ id: 'test' })).toThrow();
       expect(() => new ColorScheme({ colors: ['red', 'blue'] })).toThrow();
     });
     it('returns an instance of ColorScheme', () => {
-      const scheme = new ColorScheme({ name: 'test', colors: ['red', 'blue'] });
+      const scheme = new ColorScheme({ id: 'test', colors: ['red', 'blue'] });
       expect(scheme).toBeInstanceOf(ColorScheme);
     });
   });
diff --git a/packages/superset-ui-color/test/SequentialScheme.test.js b/packages/superset-ui-color/test/SequentialScheme.test.js
index dc7bfdb991..c05ab1dd8c 100644
--- a/packages/superset-ui-color/test/SequentialScheme.test.js
+++ b/packages/superset-ui-color/test/SequentialScheme.test.js
@@ -2,7 +2,7 @@ import SequentialScheme from '../src/SequentialScheme';
 
 describe('SequentialScheme', () => {
   const scheme = new SequentialScheme({
-    name: 'white to black',
+    id: 'white to black',
     colors: ['#fff', '#000'],
   });
   it('exists', () => {
@@ -11,7 +11,7 @@ describe('SequentialScheme', () => {
   describe('new SequentialScheme()', () => {
     it('creates new instance', () => {
       const scheme2 = new SequentialScheme({
-        name: 'white to black',
+        id: 'white to black',
         colors: ['#fff', '#000'],
       });
       expect(scheme2).toBeInstanceOf(SequentialScheme);
diff --git a/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx b/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx
index 7233e94002..b06a30967e 100644
--- a/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx
+++ b/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx
@@ -7,10 +7,10 @@ export default function RenderPalettes({ title, palettes }) {
       {title && <h2>{title}</h2>}
       <table>
         <tbody>
-          {palettes.map(({ colors, name, label }) => (
-            <tr key={label || name}>
+          {palettes.map(({ colors, id, label }) => (
+            <tr key={id}>
               <td className="palette-label">
-                <strong>{label || name}</strong>
+                <strong>{label}</strong>
               </td>
               <td>
                 <div className="palette-container">