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

3.2 RGB vs. HSB colorMode

How can I represent colors in a mode other than RGB?


Overview

In this learning activity students add color to the drawing they made in activity 1. They learn to apply the background, fill, and strokefunctions (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:

  • explain and utilize the HSB color mode.
  • understand the differences between RGB and HSB color modes.

Student Outcomes

Abstraction:

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

Algorithms:

  • Describe more than one set of instructions that might complete a task.
  • Describe how instructions can have different outputs depending on inputs.
  • Explain why I used specific instructions to complete a task.

Programming:

  • Experiment with the commands of a programming language.
  • Explain why I chose specific commands to communicate my instructions.
  • Discuss what can and cannot be done with a specific set of commands.

Vocabulary

Hue The shade of a color
Saturation The intensity or vividness of a color (sometimes referred to as chroma)
Brightness The amount of white or black present in a color.

Resources

  • Video tutorial: 1.2 Color | Code
  • Learning Processing: Chapter 1. Pixels, Section 3. Rgb Color
  • Getting Started With p5.js: Chapter 3. Draw (Section: Color)

HSB Color

HSB is an alternative color space to RGB. In this model, colors are described by their hue, saturation, and brightness:
  • Hue is expressed in degrees, from red(0), through all the colors around the color wheel, and back to red (360).
  • Saturation is the amount of color, and ranges between 0 and 100.
  • Brighness the amount of light, ranging between 0 and 100. The alpha channel goes from 0 (not visible) to 1 (fully opaque).

To have p5 use HSB instead of RGB, we call colorMode(HSB). Here is the same example from above, using the HSB color mode instead of RGB. Notice how the colors red, green and blue are defined differently now: in RGB, red is defined by (255, 0, 0); in HSB, it is (360, 100, 100).

HSB makes it easier to define color ranges that fit descriptions like these, which would be harder to accomplish using RGB:

  • A dark, muted red. For red, we might set the Hue to be somewhere between 350 and 360. To make it dark, we can set Brightness to be between 30 and 50. A Saturation between 20 and 40 will make it muted.
  • A light, vibrant blue. What Hue, Saturation and Brighness ranges would you choose to get a color that fits this description?

The ability to define colors in these terms is convenient for designing parametric color palettes. Here is our happy face, with random colors being chosen from HSB ranges. Notice how even though a new combination is generated with each refresh, the color palette retains a certain character.

Now define an HSB color palette and apply it to a drawing from the previous activities.

Color Palettes

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. Red, orange, and red-orange are examples.

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