Google Apps Script – Google Workspace Standard Color Palette Hexadecimal Color Codes
I am planning on updating a few Google Apps Script projects and updates soon. To accomplish them, I needed to get the full array of colours and their hexadecimal codes from the Google Sheets, Docs and Slides dropdown menus for the text and fill colours.
I wanted to be able to easily access the hexadecimal codes for each of the custom colours that Google has.
In this short post, I want to share a number of array and object formats along with a quick Logger.log example for each one.
However, first of all here is the Google Sheet with the colours along with their hexadecimal name and the name that Google gives the colour.
You can check out the file here:
Google Sheets, Docs and Slides Standard Colours
Just go to File > Make a copy so you have a copy of your very own.
Google Standard Color Array
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var standardColorArray= [ ["","" ,"" ,"" ,"" ,"" ,"" ,"" ,"" ,"" ,"" ], ["","#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"], ["","#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"], ["","#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"], ["","#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"], ["","#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"], ["","#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"], ["","#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"], ["","#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"] ]; //Usage example function standardColorArrayTest(){ var ss = SpreadsheetApp.getActiveSpreadsheet(); var testSheet = ss.getSheetByName("test"); var range = testSheet.getRange("A1"); range.setBackground(standardColorArray[2][2]); //Makes the cell background: "#ff0000" or "Red" }; |
For ease of use, I have left the first row and column empty so that it matches the dropdown menus for fill and text colour. You can also use the guide in the sheet to compare.
This way, going from left to right and top to bottom you don’t have to worry about starting from zero.
Google Standart Color Object
In the next example, I used a straight Javascript object. The key is the name that Google has assigned the colour and the vale is the hexadecimal colour code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
var standardColorObject = { black:"#000000", dark_grey_4:"#434343", dark_grey_3:"#666666", dark_grey_2:"#999999", dark_grey_1:"#b7b7b7", grey:"#cccccc", light_grey_1:"#d9d9d9", light_grey_2:"#efefef", light_grey_3:"#f3f3f3", white:"#ffffff", red_berry:"#980000", red:"#ff0000", orange:"#ff9900", yellow:"#ffff00", green:"#00ff00", cyan:"#00ffff", cornflower_blue:"#4a86e8", blue:"#0000ff", purple:"#9900ff", magenta:"#ff00ff", light_red_berry_3:"#e6b8af", light_red_3:"#f4cccc", light_orange_3:"#fce5cd", light_yellow_3:"#fff2cc", light_green_3:"#d9ead3", light_cyan_3:"#d0e0e3", light_cornflower_blue_3:"#c9daf8", light_blue_3:"#cfe2f3", light_purple_3:"#d9d2e9", light_magenta_3:"#ead1dc", light_red_berry_2:"#dd7e6b", light_red_2:"#ea9999", light_orange_2:"#f9cb9c", light_yellow_2:"#ffe599", light_green_2:"#b6d7a8", light_cyan_2:"#a2c4c9", light_cornflower_blue_2:"#a4c2f4", light_blue_2:"#9fc5e8", light_purple_2:"#b4a7d6", light_magenta_2:"#d5a6bd", light_red_berry_1:"#cc4125", light_red_1:"#e06666", light_orange_1:"#f6b26b", light_yellow_1:"#ffd966", light_green_1:"#93c47d", light_cyan_1:"#76a5af", light_cornflower_blue_1:"#6d9eeb", light_blue_1:"#6fa8dc", light_purple_1:"#8e7cc3", light_magenta_1:"#c27ba0", dark_red_berry_1:"#a61c00", dark_red_1:"#cc0000", dark_orange_1:"#e69138", dark_yellow_1:"#f1c232", dark_green_1:"#6aa84f", dark_cyan_1:"#45818e", dark_cornflower_blue_1:"#3c78d8", dark_blue_1:"#3d85c6", dark_purple_1:"#674ea7", dark_magenta_1:"#a64d79", dark_red_berry_2:"#85200c", dark_red_2:"#990000", dark_orange_2:"#b45f06", dark_yellow_2:"#bf9000", dark_green_2:"#38761d", dark_cyan_2:"#134f5c", dark_cornflower_blue_2:"#1155cc", dark_blue_2:"#0b5394", dark_purple_2:"#351c75", dark_magenta_2:"#741b47", dark_red_berry_3:"#5b0f00", dark_red_3:"#660000", dark_orange_3:"#783f04", dark_yellow_3:"#7f6000", dark_green_3:"#274e13", dark_cyan_3:"#0c343d", dark_cornflower_blue_3:"#1c4587", dark_blue_3:"#073763", dark_purple_3:"#20124d", dark_magenta_3:"#4c1130" }; //Usage Example function standardColorObjectTest(){ //Get the full list of objects Logger.log(standardColorObject); //Get the hex for dark_yellow_3; Logger.log(standardColorObject.dark_yellow_3); }; |
Here, you can see that we call the hexadecimal colour by using the Google naming convention for the colour.
Google Standard Array with both Name and Hex Colour
This array is a replica of the one that was used to populate the bgcolors tab. Every even row contains the hexadecimal colour and the odd row contains it’s corresponding Google naming convention.
Probably not as useful, but it might be good if you want to iterate through a row or column of colours and their names.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var standardColorHexNameArray = [ ["black", "dark grey 4", "dark grey 3", "dark grey 2", "dark grey 1", "grey", "light grey 1", "light grey 2", "light grey 3", "white"], ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"], ["red berry", "red", "orange", "yellow", "green", "cyan", "cornflower blue", "blue", "purple", "magenta"], ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"], ["light red berry 3", "light red 3", "light orange 3", "light yellow 3", "light green 3", "light cyan 3", "light cornflower blue 3", "light blue 3", "light purple 3", "light magenta 3"], ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"], ["light red berry 2", "light red 2", "light orange 2", "light yellow 2", "light green 2", "light cyan 2", "light cornflower blue 2", "light blue 2", "light purple 2", "light magenta 2"], ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"], ["light red berry 1", "light red 1", "light orange 1", "light yellow 1", "light green 1", "light cyan 1", "light cornflower blue 1", "light blue 1", "light purple 1", "light magenta 1"], ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"], ["dark red berry 1", "dark red 1", "dark orange 1", "dark yellow 1", "dark green 1", "dark cyan 1", "dark cornflower blue 1", "dark blue 1", "dark purple 1", "dark magenta 1"], ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"], ["dark red berry 2", "dark red 2", "dark orange 2", "dark yellow 2", "dark green 2", "dark cyan 2", "dark cornflower blue 2", "dark blue 2", "dark purple 2", "dark magenta 2"], ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"], ["dark red berry 3", "dark red 3", "dark orange 3", "dark yellow 3", "dark green 3", "dark cyan 3", "dark cornflower blue 3", "dark blue 3", "dark purple 3", "dark magenta 3"], ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"] ]; function standardColorHexNameArrayTest(){ //Light blue color name Logger.log(standardColorHexNameArray[4][7]); //Light blue hex color Logger.log(standardColorHexNameArray[4+1][7]); }; |
Finding the Hexadecimal Color Code in Google Sheets, Docs or Slides
- Select the pallet button in either the fill or letter button.
- Select the desired color.
- Go back into the pallet selector.
- Click the custom plus (+) button.
- The value will be displayed.
This can be useful to gather the colours you need for your script quickly.
Conclusion
You should also be able to access these files from your copied version by going to Tools > Script editor.
I hope you find this useful in your own projects.
I’ll be sharing how I used this data shortly. I’m quite excited about sharing it, but I want to write it all up good and proper for you. Hold tight!
Update!!! Here it is!
Need help with Google Workspace development?
My team of experts can help you with all of your needs, from custom app development to integrations and security. We have a proven track record of success in helping businesses of all sizes get the most out of Google Workspace.
Schedule a free consultation today to discuss your needs and get started or learn more about our services here.
~Yagi
Thank you! This totally saved me 🙂
Thank you for doing this (and letting me find it via google search). This all has been such a pain, working across platforms and products. Much appreciated.