diff --git a/internal/models/api.go b/internal/models/api.go
index bb0939e60..40f05d180 100644
--- a/internal/models/api.go
+++ b/internal/models/api.go
@@ -27,11 +27,15 @@ type Color struct {
 	Alpha uint8 `json:"alpha"`
 }
 
+func (c *Color) ToString() string {
+	return fmt.Sprintf("rgba(%d,%d,%d,%d)", c.Red, c.Green, c.Blue, c.Alpha)
+}
+
 // LabelColors holds color information for labels that should be colored in the UI
 // every configured label will have a distinct coloring for each value
 type LabelColors struct {
-	Brightness int32 `json:"brightness"`
-	Background Color `json:"background"`
+	Brightness int32  `json:"brightness"`
+	Background string `json:"background"`
 }
 
 // LabelsColorMap is a map of "Label Key" -> "Label Value" -> karmaLabelColors
diff --git a/internal/transform/colors.go b/internal/transform/colors.go
index f7667383d..80e571f52 100644
--- a/internal/transform/colors.go
+++ b/internal/transform/colors.go
@@ -58,7 +58,7 @@ func parseCustomColor(colorStore models.LabelsColorMap, key, val, customColor st
 	}
 	colorStore[key][val] = models.LabelColors{
 		Brightness: brightness,
-		Background: bc,
+		Background: bc.ToString(),
 	}
 }
 
@@ -102,7 +102,7 @@ func ColorLabel(colorStore models.LabelsColorMap, key string, val string) {
 			brightness := rgbToBrightness(bc.Red, bc.Green, bc.Blue)
 			colorStore[key][val] = models.LabelColors{
 				Brightness: brightness,
-				Background: bc,
+				Background: bc.ToString(),
 			}
 		}
 	}