diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
index 06e8f90ef4f..8d09ec0cdec 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
@@ -29,8 +29,8 @@ export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPalett
       style={{
         display: 'grid',
         gridTemplateColumns: 'repeat(3, 1fr)',
-        gridRowGap: '32px',
-        gridColumnGap: '32px',
+        gridRowGap: '24px',
+        gridColumnGap: '24px',
       }}
     >
       {swatches}
diff --git a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
index 6b8a0e491b2..95cf5141bf3 100644
--- a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
+++ b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
@@ -1,6 +1,7 @@
 $arrowSize: 15px;
 .ColorPicker {
   @extend .popper;
+  font-size: 12px;
 }
 
 .ColorPicker__arrow {
@@ -128,7 +129,7 @@ $arrowSize: 15px;
 }
 
 .ColorPickerPopover__content {
-  width: 360px;
+  width: 336px;
   padding: 24px;
 }