Google Apps Script: Google Standard Color Palette Picker for Sidebar and Dialog Boxes in Google Sheets, Google Docs and Google Slides (Updated Feb 2022)

Google Apps Script: Dev Tools, Color Picker, Side Bar, Custom Prompt, HtmlService, onOpen, Sidebar, Dialog Box

I wanted to update one of my free Google Add-on apps that works with colour. What I had is just the standard HTML color input element where the user selects from the palette and that hexadecimal colour code is returned to Google Apps Script to be used in the App. The problem is that it is really hard to get a good colour match between the palette and Google’s own colour range that is accessible from the fill or text colour buttons.

Take a look at the comparison between the HTML color input element and the Google Sheet background colour palette in the image below.

That’s not a user-friendly tool to match colours with the standard Google palette.

So in the back of my mind, I had always wanted to create a tool for a sidebar or dialogue box that would allow the user to easily access the standard colours or use the custom palette provided by the HTML color input.

After finding a bit of time in my recent summer break I came up with this.

And this is how it looks in action:

(Note: add-ons has been updated to Extensions)

In the above gif, I have run a basic demonstration on how to use the colour picker in a custom sidebar and custom dialogue box in Google Sheets.

You can incorporate this colour picker into any sidebar or custom dialogue project along with other form data and then extract the values for your Google Apps Script project.

Features

This colour picker contains the following features:

1. Dropdown menu for colour selection so as not to clutter the sidebar or dialogue.
2. Colour radio buttons to match Google’s standard colour palette for Sheets, Docs and Slides.
3. Custom colour button for the user to select their own colour using the HTML color input.
4. The whole colour picker can be put in a  single separate HTML file.
5. Two file types:
   1. One colour selection file that contains CSS suited for a plain dialogue box styling.
   2. One colour selection file that takes into account Google’s CSS package for Add-ons.
6. Hover features to easily distinguish which button is being focussed on.
7. Standard plain Javascript. No other libraries added.

Contents

• Access
• Code
  • Colour Picker – Standard
  • Colour Picker – Supports Google’s CSS package for Add-ons
• Example Usage
  • index.html
  • Code.gs
• Conclusion

Back to Top

Access

I think there are 3 important pieces of data worth retrieving from the colour picker:

Hexadecimal Code

You can use this code to set background, text and border colours in your Google Sheet, Doc or Slide. To access this value in your HTML file:

document.getElementById("color-result-hex").innerText;

Google Color Name

This might be useful if you want to display the Google-assigned name of the colour:

document.getElementById("color-result-name").innerText;

Text Color

I use white text for dark hex colours and black text for light hex colours. This might be useful for setting a complementary text colour to a background.

document.getElementById("color-result").style.color;

Back to Top

Code

The HTML file I’ve named picker.html. The file contains all the HTML, CSS and Javascript used to create the colour picker widget.

As mentioned earlier, I have two different HTML files depending on what styling you want to use it with.

Back to Top

Colour Picker – Standard

This file should be used if you are not also incorporating Google’s CSS package for Add-ons.

picker.html

Back to Top

Colour Picker – Supports Google’s CSS package for Add-ons

This one is the one you will probably use if you are building an Add-on for your organization or Google’s Marketplace.

This is also the one I will be using in the example below and is also available in the example Google Sheet and attached script file.

picker.html

Back to Top

Example Usage

The following example will walk you through how to incorporate the code into your own project. I will be using the CSS package for Add-on’s-friendly version of the script.

You should be able to access the full example by going to the Google Sheet below:

Colors Sidebar and Prompt

Go to File > Make a copy. Then got to Extensions > Apps Script (it should automatically take you to: “Color palette selection” project) and run the onOpen() function in the code.gs for the first time to go through all the permissions.

In the example, we will be creating a menu item in our Add-on menu dropdown. The user will be able to select a sidebar or dialogue box example off the Colour Picker sub-menu.

Selecting one of these options will display a window with the Colour Picker. The user can then make a colour choice and it will be displayed in cell A1 in the ‘test’ Google Sheet tab.

We will be using 3 files:

• Code.gs: the core file to run the menu items, sidebars and dialogues, along with receiving data from the HTML files.
• index.html: The basic main HTML display file. It contains a header, the included Colour Picker file picker.html and a submit button.
• picker.html: The main Colour Picker file ( I won’t be walking through this).

Back to Top

index.html

This file does not have too much extra in it. However, there are some important things to take note of:

Google’s CSS package for Add-ons

On line 5 you can see that I have added CSS Google Add-ons package.

Include picker

On line 10, you can see the <?!= include('picker') ?> . This is a custom function that imports the  picker.html, out Colour Picker file, into the index.html file.

getdata function

The getData() function on lines 18-25 gets the three data elements from the selected colour; the hex code, the Google colour name, and the text colour.

It this adds these three colours to an array on line 23.

Finally, it sends that array to the function receiveData in the Code.gs file to be used in Google Apps Script.

Back to Top

Code.gs

Note! Use the pop-out capability for the script below so you can follow the code as it is being described.

onopen()

The onOpen() is a simple trigger function that runs when a Google Sheet, Doc or Slide is opened.

When the file opens we want to create and Add-ons (now Extensions) menu item for our sidebar and dialogue prompt item to display our Colour Picker in.

When Show sidebar is clicked, the sidebar() function is called. Alternatively, if Show prompt is clicked, the prompt() function for the custom dialogue box is called.

sidebar() and prompt()

Both the sidebar() and prompt() functions are similar. Both call the user interface method with getUi(). They then invoke HtmlService class to create a template from a file.

Make sure you use the createTemplateFromFile() method. This method allows us to add Google Apps Script code right in the HTML file using <? code in here ?>. This will be useful especially when we use the include function later.

In the final line of each function, you can see that we call showSidebar(html) to show our HTML file in our sidebar and showModalDialog(html, "Standard Color Test") to show our HTML in our custom popup dialogue prompt.

Sidebar: Colour Picker

 

Dialogue Box Prompt: Colour Picker

include(filename)

The include(filename) function is called inside the index.html file to add the picker.html file to the main index.html file.

The function takes an HTML file name. It gets the output content from the picker.html file using HtmlService.createHtmlOutputFromFile(filename) .getContent(); and adds it to the index.html file.

Another example of this can be found in this tutorial:

Google Apps Script – How to create Javascript and CSS files for a Sidebar Project in Google Apps Script

receiveData(data)

The receiveData(data) function takes the data from the Colour Picker retrieved in the getData() function inside the index.html file.

Remember this data variable is an array containing:

On line 42-45, we quickly check to see if the user has a selected colour by checking if the zeroeth value of the array contains the word “Select”. This is the stand-in word when the Colour Picker is first loaded.

If no selection has been made, then we send an alert message to the user.

Otherwise, we update cell A1 in the ‘test’ Google Sheet tab to the selected colour (data[0]), give it the background colour of the selected colour (data[0]), change the text colour to the colour of the text (data[2]) and of course, add the Google name of the text (data[1]).

Note that when we use a custom colour, the name is just “Custom”. There is no Google Name for custom colours.

The result from receiveData(data)

Back to Top

Conclusion

Hopefully, the details and example are enough for you to get started on your own project. If you think you need more information or have a question feel free to comment below.

My aim was to keep the Colour Picker in a similar style to Google’s so that the user had a more intuitive and seamless experience.

I hope you can make use of this little widget thingy and would love to hear how you used it in your own projects.

All the files for this project are completely free to use for commercial and non-commercial use.

Oh and P.S. I made an earlier post detailing the Hexadecimal colour codes and names for the Standard Google Palette. You can check it out here: 

Google Apps Script: Hexadecimal Color Codes for Google Docs, Sheets and Slides Standard Palette

 

Happy coding!

Need help with Google Workspace development?

Go something to solve bigger than Chat GPT?

I can help you with all of your Google Workspace development needs, from custom app development to integrations and security. I 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