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.