Unit 1 Drawing, Variables, Random
How can code be used as a creative and expressive medium?

3.3 Color Palettes and Design

What are our best practices for working with code?


Overview

In this learning activity students add color to the drawing they made in activity 1. They learn to apply the background, fill, and stroke functions (used in scales of gray until now), to define colors and add transparency. Both the RGB (Red, green, blue) and HSB (Hue, Saturation, Brightness) color models are applied.

Students apply the programming concepts they learned in the previous unit (variables, randomness) to color manipulation, defining color ranges and palettes.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Understand how to pick a color palette and use color wisely.

Student Outcomes

Abstraction:

  • Describe how I might use patterns to express an idea.
  • Explain why using patterns is necessary when creating with a computer.

Vocabulary

Color Palette In the digital world, refers to the full range of colors that can be displayed on a device screen or other interface.
Primary Color Any of a group of colors from which all other colors can be obtained by mixing.
Secondary Color a color resulting from the mixing of two primary colors.
Accent Colors Colors that are used for emphasis in a color scheme.
Complementary Colors Colors directly opposite each other in the color spectrum, such as red and green or blue and orange, that when combined in the right proportions, produce white light.
Analogous Colors Groups of three colors that are next to each other on the color wheel, sharing a common color, with one being the dominant color, which tends to be a primary or secondary color, and a tertiary. Red, orange, and red-orange are examples.

Resources

HSB Color

As you'll be using color often, you may want to familiarize yourself with color terms and different palettes that are pleasing to the eye. You should be familiar with the following:

Color palette - in the digital world, refers to the full range of colors that can be displayed on a device screen or other interface.

Primary Color - any of a group of colors from which all other colors can be obtained by mixing.

Secondary Color - a color resulting from the mixing of two primary colors.

Accent Color - are colors that are used for emphasis in a color scheme.

Complementary Colors - colors directly opposite each other in the color spectrum, such as red and green or blue and orange, that when combined in the right proportions, produce white light.

Analogous Colors - groups of three colors that are next to each other on the color wheel, sharing a common color, with one being the dominant color, which tends to be a primary or secondary color, and a tertiary. Ex. Red, orange, and red-orange.

If you're not sure how to start organizing your color palette, try using Adobe Color Picker or Paletton!

Practice

Pick a previous project (from LA1 or LA2) and colorize it only using colors from a color palette . Use Paletton or Adobe Color Picker to come up with your palette. Try to be mindful of what colors you are using more and less than others.