Design Systems with React & Storybook Color Overview
Transcript from the "Color Overview" Lesson
>> There are things that I've been researching, things I've learned from experience, but again, I'm not a designer. So if you are looking for a designer, I can't answer all your questions, but I'm gonna do my best. So let's talk about color for a second. How how many of you knew that there were two different types of color mixing?
[00:00:21] Okay, Matt, maybe Daniel a little bit, cool. There are two different types of color mixing. I didn't know this. Additive color mixing. So colors actually start black and become white as more red, blue, or green are added. This is used for TVs and other computer monitors. Subtractive color mixing actually start white and as filters are added, they take on the appearance of color.
[00:00:44] So this would be for printed media like photos and magazines. I didn't know that, I thought that was really interesting. And there are actually a couple of different color types that you've probably heard of, maybe you don't know exactly what they are. So let's let's talk about those.
[00:01:01] Primary colors. So this kind of takes us back to art school. I didn’t go to art school. I meant like when you are in elementary school and they make you go to art class and you’re like, primary colors. Primary colors are colors that cannot be created by combining other colors.
[00:01:15] So in this case it's red, yellow, and blue. Secondly colors are result from mixing two different primary colors. So if you mix red and blue you get purple. If you mix green and orange you get yellow. And, what's the other combination? Purple. No. Blue and yellow, you get green.
[00:01:38] And tertiary colors are created by combining a secondary color with a primary color, and there are six of those here. And you noticed that these were on a wheel. These were actually in a circle, the color wheels are very fascinating in terms of different kinds of color pallets.
[00:01:55] I'm sure we've all looked at UIs and been like that looks really great or this looks horrible, and a lot of times it's due to color theory. So let's talk about color palettes for a second. We've got monochromatic, they are created by establishing variations on a shade of one color.
[00:02:09] These are generally very safe color palettes. You'll see a lot of resume designs as well use monochromatic, cuz it's a very safe choice, but it can be a little bit boring. So if you work in an exciting company or you're building an exciting product, maybe you want to pick a different color palette.
[00:02:27] Complementary color palettes are created by selecting two colors opposite from each other on the color wheel so they balance each other out. Then we have analogous. So analogous color palettes, you select three different colors on the same side of the color wheel. Triadic is super fun. This one's a little bit edgier.
[00:02:47] It's not done as often I would say, but they're created by selecting three colors evenly spaced around the color wheel. And so by using these different color palettes we can easily kind of unify our UIs to look a little bit nicer.