3.1 | Color Theory

Key Terms

Color Mode
The system a document uses to define color numerically. Most commonly CMYK for print or RGB for screens. A document’s color mode is set when the file is created and affects how colors are mixed and displayed.
CMYK
Cyan, Magenta, Yellow, and blacK. A subtractive color model used for print, where inks are combined on a white page to absorb (subtract) light.
RGB
Red, Green, and Blue. An additive color model used for screens, where light is combined to create color.
HSB
Hue, Saturation, and Brightness. A way of describing a color that often matches how humans naturally think about color, rather than raw channel percentages.
Grayscale
A color mode using only values of gray, with no hue or saturation at all.
Hex Values
A 6-digit code (like #2C6E49) used to specify an RGB color for web and screen work. Simply another way of writing the same RGB color.
Spot Color
A single, precisely pre-mixed ink (such as a specific Pantone shade) printed exactly as specified, rather than built from a combination of CMYK dots. Used when exact, consistent color matters more than photographic realism (a brand’s logo color, for example).
Rich Black
A CMYK mix that adds some Cyan, Magenta, and Yellow to 100% blacK, producing a deeper, denser black than K alone. Useful for large solid-black print areas.

Every project you’ve built so far has used whatever color you happened to click. Starting today, color becomes a deliberate decision.

Direct Instruction (~10 min)

Preview of 3.1 Guided Notes: Color Theory
3.1 Guided Notes: Color Theory

Complete the handout, three hole punch it, and keep it in your class binder.

⬇ Download Worksheet (PDF)

Every color can be described by three properties: hue (which color. Red, blue, yellow-green), saturation (how intense or dull), and value (how light or dark). Arranging hues around a color wheel reveals useful relationships: colors directly across from each other (complementary) create high contrast and energy; colors next to each other (analogous) feel harmonious and calm; a single hue at different values (monochromatic) feels unified and simple.

Two more things worth knowing before you start mixing: warm colors (reds, oranges, yellows) tend to visually advance, they feel like they’re coming toward you, while cool colors (blues, greens, purples) tend to recede, feeling farther away. That’s why a single warm accent on an otherwise cool page tends to grab the eye first, even at the same size and value.

And the Wildflower Theory: look at a real wildflower field and the colors are wildly different hues, but it still reads as harmonious. Because they’re all roughly the same saturation and value (soft, muted, similar intensity). If a multi-hue palette feels chaotic, the fix usually isn’t fewer hues. It’s matching their tone (saturation/value) more closely.

Then the practical side: Illustrator lets you dial in any color three ways. CMYK (for print), RGB (for screens), or HSB (often the most intuitive way for a human to reason about a color). A hex value is just another way of writing an RGB color, used constantly on the web. Grayscale strips out hue and saturation entirely. A spot color is a single, exact pre-mixed ink instead of a CMYK build, and a rich black deepens a large solid black area beyond what pure K alone can do.

“If a client says ‘make it feel calm,’ that’s a color theory decision before it’s a software decision. You’d reach for an analogous scheme or a monochromatic one, not a jarring complementary pair.”

Scaffolded questions. Cold-call through all three:

Recall: “What are hue, saturation, and value, in your own words?”

Analysis: “Why might a complementary color scheme work well for a warning label, but poorly for a spa’s logo?”

Synthesis/Extension: “If you had to design a color scheme that felt ‘energetic but trustworthy’ at the same time, what relationship(s) might you combine, and why?”

Guided Practice (~23 min)

  1. Provisional press: mix a secondary color by hand. At the ink station, roll a thin, even layer of cyan onto your plate with the brayer and lay down a small patch on your press sheet. Clean the brayer, roll magenta, and overprint it directly on top of the cyan patch. Name the secondary that appears where the two inks physically overlap, before you touch a computer.
  2. Match it in the Color panel. Open Window > Color and mix that same secondary using the CMYK sliders, then switch the panel to RGB and HSB and screenshot all three views of the one color you just built twice: once with ink, once with numbers.
  3. Pick a color scheme (complementary, analogous, or monochromatic) and build a small set of 4–5 filled shapes demonstrating it. Don’t label which scheme it is yet.
  4. Turn and Talk: trade screens with a partner. Can they correctly guess which scheme you built before you tell them?

Which felt easier to reason about while you were picking colors. CMYK numbers, RGB numbers, or HSB? Why do you think that is?

GMetrix/BrainBuffet (~30 min)

Haven’t finished Module 1’s completion checkpoint yet? Finish that first, then move on. That’s expected for most of the class, not a sign you’re behind.

Log in and begin Module 2: Dobson Branding Style Guide: today’s sections cover color modes directly, previewing the branding-guide concept you’ll see again at the end of Unit 9.

Exit Ticket / Wrap-Up (~5 min)

What mood or message does your color scheme communicate, and is that the mood you were actually going for?

🗂 Organize: Put your guided notes and your color-scheme swatch set in your binder. Save your Color panel screenshot (CMYK/RGB/HSB) in the Photos folder of your Digital Design project folder on Google Drive.

📤 Exit Ticket: Stoplight. In the discussion board below, let us know how you’re doing: G (green: I’ve got this, ready to move on), Y (yellow: I mostly get it, still have a question), or R (red: I’m stuck, I need help). Then explain your rating in at least 3 sentences (aim for 5): what specifically about today’s skill makes you feel that way, and, if you’re yellow or red, what your actual question is.

Stuck on how to start? Try: “I picked ___ because ___. Specifically, when I tried to ___, I ___. One thing that would help is ___.”


This site uses Just the Docs, a documentation theme for Jekyll.