From where can I get list of all color patterns used by Google Charts?

2
votes

Question is simple, by default Google Charts uses some predefined colors for factors on the charts. First four are:

  • Blue #3366CC
  • Red #DC3912
  • Yellow #FF9900
  • Green #109618

Fine. When your chart must display more factors on a chart then it takes:

  • Purple #990099
  • Sea blue #0099C6
  • Pastel pink #DD4477

Above names have been given by myself so they aren't official but color values are. The point is what colors are next? Is the list of next colors infinite?

Can someone point me to the source where can I find all of them? I went through the whole manual and found nothing. I could render bunch of factors in the fiddle but I'm feeling that it won't cover all possible colors.

Thank you for your help.

The reason why I want to get those color values is that I want to use C3js / D3js in a parallel with Google Charts and to keep consistency I have to provide D3 with a list of predefined colors like:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 220, 140, 200, 250, 450],
            ['data4', 250, 320, 210, 240, 215, 225],
            ['data5', 430, 500, 400, 280, 290, 350],
            ['data6', 100, 120, 310, 340, 415, 225]
        ]
    },
    color: {
        pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
    }
});

Obviously I want to replace color.pattern array with what Google Chars uses.

Thanks!

4
javascriptgoogle-visualization
Have you seen this page yet? there4.io/2012/05/02/google-chart-color-list - mwilson
Also, another page with more options (I think this is more specific to google rather than google charts). google.com/design/spec/style/color.html#color-color-palette - mwilson
No, I haven't. That's cool and it gives me 20 colors! But last question to solve the problem? is the list fixed? What value will be used for the 21st factor? Blue (1st)? I think I have to create a fiddle to check it. - Matt Komarnicki
I'm not exactly sure about the last question. Create a fiddle and let's take a look. - mwilson

4 Answers

16
votes

This is an old post but I couldn't find the complete list on the web. Apparently Google uses 31 colors then loops (the 32nd color is the 1st blue). Here is the full list :

#3366cc
#dc3912
#ff9900
#109618
#990099
#0099c6
#dd4477
#66aa00
#b82e2e
#316395
#994499
#22aa99
#aaaa11
#6633cc
#e67300
#8b0707
#651067
#329262
#5574a6
#3b3eac
#b77322
#16d620
#b91383
#f4359e
#9c5935
#a9c413
#2a778d
#668d1c
#bea413
#0c5922
#743411
0
votes

OK. So here's the fiddle: http://jsfiddle.net/slick/xcpxz738/

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['factor1',     1],
    ['factor2',     1],
    ['factor3',     1],
    ['factor4',     1],
    ['factor5',     1],
    ['factor6',     1],
    ['factor7',     1],
    ['factor8',     1],
    ['factor9',     1],
    ['factor10',     1],
    ['factor11',     1],
    ['factor12',     1],
    ['factor13',     1],
    ['factor14',     1],
    ['factor15',     1],
    ['factor16',     1],
    ['factor17',     1],
    ['factor18',     1],
    ['factor19',     1],
    ['factor20',     1],
    ['factor21',     1],
    ['factor22',     1],
    ['factor23',     1],
    ['factor24',     1],
    ['factor25',     1],
  ]);

25 factors and 21st doesn't use blue (from the 1st). I'm pretty sure that I won't use so many factors. I case of that I will simply put more factors to this fiddle to check next colors.

I will simply use color picker to copy and paste colors to my C3. Than you mwilson anyway. I'll give you upvote.

0
votes

This is not a direct answer, but in case someone will be looking for a set of darker colors for the charts and gets here like I did, here's the list created using https://pinetools.com/darken-color and list of colors provided by LouiseS:

colors: ['#264c99', '#a52a0d', '#bf7200',
            '#0c7012', '#720072', '#007294',
            '#b72153', '#4c7f00', '#8a2222',
            '#244a6f', '#723372', '#197f72',
            '#7f7f0c', '#4c2699', '#ac5600',
            '#680505', '#4b0c4d', '#256d49',
            '#3f577c', '#2c2e81', '#895619',
            '#10a017', '#8a0e62', '#d30b79',
            '#754227', '#7e930e', '#1f5969',
            '#4c6914', '#8e7b0e', '#084219',
            '#57270c'
    ]