diff --git a/pkger/clone_resource.go b/pkger/clone_resource.go
index aa38611818..b49533df85 100644
--- a/pkger/clone_resource.go
+++ b/pkger/clone_resource.go
@@ -1007,6 +1007,7 @@ func convertColors(iColors []influxdb.ViewColor) colors {
 	out := make(colors, 0, len(iColors))
 	for _, ic := range iColors {
 		out = append(out, &color{
+			ID:    ic.ID,
 			Name:  ic.Name,
 			Type:  ic.Type,
 			Hex:   ic.Hex,
diff --git a/pkger/parser.go b/pkger/parser.go
index ce7ff6d634..9f54ae3ac7 100644
--- a/pkger/parser.go
+++ b/pkger/parser.go
@@ -1506,6 +1506,7 @@ func (p *Template) parseChart(dashMetaName string, chartIdx int, r Resource) (*c
 	} else {
 		for _, rc := range r.slcResource(fieldChartColors) {
 			c.Colors = append(c.Colors, &color{
+				ID:    rc.stringShort("id"),
 				Name:  rc.Name(),
 				Type:  rc.stringShort(fieldType),
 				Hex:   rc.stringShort(fieldColorHex),
diff --git a/pkger/parser_models.go b/pkger/parser_models.go
index a43b7c4555..e63f011865 100644
--- a/pkger/parser_models.go
+++ b/pkger/parser_models.go
@@ -977,6 +977,7 @@ const (
 )
 
 type color struct {
+	ID   string `json:"id,omitempty" yaml:"id,omitempty"`
 	Name string `json:"name,omitempty" yaml:"name,omitempty"`
 	Type string `json:"type,omitempty" yaml:"type,omitempty"`
 	Hex  string `json:"hex,omitempty" yaml:"hex,omitempty"`
@@ -1002,6 +1003,7 @@ func (c colors) influxViewColors() []influxdb.ViewColor {
 	var iColors []influxdb.ViewColor
 	for _, cc := range c {
 		iColors = append(iColors, influxdb.ViewColor{
+			ID:    cc.ID,
 			Type:  cc.Type,
 			Hex:   cc.Hex,
 			Name:  cc.Name,
diff --git a/pkger/parser_test.go b/pkger/parser_test.go
index 1bf1d5166e..91a4d77f98 100644
--- a/pkger/parser_test.go
+++ b/pkger/parser_test.go
@@ -1851,12 +1851,14 @@ spec:
 
 						require.Len(t, props.ViewColors, 2)
 						c := props.ViewColors[0]
+						assert.Equal(t, "base", c.ID)
 						assert.Equal(t, "laser", c.Name)
 						assert.Equal(t, "text", c.Type)
 						assert.Equal(t, "#8F8AF4", c.Hex)
 						assert.Equal(t, 3.0, c.Value)
 
 						c = props.ViewColors[1]
+						assert.Equal(t, "base", c.ID)
 						assert.Equal(t, "android", c.Name)
 						assert.Equal(t, "scale", c.Type)
 						assert.Equal(t, "#F4CF31", c.Hex)
diff --git a/pkger/testdata/dashboard_single_stat_plus_line.json b/pkger/testdata/dashboard_single_stat_plus_line.json
index e93f52285c..c69ff0a7a5 100644
--- a/pkger/testdata/dashboard_single_stat_plus_line.json
+++ b/pkger/testdata/dashboard_single_stat_plus_line.json
@@ -38,12 +38,14 @@
           ],
           "colors": [
             {
+              "id": "base",
               "name": "laser",
               "type": "text",
               "hex": "#8F8AF4",
               "value": 3
             },
             {
+              "id": "base",
               "name": "android",
               "type": "scale",
               "hex": "#F4CF31",
diff --git a/pkger/testdata/dashboard_single_stat_plus_line.yml b/pkger/testdata/dashboard_single_stat_plus_line.yml
index 6686782366..418329662c 100644
--- a/pkger/testdata/dashboard_single_stat_plus_line.yml
+++ b/pkger/testdata/dashboard_single_stat_plus_line.yml
@@ -29,10 +29,12 @@ spec:
             from(bucket: v.bucket)  |> range(start: v.timeRangeStart)  |> filter(fn: (r) => r._measurement == "mem")  |> filter(fn: (r) => r._field == "used_percent")  |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)  |> yield(name: "mean")
       colors:
         - name: laser
+          id: "base"
           type: text
           hex: "#8F8AF4"
           value: 3
         - name: android
+          id: "base"
           type: scale
           hex: "#F4CF31"
           value: 1