Color Mixing

[00:00:00]
>> Sarah Drasner: So there are these special cases where you have crossover events. This Serop painting are a little, it's actually a painting. So you'd think it's subtractive color mixing. But the way that he painted it was with all of these points. And so all of those bits of points mix in your eye, and create additive color mixing.

[00:00:20]
So if you actually look at some of the yellows in this painting, you'll see a lot of red and greens next to each other, which is really cool. And also, part of the reason why I'm telling you this, is because there's a color wheel in either case. And we're gonna use that color wheel to discuss some of the ways that you combine colors.

[00:00:41]
So some of the ways that you might combine colors are monochromatic, meaning just dealing with one color and highs and lows of keys in that one color. Complementary would be across the color spectrum. Analogous would be next to each other, and triadic would be across three ways. And I'm gonna go over this a few times.

[00:01:02]
One of the things that makes color so difficult, is that a color is only a color in relation to another color. So that gray becomes a very very bright color when it's next to darker colors, and that gray becomes darker when it's next to a lot of light colors.

[00:01:21]
And this goes across different color spectrums. Something that seems blue next to another blue might turn turquoise or green. Something that seems blue next to a yellow will become really bright. So that actually makes color a little bit difficult actually, cuz it's kinda squirrely. You might have a palette.

[00:01:41]
You're like I have a palette, and it's all squirreled away and you add another color and you're like, why does the palette not work anymore? [LAUGH] Partially because of this. And that contrast is actually a really important piece. That's why someone will create something that's really an accessible color palette, and then be like, why did it become not accessible?

[00:02:00]
Well, it's because of the contrast to another color. So if you're creating a website and you're using different colors, you should check the contrast for accessibility purposes. And there are some really good tools to do that with. Colorable is one of my favorite ones. You enter two colors and it tells you basically if it AAA, if it's really great, AAA and then A.

[00:02:23]
And then sometimes it will just be like fail, and then you're like, no. But it's also really great if you're working with someone else and they're like, we can totally use this. And you can copy the URL, it has the colors in the URL. Copy and send it to them and be like, and it will be like, fail.

[00:02:39]
[LAUGH] And it will be like, we can't use these colors next to each other. That won't work. So contrast A, accessible colors. And then there's text on the background image AI checks. So those are all linked up in the slides that you can check out too. So let's talk about, we're gonna talk about all of those.

[00:02:57]
I mentioned some color combinations. Now, let's kind of dive into those color combinations. So monochromatic is what you might think. Mono meaning one, chroma meaning color, one color. So you can actually make really beautiful color palettes by just sticking to one color, honestly. All of these are really nice palettes that I might work with myself.

[00:03:20]
Analogous is, remember, we talked about analogous being a color and then the colors that are next to that color. So not exactly just monochrome, but colors that are kinda near it on the color spectrum. So this one in particular is an analogous color mixing, where they're all the same key, key meaning how bright, how light and bright it is.

[00:03:43]
And this is that same color palette adjusted for web design, where you might change the keys a bunch, and then you have things that are kinda complements and have a little bit more contrast. So here's an example of an analogous color mixing in a design. You can actually look at it and know, okay, well, actually the screen makes it look a little bit more turquoise.

[00:04:08]
On my computer, those greens are a lot more blue. And you can see how it looks really of the same kind of color scheme, and holds together really nicely. There's also split or split complementary, triad complementary and triadic. Don't worry, we're gonna go through and I'll show you a tool where you can play with all of these things.

[00:04:36]
So here's an example of split complementary. We've got all of these blues, but also it's not even an accent because we're really heavily leaning on the orange too. So you could just use all blues and only use orange as a tiny little bit of color. But instead, they've decided to go and almost split all the colors up between the blue spectrums and all these oranges.

[00:05:00]
So this cooler, well actually, it's called color CC now, but it was called cooler for a decade. So I can never not call it that, even though they don't call it that anymore. So we can go to color.adobe.com and check it out.
>> Sarah Drasner: It's pretty nice. It starts off with all of these different shade.

[00:05:24]
It starts off with all these different shades, so I can go Analogous. You see how it draws along here, and I can kinda pull this around. And I can even make it higher key, lower, and kinda play around with it. I can also go monochromatic, stays within the same color.

[00:05:44]
You see how they're the same, but all of these dots are different pieces, like it's basically changing how high the key is, triad, so I can move this around. Triad is when you do it really well, it's awesome, but it's easy to mess up and look really bad.

[00:06:04]
There's something there, right? I could probably make a decent composition and color with that, but there's definitely some fails in here before that, right? But there's triad. We got complementary. So complementary can be really nice. And I do suggest that actually when we start moving towards the exercises, even if you use a monochrome palette, I'm gonna make you pick an accent.

[00:06:29]
So we're kind of always gonna be working with complementary. Because it's important to have accents within your color palette so you can draw people's attention to certain things and just accent tiny little details and offset it.
>> Sarah Drasner: Compound is kind of whatever you want it to be. [LAUGH] And even within this, you can explore.

[00:06:55]
So they have all of these different color palettes that other people have played with and worked with. And you can fork them. I'm sure they don't call it forking. They probably call it something else. But I don't even know the word for whatever fork is in real life [LAUGH] anymore.

[00:07:12]
So you can fork it and change all of the colors. And you can submit your own, and people can vote on it and you can see how much it was used. And you can also download it and edit it, and all. All sorts of cool stuff. You don't have to be a color genius, you can just steal color palettes.

[00:07:33]
So even within monochromatic, you can have a bunch of different color palettes. And this slide, I added in because of the link. There's color theory for designers, creating your own color palettes is a smashing magazine article. So if you wanna kind of design some of these color palettes, that's really great.