diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js
index 20d0f2b78..bd66591b3 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.test.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js
@@ -18,7 +18,7 @@ const MockColors = () => {
   alertStore.data.colors["foo"] = {
     bar: {
       brightness: 200,
-      background: { red: 4, green: 5, blue: 6, alpha: 200 },
+      background: "rgba(4,5,6,200)",
     },
   };
 };
@@ -112,7 +112,7 @@ describe("<FilterInputLabel /> style", () => {
     MockColors();
     const tree = ShallowLabel("=", true, true, 1);
     expect(tree.props().style).toMatchObject({
-      backgroundColor: "rgba(4, 5, 6, 200)",
+      backgroundColor: "rgba(4,5,6,200)",
     });
   });
 
diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.js b/ui/src/Components/Labels/FilteringLabel/index.test.js
index 8b8e62d4c..6a926b9a3 100644
--- a/ui/src/Components/Labels/FilteringLabel/index.test.js
+++ b/ui/src/Components/Labels/FilteringLabel/index.test.js
@@ -65,7 +65,7 @@ describe("<FilteringLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 125,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = MountedFilteringLabel("foo", "bar");
@@ -76,7 +76,7 @@ describe("<FilteringLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 200,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = MountedFilteringLabel("foo", "bar");
diff --git a/ui/src/Components/Labels/HistoryLabel/index.test.js b/ui/src/Components/Labels/HistoryLabel/index.test.js
index 5c6e044fb..ddef51537 100644
--- a/ui/src/Components/Labels/HistoryLabel/index.test.js
+++ b/ui/src/Components/Labels/HistoryLabel/index.test.js
@@ -40,7 +40,7 @@ describe("<HistoryLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 125,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = ShallowHistoryLabel("foo", "=", "bar").find(
@@ -53,7 +53,7 @@ describe("<HistoryLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 200,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = ShallowHistoryLabel("foo", "=", "bar").find(
diff --git a/ui/src/Components/Labels/StaticLabel/index.test.js b/ui/src/Components/Labels/StaticLabel/index.test.js
index 3b54a9766..30ec14f15 100644
--- a/ui/src/Components/Labels/StaticLabel/index.test.js
+++ b/ui/src/Components/Labels/StaticLabel/index.test.js
@@ -28,7 +28,7 @@ describe("<StaticLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 125,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = MountedStaticLabel();
@@ -41,7 +41,7 @@ describe("<StaticLabel />", () => {
     alertStore.data.colors["foo"] = {
       bar: {
         brightness: 200,
-        background: { red: 4, green: 5, blue: 6, alpha: 200 },
+        background: "rgba(4,5,6,200)",
       },
     };
     const tree = MountedStaticLabel();
diff --git a/ui/src/Components/Labels/Utils.js b/ui/src/Components/Labels/Utils.js
index a113c8a39..698b929f0 100644
--- a/ui/src/Components/Labels/Utils.js
+++ b/ui/src/Components/Labels/Utils.js
@@ -31,14 +31,7 @@ const GetClassAndStyle = (alertStore, name, value, extraClass, baseClass) => {
   } else {
     const c = alertStore.data.getColorData(name, value);
     if (c) {
-      // if there's color information use it
-      data.style["backgroundColor"] = `rgba(${[
-        c.background.red,
-        c.background.green,
-        c.background.blue,
-        c.background.alpha,
-      ].join(", ")})`;
-
+      data.style["backgroundColor"] = c.background;
       data.colorClassNames.push(
         isBackgroundDark(c.brightness)
           ? "components-label-dark"
diff --git a/ui/src/Components/NavBar/index.stories.js b/ui/src/Components/NavBar/index.stories.js
index c573f11d9..704096f16 100644
--- a/ui/src/Components/NavBar/index.stories.js
+++ b/ui/src/Components/NavBar/index.stories.js
@@ -31,13 +31,13 @@ storiesOf("NavBar", module).add("NavBar", () => {
     cluster: {
       staging: {
         brightness: 205,
-        background: { red: 246, green: 176, blue: 247, alpha: 255 },
+        background: "rgba(246,176,247,255)",
       },
     },
     region: {
       AF: {
         brightness: 111,
-        background: { red: 115, green: 101, blue: 152, alpha: 255 },
+        background: "rgba(115,101,152,255)",
       },
     },
   };
diff --git a/ui/src/__mocks__/Stories.js b/ui/src/__mocks__/Stories.js
index 5822aabf3..9d2e43a85 100644
--- a/ui/src/__mocks__/Stories.js
+++ b/ui/src/__mocks__/Stories.js
@@ -76,33 +76,33 @@ const MockGrid = (alertStore) => {
     group: {
       group1: {
         brightness: 50,
-        background: { red: 178, green: 55, blue: 247, alpha: 255 },
+        background: "rgba(178,55,247,255)",
       },
       group2: {
         brightness: 50,
-        background: { red: 200, green: 100, blue: 66, alpha: 255 },
+        background: "rgba(200,100,66,255)",
       },
       group3: {
         brightness: 205,
-        background: { red: 246, green: 176, blue: 247, alpha: 255 },
+        background: "rgba(246,176,247,255)",
       },
       group4: {
         brightness: 111,
-        background: { red: 115, green: 101, blue: 152, alpha: 255 },
+        background: "rgba(115,101,152,255)",
       },
     },
     instance: {
       instance1: {
         brightness: 50,
-        background: { red: 111, green: 65, blue: 40, alpha: 255 },
+        background: "rgba(111,65,40,255)",
       },
       instance2: {
         brightness: 50,
-        background: { red: 66, green: 99, blue: 66, alpha: 255 },
+        background: "rgba(66,99,66,255)",
       },
       instance3: {
         brightness: 150,
-        background: { red: 66, green: 250, blue: 123, alpha: 255 },
+        background: "rgba(66,250,123,255)",
       },
     },
   };