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 fonts.google.com. 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. Use this template to practicing your coloring skills.

Change Fill Color

Change Fill Color

  1. Select the object or text.
  2. Click on the Paint icon (Fill color).
  3. Select a color of your choice.
  4. Select the Pencil icon (Border color).
  5. Choose the line color of your choice.
Customize Color 1

Custom Color in Google Apps

  1. Click  Fill bucket icon. This menu is also under Border color pencil icon or 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

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.

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.

Organization Ideas

What happens when you find color combinations you like? You can either take out a physical notebook and handwrite the hex codes or you can store them for future use. Below are two options to organize color combinations.

Google Keep

Paletti Add-on

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

Google Keep was integrated with Google Slides on September 28, 2017. This update allows users to gather notes using the Google Keep app or extension and view them in the sidebar of Google Slides. Use Google keep to store hex codes of favorite color combinations with a link to the website. Try out the extension with Canva's 100 Color Combinations and this template.

The Paletti Slides add-on was released on December 21, 2017. This add-on also the user to experiment with over 200 color combinations using the Arrow icon. The options are even greater when the user clicks the Shuffle icon. Use the Wand icon to add the color combination to the entire Slides. Use this template to practice the add-on. Remember, focus on color contrast to increase legibility.

YouTube Playlist

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

Websites

Resources

Continue...

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