diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
index 7609507cb46..e1c63e5e3b4 100644
--- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx
+++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
@@ -144,7 +144,7 @@ export const PieChartSvg: FC<SvgProps> = ({
   }
 
   const getValue = (d: FieldDisplay) => d.display.numeric;
-  const getGradientId = (color: string) => `${componentInstanceId}-${color}`;
+  const getGradientId = (color: string) => `${componentInstanceId}-${tinycolor(color).toHex()}`;
   const getGradientColor = (color: string) => {
     return `url(#${getGradientId(color)})`;
   };