Value and Color6:55 with Nick Pettit
Value is the lightness or darkness of a tone or color, and color is the addition of hue and saturation to a value.
- Value - The lightness or darkness of a color or tone.
- Color - The combination of value, hue, and saturation.
Adobe Color Wheel - Use this tool to explore color and create color schemes for websites, logos, and other design projects.
Value and color are two closely related elements of art and design, 0:00 let's take a look. 0:04 Value is the lightness or darkness of a tone or color, 0:06 with black and white at both ends of the value spectrum, and grays in the middle. 0:11 This does not necessarily mean the absence of color. 0:20 Value and 0:25 color can stand on their own, but they can also interact with one another. 0:25 In the art world, value is typically thought of as a scale or 0:31 a spectrum going from black to white. 0:35 And in the digital world, 0:39 this is often represented with words like brightness or luminance. 0:42 When you're creating designs, it's a good idea to keep the value scale in mind. 0:47 If you create a design that uses a narrow range of values, 0:53 you might end up with text that's difficult to read, or 0:56 buttons that have such low contrast, they look like they're deactivated. 0:59 And by contrast, pun intended, you generally should avoid 1:04 creating designs with pure black and pure white everywhere. 1:09 It's fine for some added emphasis and contrast in certain areas. 1:13 But when everything is high contrast and emphasized, then nothing is emphasized. 1:17 Getting slightly away from pure black and white and mixing in some grays will 1:24 help your ability to visually communicate and direct the viewers' attention. 1:29 Color is another element of art and design, and 1:35 it can be thought of as the combination of value, hue, and saturation. 1:40 We just learned that value is lightness and darkness, but 1:47 hue has a more technical definition that involves a lot of math and science. 1:53 But for our purposes, 1:58 we can think of it as where a color falls along the visible spectrum of light. 2:00 And saturation is how much of that color is present. 2:06 Full saturation is as much color as possible, and 2:12 no saturation is back to our black, white, and gray value scale. 2:17 Let's take a look at some of the most common color schemes and 2:23 how they can be used. 2:26 To demonstrate, I'm going to use Adobe Color, but the concepts I'm 2:28 going to teach you here apply universally and aren't specific to this tool. 2:33 You could find a link to this tool in the notes associated with this video. 2:38 Let's take a look at a monochromatic color scheme. 2:42 A monochromatic color scheme just uses one hue, 2:47 but could be used with several different values. 2:51 For example, sometimes old and white photos have a reddish 2:55 brown sepia tone, but they don't have any other hues, just differences in value. 3:01 This type of color scheme can be used to make something feel elegant, and 3:07 it's most commonly seen in luxury cars, or even expensive computers. 3:12 Next is analogous color schemes. 3:19 These are colors that are next to one another on the color wheel. 3:24 You might have an analogous color scheme with warm colors, 3:28 like red, orange, and yellow. 3:33 Another analogous color scheme might be green, 3:36 greenish blue, and blue. 3:40 This type of color scheme can be good to create a uniform look for 3:44 a brand or a company logo. 3:48 And then it can be carried over into user interface design, and 3:51 even mixed with other color schemes. 3:55 We'll get into that in a moment. 3:57 One thing I do want to point out is that these colors don't need to be 4:00 perfectly spaced like this along the color wheel. 4:03 You could expand this out, and 4:06 this is still considered an analogous color scheme. 4:09 Next is complimentary colors. 4:13 These are two colors that sit opposite one another on the color wheel, 4:17 like orange and blue, or yellow and 4:21 purple, or green and red. 4:26 This type of color scheme can be useful for creating maximum contrast. 4:31 You'll commonly see this color scheme in sports team colors and 4:36 fast food restaurants because the high contrast grabs your attention. 4:40 And even though the colors are sometimes a bit too obnoxious, 4:44 they can also be associated with playfulness and fun. 4:48 Complementary colors can be useful in software design for 4:53 highlighting very important things the user should know about, or 4:56 drawing their attention toward something like a sale on an e-commerce website. 5:00 After that we have triadic colors. 5:06 These are three colors that are equally spaced on a color wheel. 5:09 So rather than dividing the color wheel in half, 5:14 like we do with complimentary, a triadic color scheme splits it into thirds. 5:17 Examples of triadic color schemes are, say, red, 5:22 yellow, and blue, or violet, green, and orange. 5:27 And similar to complementary colors, triadic schemes 5:34 tend to have a lot of contrast and a sense of playfulness. 5:38 Finally, there is split complementary, 5:44 which is also sometimes called compound, where you pick one color and 5:48 its complement, and then the colors that are next to each compliment. 5:53 So instead of blue and orange in the case of complimentary colors, 5:59 you might choose blue and then reddish orange and 6:04 yellowish orange, but maybe not orange itself. 6:08 Earlier, I mentioned that color schemes could be combined in a certain sense. 6:12 And we can almost think of split complementary as a combination of, 6:16 say, an analogous scheme and a complementary scheme. 6:20 So, say, for instance, you created a logo or a brand using analogous colors. 6:25 You could then create a split complementary scheme to match it and 6:31 use the complementary color as the accent color, which could be good for 6:36 things like buttons and menus in a website or a phone app. 6:41 Color is a deep topic, and that just covers the basics. 6:47 But hopefully I have inspired you to experiment and learn more on your own. 6:50
You need to sign up for Treehouse in order to download course files.Sign up