[00:00] Do you remember watching black and white movies, before your time? Well, just pretend with me for a moment. When color was introduced to film, it added another layer of beauty and understanding to the content, that really couldn't be experienced with only gray scale. Color is a powerful tool, and when used appropriately, it generates a purposeful and emotional impact, which allows for a better understanding of what's important as well as how a design or layout is supposed to work. But with great power, comes great responsibility. One thing to keep in mind is that, if a design isn't working in black and white, adding color won't make it any better. If anything, more colors will only add more visual noise to an already unsuccessful design. It's important to get the fundamentals of a design down and then add color to reinforce the message. In this video, we'll be talking about the basics of color theory, how color carries emotion and some tips on how to use color more effectively in your projects. Let's start with the basics, so we have a firm understanding of terms and theory.

[01:06] Color is the visual by-product of the spectrum of light as it is either transmitted through a transparent medium, or it's absorbed and reflected off a surface. Color is the light wavelength that the human eye receives and processes from a reflected source. When designing, we normally use a color wheel, that is broken into different sections, hue, saturation and value. Hue is the color in its purest form, yellow, red, blue, et cetera. Saturation is the brilliance and intensity of a color and can be adjusted based on how much or how little other hues are represented in the color. The value of a color can be categorized in two ways, tint or shade. A light value called a tint is achieved by adding white to the base color. A dark value called a shade is achieved by adding black to the base color. You've probably seen shades and tents of primary colors used in many designs to create contrast. Contrast isn't a setting or part of a color wheel, but it's an important concept to keep in mind.

[02:06] It's the difference in color that makes an object distinguishable from another. On screen we have some examples using different degrees of contrast. On the left, we have an example of low contrast as the circle and the rectangle is very hard to see. Generally speaking, if that circle was important to the design, then such a low contrast would actually be a bad choice since it's so difficult to notice. On the right, the color of the circle and rectangle are highly contracting, making the circle easy to see. Again if the circle was important to a design, then this would probably be the better choice since the two shapes stand out from one another. What do you want to strive for when selecting colors is a good contrast that promotes legibility and hierarchy. It helps using black and white the ultimate contrast as your main point of reference. There's a reason why most written content is black text on a white background. Colors can be described with hue, value and saturation. Hue is simply the color in its most form. Value is a hue that is either shaded or tinted.

[03:03] Saturation is how much of a hue is present in any given color. And always keep contrast in mind when creating color palettes. Now that we've gone over what color is, let's talk about what it means. Have you ever noticed how certain types of companies use similar colors for their branding? Think about fast food chains. In these examples on the screen here or any other you can think of, there's almost always red and yellow represented somewhere. The reason for this without going too deep, is that the colors red and yellow generally make you hungry encouraging you to want to buy their product. At the same time, these colors tend to make you feel happy. Whether you're aware of it or not, colors are connected to emotions. There's even a field of psychology dedicated to this. Color psychology studies hues and their influence on perception and human behavior. This is another reason why color is such an important aspect of design. It allows us to influence people's perception when it comes to seeing your logo, branding or interface. With that in mind, here's a breakdown of some colors and they're related emotional connections.

[04:04] I should also add that this is not an exhaustive list of feelings and color, rather, it's a brief overview to get you thinking about how the colors you're using may affect the perception of your brand or project. Thinking back to our fast food example, it makes sense why red and yellow are so prominently used in that industry. Excitement, happiness and cheer are inviting. Whereas a fast food chain that uses black and white for their branding, might appear less inviting. To be clear, I'm not saying that black and white are bad colors to use in a brand or design, they all have some meaning associated with them. So depending on what you're trying to convey, some of these colors would better accentuate your design, it just depends on the context. Now that we talked about some meaning associated with colors, I'm sure you can think of several brands and logos that make use of these colors. The folks at these organizations responsible for designing and maintaining the branding, chose those colors because they wanted to associate the meaning of that color with their product or service. Here are a few brands that come to mind.

[05:03] Did you think of any of these two? Colors are absolutely influential to a person's perception. When picking the color palette, always try to keep in mind the meaning of colors. Now that we've gone over the basics, let's talk about how to create a basic color palette. I want this palette to be energetic, but also something people can trust. Let's start with blue. Looking at the color wheel, we see we have some options as to where to go next. There are a few paths to take that will get us a nice palette very quickly. The first path is the monochromatic path, which involves creating shades and tints of the primary color. However, it does feel rather lacking, visually speaking, it's not very interesting. And it doesn't offer enough contrast to make a good candidate, to utilize across an entire project. We'll want to explore some additional options to use as a secondary color. One way to do this, is to choose a color that's one or two spots over from your primary. This helps you create an analogous color palette. You can see here we added green, but maybe green doesn't fit very well with this project.

[06:04] Or maybe we want an even greater contrast between the primary and the secondary. To make that happen, let's try a complimentary color, which is directly opposite of the primary color on the color wheel. The complimentary to a primary color has the greatest difference of hue, giving the pallet a more striking contrast. Now we have blue as the primary and orange as the secondary. To build out our pallet more, let's grab a few tints and shades of orange, and add those to the list. There are a lot of other more complex pallets out there to explore, but let's focus on mastering the basics first. If you're interested in exploring more color palette options, there are some useful websites out there that can help you choose colors. See the description for more details. But as always, just keep it simple. The more colors you add, the more complex and visually cluttered your design will be resulting in a less than ideal with user experience. In review, monochromatic pallets are the simplest to create since they're just shades and tints of a single hue. Analogous color palettes are made up of two hues that are adjacent to each other on the color wheel and offer you more options.

[07:02] Complimentary color palettes offer the greatest contrast, since you're selecting colors that are on opposite ends of the color wheel. Regardless, just keep it simple. Too many colors can actually add more problems later on. All right, say you already have a set of colors that your company or a customer uses. In this case, that actually makes things a little easier from the start. Company X uses orange and blue in their branding. Taking those two colors to start with, we can create an interface branded with fair look and feel. Add a little orange here and a little blue there, perfect, done. Maybe not. We briefly stated it in our visual hierarchy and cognitive load videos, but it's important to not overdo color. Otherwise it will be left with a design that is screaming for attention everywhere. Really, we want to have just the elements that are important standout. When theming a design with your corporate colors, it's important to consider how much of each color you're using and where you're using them. As you can see from this image on the screen here, using color correctly is vital to user experience and making your design easy to understand.

[08:07] With the corporate pallet of blue and orange, let's step back to the gray scale design and go over a few things that you need to consider when coloring buttons, texts and other user interface elements. Since buttons are usually one of the most important elements of an interface and most likely need to stand out, using your primary color for them makes sense. From our fictional brand palette earlier, we had blue and orange as our primary and secondary colors. Since orange has a little more excitement to it, let's use that for the primary button and then blue for the secondary button. Every interface I've seen or worked on makes use of both an accent color along with different shades of gray for a topography. For texts, it's nice to have a core color along with a few variations of gray for creating visual hierarchy. Using the core color for a headline or accent text than a darker for the main text and a lighter version for subtext or captions. In other words, text that might not need the user's full attention or is otherwise considered less important, could probably use a lighter text color.

[09:06] Don't forget to document these two. As the colors you select, should probably be added to your design system. Now we can change the background color to group similar or related information. In addition we can use lines to separate thoughts. You can use your primary or secondary colors for these, along with a few more gray tones. Most likely those gray tones should probably be lighter than your text. One thing to keep in mind here is visual hierarchy and contrast. Try not to overuse the primary color so much, that it takes away their prominence. Like the bad example from before, if everything's blue and orange, it's hard for the user to tell what's important. Depending on what visual style you are trying to convey, you may use a more or less color with these elements. In this example, I'm using gray on some of the less important elements. So focus can be on the main content and not the secondary elements. The last thing I'd like to cover is the use of color for actions and warnings. It's recommended to have a standard set of colors in your palette for these. Generally, green, yellow and red are common choices.

[10:03] It's recommended to have a standard set of colors in your palette for these. Usually green, yellow and red are common choices. We talked about colors and their meaning earlier and that applies directly to actions. Colors like green, yellow and red are normally associated with a affirmative warning and negative actions or messages. Keep that in mind when selecting a pallet or choosing colors for buttons or actions in your project. To make your designs more accessible to everyone, it's always important to use multiple forms of visual communication for things like actions and warnings. If you depend on just color to grab someone's attention, you might only be alerting a portion of your users. Those who are color blind might be unable to discern between these colors. Additionally, depending on what your primary and secondary colors are, these actions and warnings might not stand out at all to folks with certain types of colorblindness. It's crucial to use supporting text and possibly other elements to visualize these alerts. It's important to use supporting text and possibly other elements to visualize the alert as well. Key points for this section are, apply colors incrementally, you'll very quickly develop an idea of whether or not you're overusing a color.

[11:07] Use a primary color for buttons and headlines. Use shades of gray for text, interface objects and separation between content. Include action colors in your palette. Again, green, yellow and red are fairly common. For better accessibility and usability, use both text and colors for actions and warnings. Color is an invaluable tool to have in your toolkit, use it wisely and consistently to create engaging designs that bring life to your content. Color is also complex, so keep it simple from the start, and try to add in layers as you go one step at a time.