diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 4bbeb790b6d..396488c8cad 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import NamedColorsPicker from './NamedColorsPalette';
+import { NamedColorsPalette } from './NamedColorsPalette';
 import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { ColorPickerProps, handleColorPickerPropsDeprecation } from './ColorPicker';
 import { GrafanaTheme, Themeable } from '../../types';
@@ -38,9 +38,9 @@ export class ColorPickerPopover extends React.Component<Props, State> {
     const { color, theme } = this.props;
 
     return activePicker === 'spectrum' ? (
-      <SpectrumPalette color={color} onChange={this.handleChange}  theme={theme} />
+      <SpectrumPalette color={color} onChange={this.handleChange} theme={theme} />
     ) : (
-      <NamedColorsPicker color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />
+      <NamedColorsPalette color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />
     );
   };
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
index 9ae216aa8b0..06e8f90ef4f 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
@@ -8,7 +8,7 @@ interface NamedColorsPaletteProps extends Themeable {
   onChange: (colorName: string) => void;
 }
 
-const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
+export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
   const swatches: JSX.Element[] = [];
   ColorsPalette.forEach((colors, hue) => {
     swatches.push(
@@ -38,4 +38,3 @@ const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps)
   );
 };
 
-export default NamedColorsPalette;
diff --git a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
index 8d6403602e9..fc26a649c6c 100644
--- a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
+++ b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
@@ -189,14 +189,17 @@ $arrowSize: 15px;
   z-index: 0;
 }
 
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
-{
-    display:block;
-    position:absolute;
-    top:0;left:0;bottom:0;right:0;
+.sp-preview-inner,
+.sp-alpha-inner,
+.sp-thumb-inner {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
-
 .gf-color-picker__body {
   padding-bottom: $arrowSize;
   padding-left: 6px;