 Hi, how's everyone doing? Welcome to the Teenage Mutant Ninja Turtle Guide to Color Theory, it's by Luisa Barrett. It's me. I'm Luisa. Hi. Hi. I am the director of the front-end engineering program at the Turing School of Software and Design. We are a non-profit, a 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. I am on WCB on Twitter and a little bit of a background about me. I've been a designer for about ten years and I switched over to writing code about five years ago and color theory is one of my very favorite topics to teach and it's a really fun combination of science and human factors and aesthetics and it is something that can really have a big impact on users so it's really fun. And for this particular topic, for this talk, I am qualified to speak about this because I wanted to be one of them. Then I realized that I was not a turtle or a ninja or a mutant or a teen and I couldn't be and all of these things are still true which is very upsetting for me. I also am very good at ruby, yeah, so dad joke. Okay, so that's how you know that you can trust me, yeah, very trustable. So this talk, we are going to be in six parts. We'll talk about color groups, color associations, the color, whoops, it went too fast. The color wheel, we'll talk about color combinations, color properties and terms and accessibility just a little bit because it's important. So let's do this. Here we go. So first thing, so when we're talking about color theory, you need to start at the beginning and so that basically means that we're going to talk about color groups. So there are three big like buckets of colors that are groupings that all colors fall into. They are warm, cool and neutral. So when we are talking about warm colors, they are generally thought to be very positive and energetic and colors in these groups have actually been shown to have like a physical effect on people. So they can raise your blood pressure, they can increase your respiration and they can even enhance your metabolism. And if you think about like the kind of brands that really lean very heavily on warm colors, they're often trying to communicate like fun or energy or playfulness or like maybe McDonald's. They are trying to get you in and out really quickly so they can like serve more people extremely, or what, McRibs? Is that what we're doing? Yeah. So then we have cool color groups, sort of polar opposite of the warm color groups. Cool colors are generally calmer and relaxing. So colors in this group are often associated with stability and composure. And again, if you think about brands that use these kinds of colors, you'll see a lot of institutions that really want you to trust them. Like banks and hospitals and insurance companies and Facebook. Why not? Yeah, take my user information. It's fine. Then we have neutral colors. These are generally more conservative. They can sort of skew both warm and cool depending on sort of the specific blend. Like on this particular example, we have like the top three colors are a little bit cooler and then the bottom tan colors are a little bit warmer. And they can, they're generally often, they're generally used as like a base for your color palette and then your hot or warm color or your cooler. Warmer cool colors will be used as like an accent color on top of to be paired with a neutral color. And then finally for groups, we have mutants, which tend to have also fairly specific uses and very strong feelings associated with them. So if you think about like the X-Men or Godzilla or the Turtles, they have very strong like cultural associations with mutants, which leads us to color associations. So it's really important to think about when you are using color and leveraging color to just be aware that whether or not we really consciously realize it, everyone has very strong associations with colors. So these can be fairly subjective based on how someone grew up or which culture that they are more most connected to. But it's just something that we can really leverage when we're thinking about design or just user interaction. And it's also just be important to realize that some colors have different associations based on just different cultures or parts of the world that someone grew up in. So if you think about like the color white, in some cultures, most Western cultures, it's often associated with like purity for fulfillment or brightness, like wedding dresses are white. And in other cultures, it's associated with the depth and it's the color that people will like wear to funerals. So they're very different associations with specific colors. So when we are talking about the turtles, we have Raphael. All right, so good old Raph, right? He is kind of a hothead. He is associated with the color red. Red is one of these colors that has very polarizing meanings associated with it. It can be very strictly associated with it's very passionate color. It can be associated with anger. It can also be associated with love. Raphael is that in a nutshell, right? So he is he's the hothead of the group, right? He's kind of a jersey boy. He's got a little bit of an attitude problem. He's very much like he's very much bound by this color association with red. He is we think about three big words that are associated with red. We have like determination, anger, he's pretty angry gets a little bit grumpy sometimes. And then where he's a very intense character. If we think about the color orange, we have Michelangelo, right? So Mikey's much more laid back orange itself is often associated with like fun. It's much more playful. It's often used in in ways to communicate with like children. It's like often used in children's books and toys and things like that. So it's a very much it's a very lighthearted color, which also ties very directly into Michelangelo's personality. He is like the goofball of the group. He's very laid back. He's really fun. He's really goofy. Then we have blue and we have Leonardo, right? So blue is definitely one of these colors that is very like calm and stable. It's often associated with like composure and again, just stability. So Leonardo is the one in the group who is very he's very level headed. He always thinks through his decisions before he acts. He is the one who's sort of like navigating any conflicts and amongst the group. He's the he's the leader, right? So if we think about colors that are terms that are associated with with blue, we have he's very loyal. He's very intelligent and he's very confident, right? But he's very calm about it. So he's very soothing character. Then we have purple. We have Donatello. So this is the history of purple is kind of interesting. It was historically to get to make the dye for purple. It was very difficult. So the only people who could afford to do that were people that had money. So you would have like a clergy or people in like like Kings and quit like leadership leadership positions, but with monarchies, right? So I forgot the word. I don't know. So we have so then we have Donatello. So but historically, since purple was only was only accessible by people that were very wealthy, which typically meant that those people were also much more educated than the rest of the population, purple was associated with education. It was associated with creativity. It was associated with wisdom. Then we have Donatello, who's like the engineer of the group, right? He's the problem solver. He's the one who can sort of get handled a problem and figure it out. So we have very clear connections between which color group and which specific color the turtles are associated with and their personalities. And we have neutral colors. And again, neutrals are sort of the background for everything else. And we have splinter, right? So splinter is basically like the grounding force of the turtles. He is totally neutral. He doesn't get worked up about anything. He can sort of handle all the ups and downs. He's basically he's raised these guys since they were tiny little radioactive babies. And you know, he's just he is he's their grounding force. And he's very so he's a neutral color because he's associated with those characteristics. So now we're talking about the color wheel. So this is going to help us understand the purity of colors and how specific colors are created. So when we're talking about the color wheel, the first thing we need to think about is primary colors. So primary colors are pure colors. And they are the base of all other colors. They're also the most simple colors. So you cannot create a primary color by mixing any other color. So they are red, blue and yellow. So these are like our base colors and all other colors come from them. When we think about the turtles, we have Raphael and Leonardo. So they are not only these two very defining warm and cool colors, red and blue, they are also primary colors. So they are the most sort of pure and potent personalities of this group. They're also because they have this warm, cool dynamic. They fight more. They are there. They have more conflict with each other. They are going to butt heads a little bit more and Raphael is going to try and push Leonardo and Leonardo is going to kind of roll them back a little bit and like keep them under control and keep them from blowing up. Then we have secondary colors. So secondary colors are created by blending two primary colors. So you will essentially just have two colors that are blended in equal amounts, two primary colors that are blended in equal amounts. And then you end up with a secondary color. Again, when we think of the turtles, we have Donatello and Michelangelo. So again, they are slightly less intense personalities. You still get some of that hot, cool dynamic. Again, like Donatello is still kind of goofy, but he's a little bit more studious, a little bit more serious. And then Michelangelo is pretty goofy and pretty laid back about things. So you get some of that hot, cool dynamic, but it's toned down a little bit. They don't really butt heads very much. They get along pretty well. They kind of, they get along with the whole group pretty, pretty effectively. Next one. We have color combinations on how to, let's talk about how we're actually going to combine colors together effectively. So when we are talking back to the color wheel, so the most basic, straightforward type of color combination is a complementary color combination. So these are two colors that sit directly across from each other on the color wheel. Like in this example, we have purple and yellow. They're going to be, it's going to be a pretty intense, a pretty intense pairing. There may be some amount of visual vibration between, between the two when they're butted up next to each other, like that boundary edge between the two colors may actually kind of vibrate a little bit when you look at it, just because it's a very intense, high contrast color pairing. It's, it's a very easy type of color combination to make, but it's not necessarily particularly nice. It may be a little bit, a little bit icky, you could say. Then we have the split complementary color combination, which is essentially taking the ease of creating a color combination from a complementary color combo and then just going up a tick or down a tick on the color wheel for the opposing color to just soften that a little bit. So you'll see many, you know, sports teams that are leveraging this. It's great, easy, very bright, it's very fun, it's very, it's an easy combination that looks nice. Then we have this concept of a triad. So essentially if you drop a triangle on the color wheel, you end up with an equally distributed combination of three colors that's going to give you a pretty like interesting, varied combination of colors that's going to work nicely together. Then we have this concept of a tetradic color scheme. So this is where you drop a rectangle on the color wheel and you end up with the turtles. Hurray! So this is as close as I get to conspiracy theories. So we effectively have, we effectively have a very intention, what may have seemed like an arbitrary collection of colors is actually very intentional. So you can see that we've got this very balanced, equally distributed collection of colors that are being used for these characters. So you get a really good, balanced mix of hot and cool contrast, which has been reflected in their personalities, and then you also get quite a bit of contrast, but in a way that isn't going to conflict. So they're not going to necessarily, these colors aren't going to like fight with each other similar to the turtles. They're going to still get along. They might butt heads a little bit, but they're still going to get along in the big picture thing. So we have color properties. So this is essentially, we are going to talk a little bit about how to distinguish and define colors. So in this example, so we are going to just talk about some vocabulary, just so we can have better better words and better terminology when we're working through this. So we've got hue. So hue essentially just if I went too fast. So hue defines, too fast again. All right. Well, I've messed my slide up. All right. So anyway, so hue is effectively a, pretend there's a color, pretend there's a color wheel there. So hue is effectively like a pure color, and it describes, it describes like the pure tone. It could be, it could be used as like a synonym for, it could be used as a synonym for just pure color. It's often used as the colors that are, it's often used to describe colors that are like in the basic box of like crayola crayons. So if you have like an eight pack of crayola crayons and they have names like orange and red and blue, like you have these colors and those are often what's associated with hue. Then we have value. Value is used to describe how light or dark a color is, and it has to do with how much light is being reflected back into your eye from the color. So in this example we have purple, which is a, is going to have a low value because it is absorbing more light and then yellow has a high value because it reflects more light. So it's a lighter color. So, so we have hue, which is a defining like the purity of a color. Then we have value, which is describing the light or darkness of a color. Then we have tone. So tone, it tones are essentially made by mixing pure colors or hues with a neutral or a grayscale color. So a tone is often softer than the original color. So tints and shades are considered tones. And if we see here, this, this circle on this far side, or the side closest to me, excuse me, is a, is a tone. The center would be a tint because it is, it's blending that tone with white. So it becomes a little bit of a gradient, but it allows you to get a range of colors with from one tone. And then the far, the far circle on the left is a shade, which is made by create with blending a tone with black. So then you have, if you can like skew to like the, to the dark side. The dark side of your color, I don't know. So then we have this idea of saturation. So saturation is pretty cool. So saturation defines the range of purity for a color. And it goes from 100% saturated to 0% saturated, which becomes a tonal gray. So if we look at this example here, again, the bar that is closest to me is going to be 100% saturated. So it's a pure color. And then we're just taking incremental steps down to this tonal gray, which is completely desaturated or 0% saturation. So then we have, so we have this full range. And it's kind of an interesting thing too, if you look at this, when you take these incremental steps, you end up with almost what looks like a gradient on each bar, but really it's just a solid color. So that is actually like a little bit of like an interesting like trick that your eye is playing on you, just because you've got these evenly stepped bars of color, which is kind of neat. So this is a great way to like find an accent color with a new, to pair an accent color with a neutral color. You just find like the desaturated tonal gray that you want to be, that you want to use as your neutral. And then you can use the 100% saturated color as the, as the accent color. So then when we're speaking about tonal gray, blinter is the tonal gray. So effectively what we've got is like, because again, tonal gray comes from the way that when you're when you're actually painting, when you're actually like creating these colors yourselves and mixing these colors yourselves, you take two complementary colors, so two colors that are directly across from each other on the color wheel, and you blend them in equal amounts, and then you end up at tonal gray. And that's how you end up with a neutral color that still has enough of these these hues and tones from the original colors to allow you to really balance them very nicely and blend really well. And so splinter is at the center of the turtles. So he has an equal combination of all of his students. Yeah, so he's a combination of all of them effectively. And you can see all of these little pieces of him in them, which is just an interesting thing. Then we have some accessibility strategies. So we've talked a little bit about just basic color terms. We've talked a lot about how to talk about color and speak about color and just what kind of going on under the hood and just like how colors are formed. And it's would be kind of a misstep to me personally to not talk about any amount of accessibility when we're talking about color, because about four point five percent of the population or in the US alone about 13 million people suffer from some amount of color vision deficiency. So that's a large set of users that who aren't going to be fully color-sided and may struggle to see certain elements on your page if you don't carefully keep track of what color you're using and how you're using them. So a big thing to think about is that you shouldn't rely exclusively on color to communicate a message to your users. So as an example, we will just, you know, who doesn't love a form? Forms are great. Thanks. Yeah. Shout out for forms. Nailed it. All right. So if we look at this in this example here on the left, we have a form that's showing error messages exclusively by changing the color of the outline on the input. And we're using green to signal success and red to signal failure. Like that makes sense. If you can see color fully, that's great. That works fine. But the most common type of color blindness is a red-green color deficiency. So you're setting a large, significant chunk of your users up for failure. As you can see on the example, which is the same form that's been put through a simulator to simulate red-green color blindness. So you can see that suddenly, like, we have no information about why this form has just failed. Like, we don't get any feedback on this. So because we're just relying on color. If we make some simple changes, and again, don't just rely on colors to communicate with your users, you should rely on some other visuals and some other approaches to help communicate more effectively. So now if we look at this, we are still using red-green to communicate success error. And then we also have pulled in some icons that are very distinctive and sort of like universal, universally understandable. And then we also are pulling in error messaging. So we're able to incorporate a little bit more information that's very clear and very direct for your users. And this is going to help not only your users with vision deficiencies, as we can see on that far example, when it's been put through the red-green color blindness simulator, it still holds up really effectively, but it's also going to be more effective for all of your users. So you're making your, you're effectively making a better product for everyone by taking accessibility restraints into consideration and fixing stuff. So that's a good thing to do. And then of course, when we tie it back to the turtles, here we go. So we are, while we are relying on the colors to communicate which turtle is which, we are also, we, now I've put the turtles through a color vision deficiency simulator. I did it. So but now we can still understand which one is which because of their weapons. So we still know exactly which character is which because they all have very different, very unique and distinctive weapons. So we are no longer just relying on color to define and explain which character is which. Now we are leaning on some different visual tools and visual cues to help communicate which character is which. And now we know, and now, and now essentially we are making the turtles more accessible. We did it. Hooray. I think, all right. To wrap it up. There were six parts. They covered colors and conspiracy theories. My research and references were exclusively about from being a kid in the nineties. And I'm pretty sure that I nailed it. Wow. That was amazing. I get it. Do you have we have time for questions? Would you like to take some questions? Sure. I want to be the first. I want to be the first question. How did you? So how did you discover this relationship between Ninja Turtles and colors like I'm imagining you in your house with with pictures of them on the wall and red straight red yard? Well, so one of the one of the one of the things that I've worked on at Turing is I kind of got a little bit of like a design track that goes through the front end program. And I tried to teach like basic design principles and because they're all these are all people who are like really excited about learning to code and really excited about programming when I am teaching these design lessons. They're very short. They're like one hour a week for like three or four weeks. I can start to see like there's like half the class who is super into it and half the class that you can just see their eyes glazing over because they're like you need lady shut up and I'm like, no, it's important. And I just started talking about this. This is like a little bit of a thing that I would just go off on a tangent when I was teaching color theory and it would make people stop glazing over a little bit. And then I did it as a lightning talk as a joke. And then now I'm here. Thank you. You're welcome. Do we have any two of them here? I am going to go to you first. Let me I will run right over. Thank you very much for the talk. I'm just wondering who your favorite turtle is. Leonardo because I'm bossy. All right. All right. So the perfect triangle on there was red, blue, yellow, but we often put values on red, blue and green. Why is that? So the so for the tetradic example for colors. So so so for that particular example, it was dropped on that that triangle was dropped on the color wheel and it just fell on red, blue and yellow. And then I think that sort of like the perfect would be red, red, blue and green. I don't know that it's necessarily perfect. I think it's just that's the way screens work, right? Red, blue and green. Is that screens? Oh, I did it. Thank you for validating me. Amazing. Does that kind of answer your question? I don't it wasn't like super. It's not like a super intentional. Hi. The web content accessibility guidelines talk about contrast ratios when you're talking about text to the various colors on the web pages. Have you figured out any good tricks or ways to utilize bright, nice colors without violating color contrast ratios? That's something that we've been dealing a lot with trying to become more accessibility compliant. Right. So I think so what I so the question is basically like how do you make sure that when you're choosing colors that still use very vibrant bright colors? How do you make sure that you're still hitting accessibility guidelines for visually impaired users? So I tend to personally make sure I will start off by like picking the color palette that I want. And then I make sure that I run all the sort of color combinations through that contrast through a contrast ratio like checker to make sure that they're going to still hold up because often what you'll find is like even if you have to slightly adjust adjust your colors or increase or decrease like adjust values a little bit to make something a little bit darker a little bit lighter to make sure that they stand out enough. You will still you will still have those those fun vibrant combinations and it'll be much more legible for all of your users. So one thing that I've noticed is that initially I do it and I'm a little bit sad because I'm like these colors aren't quite as fun. But then afterwards you you realize like oh actually this is like a much better more legible thing now. So I usually I really leverage those accessibility those like those contrast check those contrast checkers. Do you have like a book or other resource that you'd recommend to engineers who want to kind of like improve their design intelligence and stop making the same ugly bootstrap website over and over again every every bootstrap site. The there are there are a lot of with the Ellen Lupton has some really great books on typography. So there's one called thinking with type which is really great. There is called don't make me think which is great for like UX. I think a lot of it is just kind of understanding some basic fundamental principles about just how people want like kind of perceive their surroundings and just like like how to make things more legible. So both of those books are really focused around again like legibility and communication because essentially design is like you're communicating with people and you need to be able to to talk to someone without speaking to them. So I would say starting with like typography and then just some basic UX strategies to make things more usable for people is always a great place to start. I'm on my way. Do you have any favorite tools for that you use for contrast checkers. So there is there's a really simple one by well it's it's a little bit simple by Leigh of Rue and it is you just can put the two colors in and it just tells you whether or not it's passing all the various guidelines and then there is a the W3C has like like all of their accessibility guidelines. They have actually a really good contrast checker that allows you to like has little sliders that allows you to like check and see how much contrast you have and it allows you to like adjust the actual hex values and stuff very very incrementally and make sure that you're still getting the same the same tone but you can like you know add white or add black to it to make it to get a little bit of a shift. So that's that's a great that's a great tool. It definitely looks like just plain old like 90s HTML page but it works really well. Is there an effective way to use math to like just in a general sense create your your color themes. There there probably is. I went to art school though so I don't know. I'm sure that I'm sure that there is there. I'm sure there's something to do with like I mean I mean I'm sure that that's how those contrast ratio checkers are working their base. I'm sure that they're just leveraging that. But I'm not totally sure what what's actually going on behind the scenes. OK. I am tired of running around. I mean that has heavy. One more one more. OK. All right. So this isn't really a question. I just feel like this is an appropriate time to make a shout out to my homeboy. Roy D. Biv. All right. Thank you so much. Everybody. Lisa.