diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
index e15dc22d2b659..37729459f8dac 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import memoizeOne from 'memoize-one';
-import { DataRecord } from '@superset-ui/core';
+import { addAlpha, DataRecord } from '@superset-ui/core';
 import {
   ColorFormatters,
   COMPARATOR,
@@ -28,9 +28,6 @@ import {
 export const round = (num: number, precision = 0) =>
   Number(`${Math.round(Number(`${num}e+${precision}`))}e-${precision}`);
 
-export const rgbToRgba = (rgb: string, alpha: number) =>
-  rgb.replace(/rgb/i, 'rgba').replace(/\)/i, `,${alpha})`);
-
 const MIN_OPACITY_BOUNDED = 0.05;
 const MIN_OPACITY_UNBOUNDED = 0;
 const MAX_OPACITY = 1;
@@ -174,7 +171,7 @@ export const getColorFunction = (
     const compareResult = comparatorFunction(value, columnValues);
     if (compareResult === false) return undefined;
     const { cutoffValue, extremeValue } = compareResult;
-    return rgbToRgba(
+    return addAlpha(
       colorScheme,
       getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity),
     );
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
index bc69533c92555..ecda5fd03259d 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
@@ -20,7 +20,6 @@ import { configure } from '@superset-ui/core';
 import {
   COMPARATOR,
   getOpacity,
-  rgbToRgba,
   round,
   getColorFormatters,
   getColorFunction,
@@ -54,12 +53,6 @@ describe('getOpacity', () => {
   });
 });
 
-describe('rgba', () => {
-  it('returns correct rgba value', () => {
-    expect(rgbToRgba('rgb(255,0,0)', 0.5)).toEqual('rgba(255,0,0,0.5)');
-  });
-});
-
 describe('getColorFunction()', () => {
   it('getColorFunction GREATER_THAN', () => {
     const colorFunction = getColorFunction(