diff --git a/superset/assets/package.json b/superset/assets/package.json
index 900c86be530..f1940c70670 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -51,11 +51,11 @@
     "@data-ui/sparkline": "^0.0.54",
     "@data-ui/theme": "^0.0.62",
     "@data-ui/xy-chart": "^0.0.61",
-    "@superset-ui/chart": "^0.5.0",
-    "@superset-ui/color": "^0.5.0",
+    "@superset-ui/chart": "^0.7.0",
+    "@superset-ui/color": "^0.7.0",
     "@superset-ui/connection": "^0.5.0",
-    "@superset-ui/core": "^0.5.0",
-    "@superset-ui/translation": "^0.5.0",
+    "@superset-ui/core": "^0.7.0",
+    "@superset-ui/translation": "^0.7.0",
     "@vx/legend": "^0.0.170",
     "@vx/responsive": "0.0.172",
     "@vx/scale": "^0.0.165",
diff --git a/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx b/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
index 7c24bd361bc..0db33b93368 100644
--- a/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
@@ -19,10 +19,10 @@ describe('ColorPickerControl', () => {
   beforeEach(() => {
     getCategoricalSchemeRegistry()
       .registerValue('test', new CategoricalScheme({
-        name: 'test',
+        id: 'test',
         colors: ['red', 'green', 'blue'],
       }))
-      .setDefaultSchemeName('test');
+      .setDefaultKey('test');
     wrapper = shallow(<ColorPickerControl {...defaultProps} />);
     inst = wrapper.instance();
   });
diff --git a/superset/assets/src/setup/setupColors.js b/superset/assets/src/setup/setupColors.js
index 84cd53de563..6946593ad0b 100644
--- a/superset/assets/src/setup/setupColors.js
+++ b/superset/assets/src/setup/setupColors.js
@@ -11,15 +11,15 @@ export default function setupColors() {
   const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
   [airbnb, categoricalD3, google, lyft].forEach((group) => {
     group.forEach((scheme) => {
-      categoricalSchemeRegistry.registerValue(scheme.name, scheme);
+      categoricalSchemeRegistry.registerValue(scheme.id, scheme);
     });
   });
-  categoricalSchemeRegistry.setDefaultSchemeName('bnbColors');
+  categoricalSchemeRegistry.setDefaultKey('bnbColors');
 
   const sequentialSchemeRegistry = getSequentialSchemeRegistry();
   [sequentialCommon, sequentialD3].forEach((group) => {
     group.forEach((scheme) => {
-      sequentialSchemeRegistry.registerValue(scheme.name, scheme);
+      sequentialSchemeRegistry.registerValue(scheme.id, scheme);
     });
   });
 }
diff --git a/superset/assets/src/visualizations/Chord/Chord.js b/superset/assets/src/visualizations/Chord/Chord.js
index ece2524434c..05d416e8a3c 100644
--- a/superset/assets/src/visualizations/Chord/Chord.js
+++ b/superset/assets/src/visualizations/Chord/Chord.js
@@ -29,7 +29,7 @@ function Chord(element, props) {
   const div = d3.select(element);
   const { nodes, matrix } = data;
   const f = d3.format(numberFormat);
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   const outerRadius = Math.min(width, height) / 2 - 10;
   const innerRadius = outerRadius - 24;
diff --git a/superset/assets/src/visualizations/Histogram/Histogram.jsx b/superset/assets/src/visualizations/Histogram/Histogram.jsx
index 2b5451990c1..a9359ace9c0 100644
--- a/superset/assets/src/visualizations/Histogram/Histogram.jsx
+++ b/superset/assets/src/visualizations/Histogram/Histogram.jsx
@@ -48,7 +48,7 @@ class CustomHistogram extends React.PureComponent {
       yAxisLabel,
     } = this.props;
 
-    const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+    const colorFn = CategoricalColorNamespace.getScale(colorScheme);
     const keys = data.map(d => d.key);
     const colorScale = scaleOrdinal({
       domain: keys,
diff --git a/superset/assets/src/visualizations/Partition/Partition.js b/superset/assets/src/visualizations/Partition/Partition.js
index 128585976bf..539c024df3a 100644
--- a/superset/assets/src/visualizations/Partition/Partition.js
+++ b/superset/assets/src/visualizations/Partition/Partition.js
@@ -95,7 +95,7 @@ function Icicle(element, props) {
   const hasTime = ['adv_anal', 'time_series'].indexOf(chartType) >= 0;
   const format = d3.format(numberFormat);
   const timeFormat = d3TimeFormatPreset(dateTimeFormat);
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   div.selectAll('*').remove();
   const tooltip = div
diff --git a/superset/assets/src/visualizations/Rose/Rose.js b/superset/assets/src/visualizations/Rose/Rose.js
index 36e2426a517..097c918795a 100644
--- a/superset/assets/src/visualizations/Rose/Rose.js
+++ b/superset/assets/src/visualizations/Rose/Rose.js
@@ -60,7 +60,7 @@ function Rose(element, props) {
   const numGroups = datum[times[0]].length;
   const format = d3.format(numberFormat);
   const timeFormat = d3TimeFormatPreset(dateTimeFormat);
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   d3.select('.nvtooltip').remove();
   div.selectAll('*').remove();
diff --git a/superset/assets/src/visualizations/Sankey/Sankey.js b/superset/assets/src/visualizations/Sankey/Sankey.js
index 5d1bd6b8df3..f80d032136a 100644
--- a/superset/assets/src/visualizations/Sankey/Sankey.js
+++ b/superset/assets/src/visualizations/Sankey/Sankey.js
@@ -47,7 +47,7 @@ function Sankey(element, props) {
     .attr('class', 'sankey-tooltip')
     .style('opacity', 0);
 
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   const sankey = d3Sankey()
     .nodeWidth(15)
diff --git a/superset/assets/src/visualizations/Sunburst/Sunburst.js b/superset/assets/src/visualizations/Sunburst/Sunburst.js
index bfd22f8e2fd..29496a693aa 100644
--- a/superset/assets/src/visualizations/Sunburst/Sunburst.js
+++ b/superset/assets/src/visualizations/Sunburst/Sunburst.js
@@ -66,7 +66,7 @@ function Sunburst(element, props) {
   let arcs;
   let gMiddleText; // dom handles
 
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   // Helper + path gen functions
   const partition = d3.layout.partition()
diff --git a/superset/assets/src/visualizations/Treemap/Treemap.js b/superset/assets/src/visualizations/Treemap/Treemap.js
index d0db1f4d298..17669d60563 100644
--- a/superset/assets/src/visualizations/Treemap/Treemap.js
+++ b/superset/assets/src/visualizations/Treemap/Treemap.js
@@ -68,7 +68,7 @@ function Treemap(element, props) {
   } = props;
   const div = d3.select(element);
   const formatNumber = d3.format(numberFormat);
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
   const data = clone(rawData);
 
   function draw(data, eltWidth, eltHeight) {
diff --git a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
index dd88f70b490..7fe826f7ec9 100644
--- a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
+++ b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
@@ -15,7 +15,7 @@ const { getScale } = CategoricalColorNamespace;
 function getCategories(fd, data) {
   const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
   const fixedColor = [c.r, c.g, c.b, 255 * c.a];
-  const colorFn = getScale(fd.color_scheme).toFunction();
+  const colorFn = getScale(fd.color_scheme);
   const categories = {};
   data.forEach((d) => {
     if (d.cat_color != null && !categories.hasOwnProperty(d.cat_color)) {
@@ -158,7 +158,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
   }
   addColor(data, fd) {
     const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
-    const colorFn = getScale(fd.color_scheme).toFunction();
+    const colorFn = getScale(fd.color_scheme);
     return data.map((d) => {
       let color;
       if (fd.dimension) {
diff --git a/superset/assets/src/visualizations/deckgl/utils.js b/superset/assets/src/visualizations/deckgl/utils.js
index b692f6f69bf..10c936335b9 100644
--- a/superset/assets/src/visualizations/deckgl/utils.js
+++ b/superset/assets/src/visualizations/deckgl/utils.js
@@ -41,7 +41,7 @@ export function getBreakPointColorScaler({
     : null;
   const colorScheme = Array.isArray(linearColorScheme)
     ? new SequentialScheme({
-      name: 'custom',
+      id: 'custom',
       colors: linearColorScheme,
     })
     : getSequentialSchemeRegistry().get(linearColorScheme);
diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
index 7f9788fa755..526406b0187 100644
--- a/superset/assets/src/visualizations/nvd3/NVD3Vis.js
+++ b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
@@ -506,7 +506,7 @@ function nvd3Vis(element, props) {
         });
       }
     } else if (vizType !== 'bullet') {
-      const colorFn = getScale(colorScheme).toFunction();
+      const colorFn = getScale(colorScheme);
       chart.color(d => d.color || colorFn(cleanColorInput(d[colorKey])));
     }
 
diff --git a/superset/assets/src/visualizations/wordcloud/WordCloud.js b/superset/assets/src/visualizations/wordcloud/WordCloud.js
index dccc1c36fb0..0e44c41d585 100644
--- a/superset/assets/src/visualizations/wordcloud/WordCloud.js
+++ b/superset/assets/src/visualizations/wordcloud/WordCloud.js
@@ -48,7 +48,7 @@ function WordCloud(element, props) {
     .fontWeight('bold')
     .fontSize(d => scale(d.size));
 
-  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
 
   function draw(words) {
     chart.selectAll('*').remove();
diff --git a/superset/assets/yarn.lock b/superset/assets/yarn.lock
index e4742cbbd6a..dec37895622 100644
--- a/superset/assets/yarn.lock
+++ b/superset/assets/yarn.lock
@@ -399,18 +399,18 @@
   dependencies:
     array-from "^2.1.1"
 
-"@superset-ui/chart@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/chart/-/chart-0.5.0.tgz#1420ce7b6ac3bf1b06875e5f2541fa98505b5a9b"
+"@superset-ui/chart@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/chart/-/chart-0.7.0.tgz#c297642bf6968e9e24b8de68c595942ad02da949"
   dependencies:
     "@superset-ui/core" "^0.3.0"
     reselect "^4.0.0"
 
-"@superset-ui/color@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/color/-/color-0.5.0.tgz#3064bec063fdf43d568a39b4d9ded352d0aeed55"
+"@superset-ui/color@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/color/-/color-0.7.0.tgz#9d3eca8da493e1241a047f88b06d668b2cd20e3c"
   dependencies:
-    "@superset-ui/core" "^0.5.0"
+    "@superset-ui/core" "^0.7.0"
     d3-scale "^2.1.2"
 
 "@superset-ui/connection@^0.5.0":
@@ -426,15 +426,15 @@
   dependencies:
     lodash "^4.17.11"
 
-"@superset-ui/core@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/core/-/core-0.5.0.tgz#8784465e312cac5015df28d8540d27a2fd6060ba"
+"@superset-ui/core@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/core/-/core-0.7.0.tgz#aa116248d56fd22d57a7bbc9afbdfc0cb367146a"
   dependencies:
     lodash "^4.17.11"
 
-"@superset-ui/translation@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/translation/-/translation-0.5.0.tgz#d02af7be94ac6b9e48d3b09f9f1059b11b2d283d"
+"@superset-ui/translation@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/translation/-/translation-0.7.0.tgz#8b9426a97d523df5aefe9242084264897efe252c"
   dependencies:
     jed "^1.1.1"