diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
index 74b4140e23d..62e651f919b 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
@@ -172,6 +172,10 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       return getScaleGradientFn(1, theme, colorMode, thresholds, hardMin, hardMax, softMin, softMax);
     }
 
+    if (gradientMode === GraphGradientMode.Hue) {
+      return getHueGradientFn(lineColor ?? FALLBACK_COLOR, 1, theme);
+    }
+
     return lineColor ?? FALLBACK_COLOR;
   }
 
diff --git a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
index 2d580c2986f..8c6ce29e37d 100644
--- a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
@@ -68,8 +68,8 @@ export function getHueGradientFn(
       ctx
     );
 
-    const color1 = tinycolor(color).spin(-15);
-    const color2 = tinycolor(color).spin(15);
+    const color1 = tinycolor(color).spin(-25).darken(5);
+    const color2 = tinycolor(color).saturate(20).spin(20).brighten(10);
 
     if (theme.isDark) {
       gradient.addColorStop(0, color2.lighten(10).setAlpha(opacity).toString());
diff --git a/packages/grafana-ui/src/graveyard/GraphNG/__snapshots__/utils.test.ts.snap b/packages/grafana-ui/src/graveyard/GraphNG/__snapshots__/utils.test.ts.snap
index 09f70e81c44..3b9265254b5 100644
--- a/packages/grafana-ui/src/graveyard/GraphNG/__snapshots__/utils.test.ts.snap
+++ b/packages/grafana-ui/src/graveyard/GraphNG/__snapshots__/utils.test.ts.snap
@@ -156,17 +156,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },
@@ -202,17 +202,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },
@@ -225,17 +225,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },
diff --git a/public/app/core/components/GraphNG/__snapshots__/utils.test.ts.snap b/public/app/core/components/GraphNG/__snapshots__/utils.test.ts.snap
index 09f70e81c44..3b9265254b5 100644
--- a/public/app/core/components/GraphNG/__snapshots__/utils.test.ts.snap
+++ b/public/app/core/components/GraphNG/__snapshots__/utils.test.ts.snap
@@ -156,17 +156,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },
@@ -202,17 +202,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },
@@ -225,17 +225,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
       "fill": [Function],
       "paths": [Function],
       "points": {
-        "fill": "#ff0000",
+        "fill": [Function],
         "filter": [Function],
         "show": true,
         "size": undefined,
-        "stroke": "#ff0000",
+        "stroke": [Function],
       },
       "pxAlign": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na/number",
       "show": true,
       "spanGaps": false,
-      "stroke": "#ff0000",
+      "stroke": [Function],
       "value": [Function],
       "width": 2,
     },