The Teenage Mutant Ninja Turtles Guide to Color Theory

by Louisa Barrett

The video titled "The Teenage Mutant Ninja Turtles Guide to Color Theory" features Louisa Barrett, Director of the Front-End Engineering program at the Turing School of Software and Design, as she takes the audience through an engaging and educational exploration of color theory using the Teenage Mutant Ninja Turtles as illustrative examples. Barrett begins by introducing the three fundamental color groups: warm, cool, and neutral colors.

Warm Colors: These colors evoke energy and positivity, having physical effects like raising blood pressure and enhancing metabolism. Brands such as McDonald's utilize warm colors to convey fun and quick service.
Cool Colors: These colors are calming and reliable, often associated with institutions like banks and hospitals. Facebook exemplifies a brand that employs cool colors to evoke trust.
Neutral Colors: These colors hold a conservative position and can be seen as grounding forces in color palettes.

Barrett connects the personalities of the Teenage Mutant Ninja Turtles to these color groups, describing how each turtle embodies the characteristics of their respective colors:
- Raphael (Red): Passionate, intense, and often angry.
- Michelangelo (Orange): Playful, fun-loving, and relaxed.
- Leonardo (Blue): Calm, intelligent, and stable leader.
- Donatello (Purple): Creative and wise, historically linked to wealth.
- Splinter (Neutral): Represents calmness and balance.

Next, Barrett delves into the color wheel, discussing primary colors (red, blue, yellow) and secondary colors formed by mixing primary colors. This leads to an understanding of complementary, split complementary, triadic, and tetradic color combinations, showcasing the turtles' dynamics.

Color Properties: Barrett clarifies important color terminology such as hue, value, tones, tints, shades, and saturation, illustrating how these concepts can help in color selection and design.
Accessibility: The importance of accessibility in design is emphasized, particularly for individuals with color vision deficiencies. Barrett highlights the need for alternative visual cues to ensure effective communication beyond color alone, advocating for inclusive design practices.

In conclusion, Barrett’s talk wraps up the six parts of color theory covered using the Teenage Mutant Ninja Turtles as a playful yet informative framework. She reinforces the idea that understanding color theory can significantly enhance user interaction in design. The session encourages designers to consider the emotional and cultural associations with colors while also focusing on accessibility to foster inclusive user experiences.

00:00:09.380 Hi, how's everyone doing? Well, welcome to the Teenage Mutant Ninja Turtles Guide to Color Theory.

00:00:15.660 It's by Louisa Barrett. It's me, I'm Louisa! Hi! I am the director of the Front-End Engineering program at the Turing School of Software and Design.

00:00:30.090 We are a non-profit, full-time, seven-month immersive developer training program in Denver. We are also looking for back-end instructors, so if anybody likes teaching and talking to weird people all day, come talk to me afterwards.

00:00:41.640 I am a web developer on Twitter, and a little bit of background about me is that I have been a designer for about ten years and switched over to writing code about five years ago. Color and color theory is one of my very favorite topics to teach.

00:00:55.710 It's a really fun combination of science, human factors, and aesthetics, and it can significantly impact users. For this particular topic, I am qualified to speak about this because I wanted to be one of the turtles, but then I realized that I was not a turtle, a ninja, or a mutant, nor was I a teen.

00:01:13.590 All of these things are still true, which is very upsetting for me. I also am very good at Ruby. (A dad joke, okay?) So that's how you know you can trust me.

00:01:20.610 In this talk, we will be covering six parts: color groups, color associations, the color wheel, color combinations, color properties and terms, and accessibility just a little bit, because it's important.

00:01:36.480 Let's do this! So first thing, when we're talking about color theory, we need to start at the beginning.

00:01:43.210 That basically means we're going to talk about color groups. There are three big 'buckets' of color groupings that all colors fall into: warm, cool, and neutral.

00:01:53.090 When we talk about warm colors, they are generally thought to be very positive and energetic. Colors in these groups have been shown to have a physical effect on people; they can raise your blood pressure, increase respiration, and even enhance your metabolism.

00:02:07.299 If you think about brands that rely heavily on warm colors, they often want to communicate fun, energy, or playfulness. For instance, McDonald's uses warm colors to get you in and out quickly and serve more people.

00:02:19.950 Then we have cool color groups, which are the polar opposite of the warm color groups. Cool colors are generally calmer and have a relaxing effect. They are often associated with stability and composure.

00:02:31.950 Brands that use these colors often include institutions that want you to trust them, like banks, hospitals, and even Facebook.

00:02:47.230 Finally, we have neutral colors, which are generally more conservative. They can skew warm or cool depending on the specific blend.

00:02:54.250 Neutrals are often used as a base for color palettes, with warm or cool colors used as accent colors. For groups, we have mutants, which tend to have fairly specific uses and strong feelings associated with them.

00:03:12.810 It's important to be aware that everyone has very strong associations with colors, whether or not we consciously realize it. These can be subjective based on upbringing or cultural connections.

00:03:22.600 For example, in Western cultures, the color white is often associated with purity, fulfillment, or brightness—like wedding dresses—while in other cultures, it is associated with death, often worn at funerals.

00:03:34.090 When we talk about the Turtles, let’s start with Raphael. He is associated with the color red, which has polarizing meanings.

00:03:46.560 Red can be associated with passion and anger. Raphael, as the hothead of the group and a Jersey boy, has a bit of an attitude problem.

00:04:00.040 Three words that describe red very well include determination, anger, and intensity.

00:04:11.710 Next, we have Michelangelo associated with orange. He is much more laid-back, and orange is often connected with the sun, playfulness, and is frequently used in children's products.

00:04:25.120 Michelangelo embodies the goofball of the group—he is fun, relaxed, and very goofy.

00:04:37.730 Then we have Leonardo, who is associated with the color blue. Blue is known for being calm and stable, often symbolizing composure.

00:04:49.170 Leonardo is the level-headed leader of the group. He is loyal, intelligent, confident, and has a calming presence.

00:05:00.430 Donatello is linked to purple, a color historically associated with wealth and education because the dye was difficult to make.

00:05:11.540 Donatello, as the engineer of the group, represents creativity and wisdom.

00:05:22.490 We can see a clear connection between each turtle's personality and their associated color.

00:05:30.640 Next, we talk about neutral colors. Splinter represents neutral colors as the grounding force of the turtles. He is calm and composed, managing the ups and downs of their lives.

00:05:40.030 Splinter is associated with neutrality because of his character traits and role as their guardian.

00:05:52.060 Now, talking about the color wheel, we need to understand the purity of colors and how specific colors are created. Primary colors—red, blue, and yellow—are pure colors that cannot be created by mixing other colors.

00:06:10.130 For the turtles, Raphael and Leonardo are both primary colors, representing the warm (red) and cool (blue) dynamics.

00:06:23.710 Due to this dynamic, they have conflicts, with Raphael’s fiery attitude contrasting with Leonardo’s calm demeanor.

00:06:33.100 Secondary colors are created by blending two primary colors together in equal amounts, and for the turtles, that relates to Donatello and Michelangelo.

00:06:44.920 While they also represent the warm and cool dynamics, their personalities are slightly less intense, leading to a more harmonious relationship.

00:06:57.090 Moving on to color combinations, the most basic are complementary colors, which sit directly across from one another on the color wheel.

00:07:08.540 For instance, purple and yellow create an intense pairing that can cause visual vibration at their borders.

00:07:19.120 Split complementary color combinations soften the intensity by adjusting the opposing color slightly.

00:07:27.420 If you visualize a triangle on the color wheel, you end up with a triadic combination of three colors that complement each other well.

00:07:38.670 Tetradic color schemes involve using a rectangle on the color wheel, ideally suited for the turtles' character colors.

00:07:48.780 This balanced, equally distributed collection of colors mirrors the turtles’ similar yet distinct personalities, allowing them to coexist.

00:08:06.930 Moving on to color properties, it's important to have vocabulary to discuss and distinguish colors.

00:08:12.280 Hue refers to the pure tone of a color, similar to what you find in basic crayon boxes like Crayola.

00:08:20.180 Value describes how light or dark a color is, with purple having a low value due to light absorption and yellow reflecting more light, leading to a high value.

00:08:30.140 Tones are created by mixing pure colors with neutral or grayscale colors, yielding softer versions of the original colors.

00:08:43.000 Tints are achieved by blending a tone with white, while shades result from blending a tone with black.

00:08:54.330 Saturation defines the purity of a color, ranging from 100% saturated, which is pure color, to 0% saturation, which is tonal gray.

00:09:05.660 You can find a good accent color to pair with a neutral by finding a desaturated gray you want and using 100% saturated color as your accent.

00:09:13.230 Speaking of tonal gray, Splinter represents this shade as he is the combination of all his students, balancing their personalities.

00:09:20.290 It's important to address accessibility when discussing color; about 4.5% of the U.S. population, around 13 million people, have some form of color vision deficiency.

00:09:31.370 Therefore, you should not rely exclusively on color to communicate a message to your users.

00:09:43.290 For example, if a form shows error messages only by changing the input outline color to indicate success in green and failure in red, it excludes those with red-green color blindness.

00:09:54.490 It's essential to include other visual cues, such as icons, to help communicate more effectively. This ensures users receive clear, direct feedback.

00:10:08.050 Visual elements must be inclusive; using distinctive universal symbols alongside color communicates the message more effectively for everyone.

00:10:17.460 By improving accessibility for those with color vision deficiencies, you're simultaneously enhancing the experience for all users. Now, regarding the turtles, while they rely on colors to communicate, their distinct weapons also provide clarity.

00:10:29.350 Each character's unique weapon distinguishes them visually, ensuring users can identify them without solely relying on color.

00:10:54.590 To wrap things up, we covered six parts, discussing colors and conspiracy theories. My research and references largely came from my childhood in the 90s.

00:11:16.520 Do we have time for questions? Would you like to take some questions? Sure, I want to be the first question.

00:11:27.780 How did you discover this relationship between Ninja Turtles and colors? I'm imagining you in your house with pictures of them on the wall.

00:11:37.660 One of the things I work on at Turing is a little bit of a design track within the front-end program. I try to teach basic design principles. When I teach these short design lessons, I'm often met with glazed-over expressions from half the class.