diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 03b6086b8dc..fc2d70e3f8f 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -37,13 +37,13 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
   };
 
   handleChange = (color: any) => {
-    const { onColorChange, onChange, enableNamedColors } = this.props;
+    const { onColorChange, onChange, enableNamedColors, theme } = this.props;
     const changeHandler = onColorChange || onChange;
 
     if (enableNamedColors) {
       return changeHandler(color);
     }
-    changeHandler(getColorFromHexRgbOrName(color));
+    changeHandler(getColorFromHexRgbOrName(color, theme));
   };
 
   handleTabChange = (tab: PickerType | keyof T, updatePopperPosition?: () => void) => {