Merge pull request #15331 from ryantxu/color-parsing

support three letter hex color strings

packages/grafana-ui/src/utils/namedColorsPalette.test.ts

@@ -59,6 +59,8 @@ describe('colors', () => {
     it('returns color if specified as hex or rgb/a', () => {
     it('returns color if specified as hex or rgb/a', () => {
       expect(getColorFromHexRgbOrName('ff0000')).toBe('ff0000');
       expect(getColorFromHexRgbOrName('ff0000')).toBe('ff0000');
       expect(getColorFromHexRgbOrName('#ff0000')).toBe('#ff0000');
       expect(getColorFromHexRgbOrName('#ff0000')).toBe('#ff0000');
+      expect(getColorFromHexRgbOrName('#FF0000')).toBe('#FF0000');
+      expect(getColorFromHexRgbOrName('#CCC')).toBe('#CCC');
       expect(getColorFromHexRgbOrName('rgb(0,0,0)')).toBe('rgb(0,0,0)');
       expect(getColorFromHexRgbOrName('rgb(0,0,0)')).toBe('rgb(0,0,0)');
       expect(getColorFromHexRgbOrName('rgba(0,0,0,1)')).toBe('rgba(0,0,0,1)');
       expect(getColorFromHexRgbOrName('rgba(0,0,0,1)')).toBe('rgba(0,0,0,1)');
     });
     });

packages/grafana-ui/src/utils/namedColorsPalette.ts

@@ -73,7 +73,7 @@ export const getColorDefinition = (hex: string, theme: GrafanaThemeType): ColorD
 };
 };
 
 
 const isHex = (color: string) => {
 const isHex = (color: string) => {
-  const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi;
+  const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6}|[0-9A-F]{3})$/gi;
   return hexRegex.test(color);
   return hexRegex.test(color);
 };
 };