The use of color will make or break a design. Imagine a yearbook where each student uses their favorite color without talking to each other. Not a pretty sight. Imagine a yearbook where students use colors that make the titles and captions hard to read. Not a good idea. This is why learning graphic design is so important.

The above graphic design replicates the Disney movie title “Coco.” Each letter was made with Word Art.  The original graphic was compared to Display fonts on The colors were “picked” from the original graphic using Colorzilla Chrome extension and pasted into the Fill color -> Custom color. Lastly, individual shapes were added and colored to decorate the letter O.

You will learn more about Word Art and fonts in the next section. For now, let's focus on color.

Colorzilla Chrome extension

While other color picker extensions are available, this is the one that I like the most. If you have a better one, please let me know.

  1. Select the Colorzilla extension in the upper right corner.
  2. Click Page color picker.
  3. Move the + cursor over the page until you find the color you want. Then click.
  4. Open the Paintline, or font color and paste the Custom color.
  5. Repeat the process as many times as you like for other objects and text on the page.
Customize Color 1

Custom Color in Google Apps

  1. Click on the arrow next to the Fill bucket paint bucket icon, the arrow next to the Border color pencil icon, or open Background -> color.
  2. At the bottom of the new menu, select Custom.
  3. The 6 number hex color. Google may add 2 characters to the end of the color code. These last two letters determine opacity (transparency).
  4. Select OK.
Hex Codes for Coco

The 6 digits that were copied and pasted into the Custom color is called a hex code. When the code is 8 digits, the last 2 digits are opacity.  Google apps will automatically add the last two digits. Use the slider on the far right to adjust transparency.

YouTube Playlist

  • Beginning Graphic Design: Color by
  • 5 Forbidden Color Combinations | Graphic Design Tips from
  • How to Grab Any Color Code in Colorzilla (Chrome Extension) by TechStacker
  • What Is A Hex Code? by sparky BITES



Organization Idea

Use Google Keep app or extension to store hex codes of favorite colors until we can create an add-on of custom colors combinations.

This is an example of storing and using yearbook key information in Google Keep.


Font choice and how the text is displayed are important. Learn more about typography in the next lesson.