DT Session 01 - Colors


Colors

Visuals

Visual: A vibrant, animated background with a spectrum of colors smoothly transitioning from one to another.

Hey everybody, welcome to the first session of Design Theory. Today we're getting started with the fundamentals of color theory. Color theory is an important tool when it comes to visuals of all kinds in games, film, animations or illustrations.


Visuals

An animation showing a paintbrush painting a canvas, transitioning from black and white to a burst of colors.

So what is color theory? It's less about picking colors that look nice and more about knowing what colors do to the person looking at them. Colors change how we feel about a scene, they tell us where to look, and they can even push us towards a decision. Today we'll look at how you can use that in your own games.


The Building Blocks of Color

Visuals

Interactive color picker, where I while I explain manipulate the three building blocks.

We'll start with the color wheel. It shows how colors relate to each other, and you'll come back to it constantly.

A color is defined by three characteristics: Hue, Saturation, and value.

Hue

Saturation

Value


Color Harmonies

Visuals
  • Examples of color harmonies (complementary, analogous, triadic) shown through animated illustrations and game design mockups.
Audio

Harmonic chord when I say "harmony"

A palette works when its colors support each other. There are a few classic ways to pick colors that go together: complementary, analogous and triadic. Let's go through each one and see how it changes the mood of a design.


Color Emotions

Visuals

An interactive chart linking specific colors to emotions, with animated examples showing characters or scenes changing mood as the color scheme shifts.

Colors come with emotional baggage. Red can read as passion or danger, blue as calm or sad. Once you know which feelings a color tends to trigger, you can pick colors on purpose instead of by gut feeling.


Visuals

Before-and-after scenarios showing how changing a color scheme can dramatically alter the perception of a game scene, movie shot, or animation frame

Let's try it out. Here's the same game scene with different color schemes. Soft blues and greens make it a quiet morning. Push it to oranges and reds and suddenly it's a tense sunset, even though nothing else changed.


Visuals

An interactive sandbox with color palette tool inviting users to create their own color schemes, which are applied to different images, shifting the mood and emotion they convey.

Now it's your turn. Open the palette tool and build a few color schemes of your own. You'll learn more from ten minutes of trying things than from watching me, and a palette that doesn't work teaches you just as much as one that does.


Visuals

A recap animation showcasing key points from today's session, with a colorful, dynamic background.

That's it for today. This was only the basics of color theory, and we'll build on it in the next sessions. Until then, pay attention to the colors in the games you play and ask yourself why they were chosen. See you next time.