The example Disney quote from the movie Coco was created in Google Slides with a focus on color and font choice.

Color communicates mood and tone. Color also makes the text readable. In this example, the Mexican inspired colors are both vibrant and inviting.

COLOR ASSIGNMENT PART 1

In Part 1 assignment, you will learn how to use Fill Color, Custom Colors, and Gradients to improve the quality of your design.

Practice Part 1

Use this template to practice your coloring skills. Each page has a different quote. Color the word phrases to help clarify the meaning and mood of the text.

Fill Color

Each Google App has the ability to change the color of text, shapes, and Word art. This includes 90 built-in solid colors and 56 built-in gradient colors. These numbers do not include customizations, which will be discussed further down the page.

Change Fill Color

  1. Go to Slide 2 of Color the Quote slide deck.
  2. Select the object or text.
  3. Click on the Paint icon (Fill color).
  4. Select a color of your choice.
  5. Select the Pencil icon (Border color).
  6. Choose the line color of your choice.

Color Combinations

Colors can be outdoorsy and natural, fun and tropical, or sleek and modern.  To improve your graphic designs, you can learn Color Theory or you can use professionally combined palettes such as Canva's 100 Color Combinations. The colors are written with a number sign and 6 digits for RGB (Red, Green, Blue) called hex codes.

You can also find your favorite graphic, such as Coco's movie title, and use a color extension to determine the code codes, which will also be discussed in this section.

What is a Hex Code?

A hex code is a 6 alphanumeric digit code for a color. The first two numbers/letters represent red, the next two represent green, and the last two represent blue, also known as RGB. The color code begins with # sign followed by the 6 digit hex code.

What if the Hex Code has 8 digits?

Google apps will automatically add the last two digits. When the code is 8 digits long, the last 2 digits are opacity.   Use the slider on the far right to adjust transparency.

00 = clear <-->   76 = halfway transparent   <--->   ff = solid

Custom Color in Google Apps

  1. Go to Slide 3 of the Color Quote Practice.
  2. Select the object you want to color.
  3. Click Fill bucket icon. This menu is also under Border color pencil icon or Background -> color.
  4. At the bottom of the new menu, select Custom.
  5. Type the 6 number/letter hex color.
  6. Select OK.

Example HEX codes include

#00060b
#6f8ea9
#003b6f
#00203c
#a6b8c7

Colorzilla Chrome extension

The colors for the "Coco" quote were “picked” from the original Disney graphic using  Colorzilla Chrome extension. 

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

Custom Gradient Color

A gradient color begins with one color and moves through a progression of colors to the last specified color. You can use Google apps default gradients or customize using uigradients.com. Thank you, Tony Vincent, for sharing this resource.

  1. Go to Slide 5 of the Color the Quote Practice.
  2. Select the object.
  3. Click on the Fill color icon.
  4. Select Gradient.
  5. Click on Custom +.
  6. Select on the button on each end of the line. Change the color on each side. Add steps as desired.
  7. Click okay.
  8. The final product will have multiple related colors.

You can also experiment with the type and angle of the gradient. Linear is the default but radial is another option.

Practice Part 1

Did you complete Slides 2-5 of this template to practice your coloring skills? Then it is time to choose which coloring technique you want to use to complete Slide 3. You can also add a new blank slide to create and color a Word Art quote from scratch.

COLOR ASSIGNMENT PART 2

We will learn more about Style Guides in future lessons, but for the time being, let's store hex codes for the Color palette, Custom colors, and Custom gradients on a Google Slides. Then we will create an original color the quote design.

Make a copy of this template.

In this part of the assignment, we will change the Theme colors (in particular, the Accent colors) as we complete the Color Palette Style guide.

Color Palette

Every Google Slides has a color palette. The example in this image shows a color palette for a SlidesCarnival template.

color palette (1)

Color Palette Style Guide

  1. Go to coolors.co to select a color palette of your choice.
  2. On Slide 1 of the Color Palette Style Guide, click in a text box.
  3. Click on Fill, Border, or Text color.
  4. Select the pencil icon.
  5. Use the drop down menu to edit the Accent colors.

Repeat the same color combinations in the remaining boxes if you do not 11 different colors.

Pasting the hex codes into the text boxes may or may not be necessary depending how you plan to reuse the color palette.

Custom Color Style Guide

If you plan to reuse CUSTOM colors, you will want to store the hex codes on the style guide.

  1. Go to htmlColorCodes.com to find more HEX codes.
  2. Go to Slide 2 of the Style Guide.
  3. Click on a text box in the CUSTOM section.
  4. Add the Fill color.

Repeat as many times as needed.

SUGGESTION: Use CTRL + Shift + V to paste the hex code in the text box.

Custom Gradient Color Style Guide

When you change the Color palette, Google automatically updates the gradient options. However, you may want to add custom gradients and store that information to your Style Guide.

  1. Go to uigradients.com.
  2. Open Slide 3 of the Style Guide.
  3. Click on the black text box to create the gradient color.
  4. Type the HEX codes to reuse the gradient later.
    • 2 color gradient = Add the HEX code to the left and right text boxes.
    • 3+ color gradient = Paste the HEX code(s) over the slider.

Pause the lesson here. Do not complete Slide 4 UNTIL you complete Fonts Practice Part 1.

Color Practice Part 2

Did you pause if you completed Slide 3? Have you completed Fonts Practice Part 1? If you said yes to both questions, then complete Slide 4 of the Color Palette Style Guide. You need to understand how to use Word Art and fonts to complete the final creation activity for this assignment.

Use the Color Palette Style Guide to create a new quote design on Slide 4. In my example, I used a Google search to find an image of a quote. I then used fonts.google.com, Word Art, and my color palette with custom gradients to replicate the design.

Click here to view a completed example of Practice 2.

Additional 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. You can record the HEX codes in the Style Guide. Below are two more options to organize color combinations.

Google Keep

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

Google Keep allows users to gather notes using the Google Keep app or extension. These notes can then be viewed on 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.

Paletti Add-on

Palitti Add-on enables users to various color combinations.

The Paletti Slides add-on allows 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. This add-on is not necessarily easy-to-use.

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
  • How Do HEX Color Codes Work? (in 60 seconds) by Poly Matter
  • 6 Powerful Google Keep Add-ons (And Two Hidden Features) by Dottotech

Websites

Resources

Fonts

Font choices set the tone of a design. Fonts can be serious or playful.

Read More

Updated December 30, 2022.