diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx
index a010d70c1..de2a60365 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx
@@ -18,10 +18,11 @@
  */
 import { GridLayer } from 'deck.gl';
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, CategoricalColorNamespace } from '@superset-ui/core';
 
 import { commonLayerProps, getAggFunc } from '../common';
 import sandboxedEval from '../../utils/sandbox';
+import { hexToRGB } from '../../utils/colors';
 import { createDeckGLComponent } from '../../factory';
 import TooltipRow from '../../TooltipRow';
 
@@ -42,11 +43,9 @@ function setTooltipContent(o) {
 
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
   const fd = formData;
-  const c = fd.color_picker;
-  let data = payload.data.features.map(d => ({
-    ...d,
-    color: [c.r, c.g, c.b, 255 * c.a],
-  }));
+  const colorScale = CategoricalColorNamespace.getScale(fd.color_scheme);
+  const colorRange = colorScale.range().map(color => hexToRGB(color));
+  let data = payload.data.features;
 
   if (fd.js_data_mutator) {
     // Applying user defined data mutator if defined
@@ -61,9 +60,8 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     data,
     pickable: true,
     cellSize: fd.grid_size,
-    minColor: [0, 0, 0, 0],
     extruded: fd.extruded,
-    maxColor: [c.r, c.g, c.b, 255 * c.a],
+    colorRange,
     outline: false,
     getElevationValue: aggFunc,
     getColorValue: aggFunc,
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts
index bd0f797ba..9b8e33d73 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts
@@ -54,8 +54,10 @@ const config: ControlPanelConfig = {
       label: t('Map'),
       controlSetRows: [
         [mapboxStyle, viewport],
-        ['color_picker', autozoom],
-        [gridSize, extruded],
+        ['color_scheme'],
+        [autozoom],
+        [gridSize],
+        [extruded],
       ],
     },
     {
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx
index 46b3c5997..cd9913802 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx
@@ -18,10 +18,11 @@
  */
 import { HexagonLayer } from 'deck.gl';
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, CategoricalColorNamespace } from '@superset-ui/core';
 
 import { commonLayerProps, getAggFunc } from '../common';
 import sandboxedEval from '../../utils/sandbox';
+import { hexToRGB } from '../../utils/colors';
 import { createDeckGLComponent } from '../../factory';
 import TooltipRow from '../../TooltipRow';
 
@@ -42,11 +43,9 @@ function setTooltipContent(o) {
 
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
   const fd = formData;
-  const c = fd.color_picker;
-  let data = payload.data.features.map(d => ({
-    ...d,
-    color: [c.r, c.g, c.b, 255 * c.a],
-  }));
+  const colorScale = CategoricalColorNamespace.getScale(fd.color_scheme);
+  const colorRange = colorScale.range().map(color => hexToRGB(color));
+  let data = payload.data.features;
 
   if (fd.js_data_mutator) {
     // Applying user defined data mutator if defined
@@ -60,9 +59,8 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     data,
     pickable: true,
     radius: fd.grid_size,
-    minColor: [0, 0, 0, 0],
     extruded: fd.extruded,
-    maxColor: [c.r, c.g, c.b, 255 * c.a],
+    colorRange,
     outline: false,
     getElevationValue: aggFunc,
     getColorValue: aggFunc,
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts
index 53c816ae8..eee7c341a 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts
@@ -55,7 +55,7 @@ const config: ControlPanelConfig = {
       label: t('Map'),
       controlSetRows: [
         [mapboxStyle, viewport],
-        ['color_picker'],
+        ['color_scheme'],
         [autozoom],
         [gridSize],
         [extruded],