Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Responsive Color39:26 with Clarissa Peterson
Color is one of the first things we learn how to do in CSS and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Discover the secrets behind hex color values, and how to use simple math to adjust color attributes like saturation and brightness. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
[MUSIC] 0:01 So I lead a class about Responsive Color. 0:15 So you might have seen if you watch old cartoons like Donald Duck or something 0:19 like that, it says in Technicolor on there, just on the really old ones. 0:23 You might see that and wonder what it means. 0:27 And it's kind of interesting actually. 0:29 Technicolor is a process that they used for making motion pictures. 0:31 They started doing movies, obviously, like over a century ago and 0:35 they were first in black and white. 0:38 We started doing them in color, they used a few different processes. 0:40 And Technicolor's the one where they first got it right. 0:43 They made the color look really, really great on the screen. 0:46 So they started in movies in Technicolor in the 30s and 40s. 0:49 One of the first really major movies that was done in Technicolor was 0:52 the Wizard of Oz in 1939, which was just an amazing thing. 0:57 Motion pictures were already new to people. 1:01 They can see things on a screen. 1:04 Now they can go and see it in color, so it looks like real life, and 1:06 it was just like such, I'm just imagining, but it seems like it must have been such 1:09 an incredible thing to be able to see this color happening on the screen for 1:12 the first time. 1:16 And they took advantage of this, being one of the first major color films. 1:18 In the book, The Wizard of Oz, the slippers were silver. 1:22 But when they did the book, or when they did the movie, they made the slippers ruby 1:25 colored because they wanted to take advantage of the color and 1:28 do everything they can to make it look wonderful on the screen. 1:31 So they changed the story just a little bit to take advantage of color. 1:33 Cuz color has the power to transform an experience, such as in this case. 1:38 You might have seen more recent movies. 1:43 This is from the Sixth Sense. 1:45 Have you seen that? 1:47 That came out a few years ago. 1:48 And I hope I'm not gonna spoil the story for anybody. 1:50 But if you watch through the movie, they use the color red to signify when there's 1:52 death or there's something happening that's really important. 1:56 And they don't use red for anything else in the movie. 1:59 They just use it in these significant spots. 2:01 But if you watch the movie for the first time and 2:03 you don't know this, you don't miss any of it. 2:06 You still get all the story. 2:08 There's just this kind of back thing that you're missing 2:09 that you kinda realize at the end of the movie. 2:12 And you're like, wow, that was awesome. 2:14 Just another example of how color can transform an experience and 2:16 make it into something totally different. 2:20 Then TV came along, of course, after motion pictures. 2:23 It started out in black and white. 2:25 And this was another amazing thing. 2:27 Being able to see these things on a screen in your very own home. 2:29 See news, see things happening around the world. 2:32 Being able to experience things that you've never experienced before. 2:35 Color TV came along a while later. 2:39 Color transmission of TV shows started in the 60s or 70s, 2:41 but for a while people still had a lot of black and white sets. 2:45 Personally in my house, we had black and white TV until I turned 10. 2:50 So you know, Big Bird was gray. 2:53 The Smurfs, they were gray. 2:55 And I didn't really feel like I was missing anything. 2:56 I saw the plot. 2:59 The color didn't matter that much, but 3:00 once we finally had color TV it's like, oh, that's pretty cool, wow, look at that. 3:01 And now color on TV, they just have amazing color. 3:07 You look at things on a screen and 3:10 it looks real because they can do such magical things with screens now. 3:12 Computers also started out in just one color. 3:16 If you're older, 3:19 you remember using computers where it was just green on a screen. 3:20 There weren't colors, it was just text data. 3:23 Then when we started doing websites, 3:25 monitors couldn't display all the colors we imagined in our head. 3:27 They could only display, many of them, 256 colors. 3:31 So some of you are familiar with this. 3:34 Some of you that haven't done web that long might not know what this is but 3:36 you could only pick from these 256 colors. 3:39 If you picked a different color, it might not show up on everybody's 3:41 monitor if their monitor didn't support that color. 3:45 So you were really limited in what you could do. 3:47 Now, of course, you know monitors, all devices can display millions of colors, 3:50 it's pretty amazing. 3:54 You know, and digital photography came along and 3:55 allowed us to create these images and 3:57 put things on a screen that just look absolutely amazing and beautiful colors. 3:59 But there is a big difference between computers and 4:03 the motion picture in the TV that we're talking about a second ago. 4:06 In movies and TV, color's not the most important thing. 4:09 The story is. 4:12 When you watch a movie, it's about the story. 4:13 The color adds to it. 4:15 The color can transform your experience, but without color, 4:16 you're not missing the story. 4:19 You're not missing what's happening. 4:22 Dorothy's slippers, they didn't have to be that exact shade of red. 4:24 They could have been amethyst or sapphire or another color like that, and 4:27 it wouldn't have mattered because the story wasn't dependent on that color. 4:30 Yet with websites, we expect something different. 4:35 We look at something on a website, it's this flat image that doesn't move. 4:38 And we think of a website kind of like a photograph. 4:41 We're used to seeing photos that are printed in books. 4:44 Or just printed photos or anything we see that's flat. 4:46 And the colors are very specific. 4:49 When you're printing something you can use certain paper, 4:51 you can get the exact color you want in this flat image. 4:54 And we keep thinking we can do that on the screen. 4:58 We keep thinking, the website, it's just a photo. 4:59 It's like a photo, we can make it look exactly like we want it to look. 5:03 But the problem is websites aren't photos. 5:07 There's a screen between us and the image. 5:10 It's not like a photo where's this physical image on a piece of paper, and 5:12 that's the thing. 5:16 On a website, the website is one thing with the colors. 5:17 But there's this device in the middle that interprets it and gets the colors to us. 5:20 So we have to be thinking about that. 5:23 So I'm gonna talk about first a few things about colors and how they work. 5:27 Cuz this is important as we're doing colors on a website to get the technical, 5:30 if you wanna take notes, I'm actually gonna put the slides up later so 5:35 don't worry about writing everything down. 5:38 You can get them off SlideShare or Twitter or my website, which I'll post at the end. 5:40 Hue, value and saturation when we're talking about color, 5:44 these are really important things to understand. 5:47 And most of you are probably developers cuz this is a front end section, so 5:49 if you're not designers, this might not be something you're quite as familiar with. 5:53 Maybe you are. 5:56 But just pay attention cuz you might learn a couple things that you didn't understand 5:57 before. 6:01 Hue, the first part of the three. 6:02 All these three things together determine what the color looks like. 6:03 Hue, the color, what we think of as a color. 6:07 For example, red or green or yellow. 6:09 That's the hue. 6:11 So when we're doing a color, that's really important to what we're thinking in our 6:13 when we're trying to get a color from our head to the screen. 6:17 But then there's these two other things. 6:20 Value is the lightness or darkness of the hue. 6:22 So, how much white or black are added to color to change it. 6:25 For example, here in the middle we have a pure purple color, but if you go from left 6:28 to right, we have lighter versions, lighter values of the purple and to 6:32 the right we have darker values of purple all the way to white and black at the end. 6:36 Value is actually really, super important. 6:41 It's the most important thing when we look at something in the world or 6:43 when we look at an image, being able to recognize it. 6:47 Because if we remove the hue, for example, in this image, the color image. 6:50 If you take out all the color, 6:55 make it black and white, you're removing the hue and just leaving the value behind. 6:56 And we can still recognize everything in this image. 7:00 It looks like the same thing to us. 7:02 But if we remove the value so everything was the same value but 7:04 put hue in it, you wouldn't even be able to see what it is. 7:08 Saturation is the third part. 7:12 That's the intensity of a hue. 7:14 And that's how much gray is added to color. 7:16 So it's a little bit different than the value. 7:18 You can see here at the top its fully saturated red. 7:21 All the way to the bottom it's totally de-saturated 7:24 which means it's totally gray. 7:26 So to show you how this works this an image with colors in it. 7:30 This is just straight forward colors. 7:33 It's fully saturated, if you unsaturate it, it looks like this. 7:35 You can still see colors, but they're very grayed and muted. 7:39 Sometimes, when I started this, I had trouble understanding the difference 7:42 between the value and between changing that and the grayness. 7:45 And the difference is if you look at this, can you actually see that? 7:51 It's really light in here and I can't see it from over here. 7:56 But this is just a really dark version of the image. 7:59 So this is when it has a different value. 8:01 It has black added to it. 8:04 And this is when it has white added to it. 8:05 So saturation is adding grey, value is adding black or 8:08 white to make it lighter or darker. 8:12 So those things are all important because we use them when we do the color notation 8:14 in CSS to actually tell the computer what color we want to use. 8:18 This is one of the first things we ever learn in CSS, how to write out color. 8:22 And it's straightforward when we learn it, but 8:26 there's actually several different ways to do it. 8:28 And some are actually easier than other ways that you might 8:30 not have learned before. 8:33 Color, when we see it, 8:36 is based on three different colors being mixed together, red, green and blue. 8:37 So every color that we see is some combination of red, green and 8:40 blue mixed together. 8:44 If you mix red and green light you get yellow light. 8:45 If you mix red and blue light you get magenta light. 8:49 If you mix all three red, green and blue you get white or 8:51 if you have none of them it's black. 8:54 That's pretty simple, but it's important to understand that. 8:56 Especially if you haven't maybe worked with computer colors before. 9:00 It's not like paint when you mix red and 9:02 green you get, I don't actually know, when you mix red and yellow you get orange. 9:06 When you mix blue and red you get purple. 9:09 The colors are slightly different. 9:11 When you mix all the colors in paint together you get black, not white. 9:13 This is how color works on the screen. 9:18 And this is why the RGB, the red, green, and 9:20 blue we talked about is really important. 9:22 Each pixel on the screen on a computer or a TV is actually a combination of 9:24 three different colored lights, red, green, and blue. 9:28 So, the pixel has three different subpixels. 9:30 Each of those, the red, green, and blue display at different intensities to 9:33 mix together to create the color of that pixel. 9:37 So what we're gonna do is tell the computer, each sub-pixel, 9:40 what the intensity needs to be of each of those red, green, and blue. 9:44 So when we're writing out the colors in CSF, we just do red, green, and blue. 9:48 There's 256 possible values for each. 9:52 If you multiply that together, that's actually like, something like, 9:55 16 million different colors you can use on a computer screen. 9:58 And your eyes can't actually tell the difference between that many colors. 10:01 But pretty much every color that exists, you can make it appear on your screen. 10:04 So when we're doing an RGB notation, this is a way of writing color, 10:10 we're going to specify that red, green, and blue. 10:13 The first way to do it is using integers from 0 to 255 for each of the numbers. 10:15 Pretty simple. 10:21 So this color, it has more red, no green, and a little bit of blue. 10:21 You can also do it with percents instead of integers. 10:26 Since neg 1 1, or 0 to 255 is just 0 to 100. 10:28 And then there's hex, which is probably the first way you learn to do it. 10:31 And you actually learn this first in CSS, 10:36 because it's kind of the easiest way to type out numbers. 10:37 Instead of doing the parentheses and commas like you do here, 10:40 you're just going to do a pound sign and then some digits or letters. 10:44 Each number is based on a base 16 set of numbers. 10:48 So instead of counting one to ten, it counts one to 16. 10:53 That's where you get the letters. 10:56 And 16 times 16 is 256. 10:58 So it's the same thing. 10:59 You have 256 possible values for each. 11:01 And they're just a combination of two letters and two numbers. 11:03 But I think if you've ever done CSS, you already know this part. 11:06 You might not know HSL Notation cuz this is kind of newer in CSS. 11:09 It's not available on all the browsers yet. 11:13 IE8 and older, you can't use HSL Notation. 11:16 But you can actually do fallback colors using SAF, so if you ever need to do that. 11:19 The HSL stands for hue, saturation, and lightness. 11:24 Remember that we talked about a little bit ago. 11:27 So when you're doing RGB, it's kind of hard to understand how they go together. 11:30 How do you get orange? 11:34 What do you mix from red and green and blue? 11:35 I don't know. 11:38 Who knows? 11:40 But hue, saturation, and lightness, it's easy because you're going to start 11:40 out with a hue, and you'll know exactly what color you're starting with. 11:44 Here, my first number, the hue is 120. 11:47 All the colors are on a circle, so each color is a number. 11:49 120 happens to be green. 11:53 So I know my color, whatever it is, 11:55 is some version of that green that's right there at 120. 11:57 The next number is s for saturation. 12:00 So I'm saying whether it's fully saturated or 12:03 whether there's gray added to make it more muted. 12:06 But their number then is l for lightness, so that's whether it's dark or light. 12:09 100% would be full lightness, would go all the way to white. 12:13 0% would be no lightness, so it'd go all the way to black. 12:17 So for example, this color here, it's the green I started with at 120. 12:21 It's fully saturated cuz the next number's 100%. 12:25 And then it's 50% enlightenment. 12:28 This number, I changed the middle number, saturation, to 50%. 12:30 So it's less saturated. 12:34 Here I'm changing the last number, the brightness, to 20% so it's much darker. 12:36 I can change the brightness to make it much lighter. 12:41 So you can tell it's actually easier to use, 12:43 if you're doing your colors directly in the browser. 12:46 Because you can think in your head, this is what I want the colors to look like. 12:49 And then you kind of know in your head what numbers to use to get that color or 12:53 adjust it to get to the color you want. 12:58 Where in RGB you can't really guess it that easily. 13:00 Opacity is really a great new thing that they've added to colors. 13:04 It allows you to assign the transparency of any particular color, like 13:07 the transparency of text that's colored red or a border that's colored green. 13:11 And all this is, it adds a fourth channel. 13:17 So for RGB Notation there's three numbers, you add a fourth number for alpha, 13:19 which is transparency. 13:23 It can go from 0, which is fully transparent, to 1, which is fully opaque. 13:25 And colors are fully opaque by default. 13:30 So this is what it looks like, so these are four blocks showing different opacity. 13:33 The top block is fully opaque. 13:37 The bottom block is fully transparent. 13:38 And then the color, it blends with the color behind it 13:41 to produce the color where the red is mixed with the blue there. 13:45 You can also use the opacity property in CSS. 13:50 But that applies to a whole object, 13:53 rather than just specific things like a border or a text. 13:55 So using opacity with your color numbers, gives you a lot more flexibility. 13:58 You can also do hsla notation in the same way. 14:03 You just add the force number that goes from 0 to 1. 14:06 So that's how color works in CSI. 14:09 I just want to make sure you know that, because there's no point in talking about 14:11 colors if you don't know how to do that, right? 14:14 So that's how the color looks on the screen, 14:17 that's another thing we need to talk about. 14:20 When you pick a color, you know what the color is in your head, 14:22 you come up with the number and you put it on your screen. 14:24 You want to think everybody sees the same color, right? 14:27 But it's not true. 14:30 That's the problem. 14:31 There's a few different things we need to talk about. 14:32 And the first is color blindness. 14:34 A lot of people are color blind. 14:36 It's one in 20 people. 14:37 I mean, that's not a lot. 14:39 But that's 5%. 14:40 That's a fair number. 14:41 I would say there's at least two or three of you in this room. 14:42 Can you raise your hand if you're color blind, anybody? 14:45 Or else the color blind 14:48 people probably just didn't even come to this presentation, which would be smart. 14:49 So, color blindness, it doesn't mean you can't see color at all. 14:53 It would be more accurately termed as color deficiency. 14:57 You just can't see all the colors. 15:00 For example, this is the way different color blind people might see things. 15:03 At the top left is what normal people would see for 15:06 a rainbow, and then three different types of color blindness. 15:09 You can see that they'll see the red might look like a green. 15:12 Or the yellow might look like kind of a beige there. 15:15 So depending on the type of colorblind that you have, 15:20 you might see different things. 15:22 This is an example of one thing you might see. 15:24 This is what a normal person sees if they're looking at fruit market. 15:27 The most common type of color blindness is green red color blindness, 15:30 which means your reds look like greens. 15:34 So if you have that type of color blindness, 15:37 instead of this with all these fruits, you can see a lot of variety there. 15:38 It's gonna look like this. 15:42 Everything's just kind of a yellow green. 15:43 And I saw this example on a website, and I'm like how do you 15:46 buy fruit if you're colorblind, everything looks exactly the same? 15:49 But that's how some people see, and that's how they've always seen, 15:53 so that's how they interpret things when the light comes into their eyes. 15:55 There's also the issue, not just colorblind people, but 16:01 people using browsers that don't display all the colors. 16:04 These aren't that common, but things like older Kindles, or maybe some game consoles 16:06 don't display color at all, so people won't see the colors. 16:11 We already know about how this effects accessibility, right? 16:15 You don't want to have color the only way you communicate something on a website. 16:19 You know, it's just like if you have a stop sign. 16:22 Not everybody can see red, but this is an octagon shape. 16:24 So, anybody that's looking at the stop sign, whether or 16:27 not they're colorblind, will know this is a stop sign. 16:30 It's an octagon shape. 16:32 So, that's pretty straightforward, and the same thing you do on websites. 16:33 You don't have a form and say all the red fields are required 16:37 because colorblind people might not see the red fields, so 16:40 you might do something like, all the fields with an asterisk are required. 16:42 You can also use red to make them stand out, but just don't have that the only way 16:46 that you're communicating an important part of the message. 16:50 There's other problems that come up aren't as straight forward and there's so 16:53 many issues like this on the web that are frustrating for 16:57 color blind people that just, web designers don't even think about. 17:00 For example, this website their selling shirts, right? 17:04 They have a whole bunch of different colors, 17:06 you can see the boxes where you can choose the color you want. 17:08 If you hover on of the colors, they'll change the color of the shirt, and 17:11 it says in text what color that is, what color you're buying. 17:15 But if you look at it, this blue, it's called Persian Jewel. 17:19 So let's say you're going to this website, you're colorblind. 17:21 You know you want a blue shirt, because that's the color you look good in. 17:24 But you can't see the colors. 17:28 Persian Jewel, how are you supposed to know that's blue? 17:29 I mean that's, Persian Jewel means nothing at all to me. 17:32 Why can't they just call it light blue? 17:35 Things like this are pretty common on websites, and 17:37 it's just a barrier to accessibility for people that can't see all the colors. 17:39 So what I tell people to do is when you're making a website, 17:45 there's ways you can mimic color blindness or that sort of thing. 17:48 But the easiest thing to do is look at your entire website in grey scale. 17:51 If you have a Mac, you can do that easily. 17:55 You just go to your preferences, to accessibility, and click use grayscale. 17:56 Everything on your monitor will turn grayscale. 18:00 And it's great. 18:03 Cuz you can click through websites and go, okay, I'm gonna do this process. 18:03 I'm gonna fill out the form, I'm gonna read through all the content. 18:06 And you'll come across things that you're like, wait a second. 18:10 This doesn't work cuz I can't see the colors. 18:14 So this should be an important part of your testing process, 18:16 just to make sure you're website is gonna work for everybody, 18:19 regardless of what colors they can see. 18:21 So beside color blindness, well, okay, so there's these people that can't see all 18:24 the colors, but the rest of us, we see the same colors, right? 18:28 Everything looks exactly the same to us if we're not color blind. 18:31 Unfortunately, that's not true. 18:34 So, there's kind of this thing that you always here, oh, 18:37 men can't tell apart the colors. 18:41 Women can see 84 different versions of beige, and men can only see one. 18:43 And it's kind of like this cultural joke. 18:47 That isn't really true, but there is a little bit of truth in it. 18:50 And that is that men are less adept at distinguishing the shades 18:54 in the middle of the spectrum like blue, green and yellow. 18:58 So if there's two shades of yellow that are close together, 19:01 a woman might be able to tell them apart and a man can't. 19:04 And they actually did a scientific study to find this out. 19:07 And it was just kind of this amazing thing. 19:11 It's like, we thought we all saw the same colors, but it turns out we don't. 19:14 And the way it works is, the androgens like testosterone alter 19:20 the development in your visual cortex and make it develop differently. 19:24 And I really have no idea what that means. 19:27 But just in case you're wondering why this happens. 19:29 You can go read the scientific study if you want, I didn't. 19:32 The other thing for men, 19:35 warmer colors like orange will seem redder to men, greens seem yellower to men. 19:37 So if you're a man looking at this, 19:41 this seems yellower than what the woman sitting next to you sees. 19:43 Not by a whole lot, maybe just by a little bit, but 19:49 you're not all seeing the same thing. 19:52 And that's important to remember. 19:54 You can't know what everybody's seeing, but you need 19:55 to know that not everybody is seeing what you're seeing when you look at colors. 19:58 And then there's what you think you see. 20:03 We've all seen this image, right? 20:05 Of the dress. 20:06 It's like, what color is this? 20:07 And there were these arguments. 20:09 And people had fist fights over it. 20:10 The dress is actually blue and black. 20:14 But the image is overexposed and has poor light balance. 20:15 Which is why it looks like different colors. 20:18 So we look at this. 20:20 Some people are convinced they see certain colors, and 20:21 some people are convinced they see other colors. 20:23 And maybe they do, maybe they don't. 20:26 You can't predict [INAUDIBLE]. 20:28 Here's an optical illusion I thought was pretty cool. 20:32 If you look at this, you see pink swirls. 20:34 Then between them there's blue and green swirls alternating. 20:36 Right? Does everybody see that? 20:39 Blue and green swirls and pink swirls. 20:40 Everybody sees that. 20:43 But the thing is, if you take the blue swirl and the green swirl, and 20:45 go close up on them the blue and green are actually the exact same color. 20:49 And they're just, because of the way that the pink and 20:53 the orange are intertwined with them they look like different colors. 20:56 I keep looking at this and I see that they are different colors, but 21:00 they're actually not, and it just It's a pretty incredible thing. 21:03 And just another example that we don't all see the exact same thing when we 21:06 look at colors. 21:09 And then there's devices. 21:11 You know, this is a thing that's been the issue lately is there's so 21:13 many different devices and we have to adapt our designs for them. 21:16 What about color? 21:20 Devices, they all display the same colors, right? 21:21 That's simple. 21:23 You know, if I pick red, 21:24 it's going to show the exact same color of red on every screen, right? 21:25 Unfortunately the answer is no. 21:29 If you've ever been in a store that sells TVs, 21:31 you can look through the whole bunch of TVs line up. 21:33 They're all showing the exact same program, 21:35 the exact same colors except they all look slightly different. 21:38 The colors are a little bit different on each of the TVs. 21:41 You know, and you wouldn't know this unless you look at them right next 21:44 to each other. 21:47 But manufacturers and 21:47 models and units they all display color slightly differently. 21:49 Devices also can change their color scheme over years, as they kind of wear. 21:54 Or as when a device screen warms up over the day. 22:00 Sometimes the color's will be different in the morning than in the evening. 22:03 Only a little bit, but they are different. 22:07 Again we're not all seeing the same thing. 22:09 So the reason this happens, we talked about RGB. 22:12 About how we pick our numbers and say this is exactly the color I want of 22:15 this much red, this much green, and this much blue, right? 22:19 But RGB isn't actually color. 22:23 The way it works, RGB is more like a recipe that each device interprets. 22:25 They can display the red and green and blue however they want. 22:29 And it's all gonna be fairly close, obviously, or 22:33 else things would just look wacky. 22:36 But they're not required to make them look the same. 22:38 If you look at different devices, this for example, I took my Macbook and 22:43 my iPhone and looked at the same picture. 22:48 And then I put them next to each other and took a photo of what it looked like. 22:51 And if you can tell on here, like the blue on the one on the left 22:53 is a lot darker than the blue on the one on the right. 22:57 And this is the exact same image on full brightness on both devices, and 22:59 it looks very different. 23:03 And I actually when I did this I didn't think they'd look that different I 23:05 was surprised by how different they looked. 23:08 And it's like wow. 23:10 And this is something that we need to know as were putting colors on our website. 23:11 Not everybody sees the same thing. 23:16 It could be their vision, it could be the device, 23:18 it could be a whole lot of different things. 23:20 A good place to start to work with this is make sure that the color on your device, 23:22 the color profile is starting off at a good place. 23:28 You're not starting off with some wacky unusual colors, 23:30 you want to put it to the best color profile, the most normal. 23:33 And then you need to test some devices, and 23:37 we already do this in responsive design. 23:39 We wanna make sure our layout, 23:40 our navigation, everything works on the different devices. 23:42 We also need to make sure our color works on every device, because these slight 23:45 differences, we're not really thinking about that, if we're testing all of our 23:49 devices one at a time, we might not realize they're so much different. 23:53 But it might mean that something that looks really good on our desktop monitor, 23:59 actually kinda looks funky on our small iPhone screen. 24:03 So if you're not thinking about that as you're testing, 24:07 if you're only thinking about layout or whatever, you might miss this. 24:09 Another thing when your looking at a screen the angle of your laptop screen. 24:13 If you kind of turn it back and forth, sometimes like if you have your laptop in 24:17 bed you'll kind of have it tilted and you'll realize everything looks really 24:21 dark, and its just because the screen is at an angle that is further away from you. 24:24 So even something as simple as that is going 24:28 to change what you see on the screen. 24:30 Then there's light, and this just keeps getting trickier and trickier. 24:33 We all thought color was simple, it's like I just make a hex color and I know exactly 24:37 what I'm doing, but no, it's different, it's gonna be different every time. 24:41 And light, the ambient light in the room, or the brightness of the screen are gonna 24:45 have a big difference on how the color looks. 24:49 For example, if you're looking at something sitting at your desk in 24:52 fluorescent light, it's gonna look different than it does in daylight. 24:54 Or if you're sitting in a dark room. 24:56 If you have auto-brightness on your phone, the screen is going to dim a lot. 24:59 And not only is it dimmer, but the dimness changes the colors. 25:02 So the colors you're seeing on that small screen are not 25:06 the colors you saw on your desktop monitor at work. 25:09 Looking at something in bright sunlight, the colors look washed out. 25:13 There's actually something you can do about this, just not quite yet. 25:17 This is coming in CSS4, there's a media query for light levels. 25:20 You can actually query and say, is the room dim? 25:24 Or is the room really bright? 25:28 Or is it normal? 25:29 And then change what the colors on your site look like 25:30 depending on the light level in the room. 25:33 Because many devices now have light sensors. 25:35 So if the room is very dim, and you're looking at something, 25:37 you don't want to have a lot of contrast on the screen cuz it's distracting. 25:41 You're in a dark room. 25:44 You don't want bright colors happening. 25:45 If you're out in the sunlight where it's very bright, 25:47 things are gonna look washed out. 25:50 So you have to make sure that there's extra color, 25:51 so everything is very visible on the screen. 25:53 So this is really the most difficult issue relating to color. 25:57 And kind of the main point I'm getting to right here is your job isn't 26:00 to make colors look the same on every device, because its impossible to do that. 26:04 Colors are going to look different for different people on different devices. 26:08 Your job is to make the site, 26:12 the colors look good and have good usability on every device. 26:14 So what do you do then, to make this happen? 26:17 Well, testing again. 26:20 Don't just test all these devices in your office. 26:21 Turn off the lights, test them in a dark room. 26:23 Take them outside in the sun and test them. 26:26 Test them in different light levels. 26:28 Change the brightness on the screen. 26:30 It's not just a matter of, oh the colors look a little bit different, 26:32 this isn't what the designer picked. 26:36 It's a matter of are you looking at it in a dim room and you can't 26:38 really see what's going on, because the color scheme just doesn't work. 26:42 If it's bright in sunlight, can you sit outside? 26:46 It's like I can't even read what's on the screen, 26:48 because there's not enough contrast. 26:50 So you need to think about that. 26:52 It's a really big part of usability to make sure that your colors work 26:53 all the time, regardless of the light level or where people are. 26:58 What I suggest, plan a work day at the beach so 27:04 you can test everything on your device in the sunlight. 27:06 Hopefully your boss will go for that. 27:09 Maybe not. 27:11 The challenge is phones, because it's easy to do colors on a desktop monitor, 27:13 because you're usually sitting in a well-lit room and 27:17 it has a good color profile and displays colors very well. 27:19 That's usually where people start designing, on the desktop monitor. 27:23 But you need to think about what happens after that. 27:26 What happens when somebody's looking at the screen out in the bright sunlight 27:28 on a tiny phone? 27:33 Older phones might not have, they usually don't display colors as well. 27:34 So if somebody has like an older phone or 27:39 a cheaper phone are they not displaying the colors in a way that looks good. 27:41 How can you change your colors overall to make sure that the site looks good on all 27:46 these different devices? 27:49 If there's bright sunlight, for example, everything is going to look washed out so 27:52 you need to add more saturation. 27:55 So you might, for example, on small screens, 27:57 which are more likely to be out in the sun, make your photos more saturated. 27:59 You can use responsive images to switch out the photos on the small screen and 28:03 make them look different. 28:07 Screen size does matter a bit when you're choosing colors, 28:10 because with a small screen, you don't need as many colors. 28:12 You don't need as much visual contrast because there's not much going 28:17 on on the screen. 28:19 So there's some opportunities to take what's on a large screen and 28:21 change the colors to look better on a small screen. 28:26 For example, this site, 28:28 on the top they have their navigation is on top of a photo. 28:30 If you're sitting with a desktop computer in a room with good light, 28:33 it's pretty easy to see this. 28:37 But if you were looking at the same thing, 28:38 the text on the top of that light background of a photo, 28:39 on a small screen out in bright light, it's not gonna be readable. 28:42 So for the small screen instead of the black text on 28:46 white there's white text on black. 28:49 Which is a really good choice, 28:51 it's gonna make this website more usable on a smaller screen. 28:52 Here's another site that says something different, 28:57 instead of the white text on a dark background, they have 28:59 a blue back on instead of the multi color background to add to the contrast. 29:04 Actually not enough examples of this, and 29:08 I would like there to be more examples, because there's so much that you can 29:10 do with colors to make sites look better depending on the size of the screen. 29:14 It's just, people haven't been thinking about this yet. 29:18 As an industry, we've not really been talking about color and 29:23 how it's affected by responsive design. 29:26 And that's something we need to bring in our design process, and 29:28 bring into thought and say, what do I need to do with color so it looks good on this 29:32 screen, on this screen, on this screen, in all these different light levels. 29:36 For all the different people who might be looking at it. 29:41 So, that's talking about how colors look on a screen. 29:45 That's really important, that's something I really want you to be thinking about. 29:48 I'm going to kind of switch to a different subject for a bit and talk about SASS. 29:52 SASS doesn't affect how your colors look on the screen. 29:55 This is just a tool for making it easier for you to work with colors. 29:58 So I think this is a great thing to do. 30:02 How many people here actually use Fast on their projects? 30:04 So it looks like about half of you. 30:08 So if you haven't used Sass before and you do front end development, 30:10 I strongly suggest this is something you learn. 30:14 Because on one hand you're thinking, oh it's another thing to learn. 30:17 I already know how to do CSS. 30:21 Why do I need this other thing? 30:23 But once you start learning it, 30:24 you're gonna realize how much easier it makes your process. 30:26 And it just makes it easier to work with a CSS, and 30:29 to know what's going on in your code. 30:33 So Sass is a pre-processor. 30:35 If you don't know what it is, what it does is basically shortcuts for writing CSS. 30:37 And then your shortcuts are pre-processed into regular CSS before it gets 30:41 to the browser. 30:47 So the browser still only gets regular CSS. 30:48 The browser never sees your Sass. 30:51 There's like an application in the middle that changes your Sass to CSS. 30:52 When you're doing color in Sass, and color is only one of very many things you can 30:57 do in Sass, the first thing you're probably going to do is color variables. 31:01 And once you start doing this, you're gonna be like oh my God, 31:05 this makes my life so much easier. 31:07 Because what you can do is give each color a name. 31:09 So instead of typing out the same weird hex code 84 million times on your site, 31:13 you can call it something like green. 31:18 Here you're going to just do green, you put a dot. 31:21 You put a dollar sign in front of it to tell it's a variable. 31:23 On the top line, we're saying that the green variable is 278232, 31:26 and then I can say, have a paragraph and 31:29 give it that color of green by just doing color, colon, dollar sign, green. 31:33 Then when it's been pre-processed, you get what's on the bottom. 31:38 So that's just regular CSS. 31:41 It switches in that hex code for your variable. 31:42 Really straightforward, and if you're using the same color over and over again, 31:45 this is gonna save you a lot of time with having to remember that hex color when you 31:49 can just type in a word that's easy to remember. 31:52 You can give them any name you want. 31:55 Sometimes you might actually call them green. 31:57 Let's say there's a green you use everywhere on your site, or 31:59 a light green or a dark green. 32:01 Or give them colors like primary background color or 32:03 button border, to relate to how you're using them on this site. 32:06 You can use a combination of the two methods, 32:09 and if you read up more on this there's some really cool things you can do 32:14 to really get a good understanding of how your colors are being used. 32:18 And not only being able to save from typing everything later, 32:22 but really knowing what's happening with your colors, 32:25 where exactly they're gonna be on your site. 32:28 Then we have functions and Sass. 32:31 Functions are where you take an existing color that you've already decided you're 32:33 using on your site, and change the color into another color to use on your site. 32:38 So for example we have lighten and darken. 32:42 Lighten and darken, they change the value of the color. 32:48 So for example let's say you're starting with purple, 32:53 you already set the color purple. 32:56 You're gonna lighten it by 20%, so you just have the codes. 32:58 The top is the Sass you're starting with. 33:02 You set your purple. 33:03 Your first box is the background color of purple, 33:05 your second box is the background color of lightening the purple by 20%. 33:07 We run it through the pre-processor you get on the bottom. 33:11 You just get regular CSS that goes to the browser. 33:14 And you get this. 33:17 So you get your regular purple and one that's 20% lighter. 33:17 You can also darken it, darken your purple by 40% and get that. 33:21 So you're like, well that's cool but 33:24 why don't I just figure out the two colors and just have a second color and use it? 33:29 Here's an example of what you might do with this. 33:33 Let's say you have a button on your site and you're giving it a color of purple. 33:35 The button-bg, that's a shade of purple. 33:39 Then the button, you'll give it that background color, 33:43 give it a border that's 20% darker and 33:44 give the whole thing a shadow that's 20% lighter, and you get that. 33:47 You know, again, this is straightforward. 33:52 Why couldn't I just pick these three colors and put them in there? 33:54 But what's cool is you wrote all that code. 33:57 Let's say you want a blue button. 33:59 You only have to change the blue and keep everything else. 34:00 And it'll automatically lighten and 34:03 darken the blue to give you the shadow and the border. 34:05 You don't have to figure out the two colors. 34:07 So if you have two buttons on your site maybe that are different colors. 34:09 You only have to write the code once and then change the main color. 34:12 So you can actually get a lot more complicated with this, 34:16 this is just kind of a basic example. 34:18 But once you get started with it, you're gonna realize that there's so 34:20 many things you can do to save you from having to repeat things later on. 34:23 Through the practical use you can do with this, 34:28 this is an example of how colors perceive differently than you might think. 34:30 Here you see a headline and text below it. 34:35 And it might be hard to see this on the screen. 34:37 But if you're looking on a computer screen, 34:40 the headline looks darker than the text. 34:41 When it is actually the same color. 34:43 But when you do this, the headline's always gonna look darker because 34:45 the letters are thicker than the letters on the text below it. 34:48 So if you want these to look the same, 34:53 they actually need to not be the same color. 34:54 The text needs to be slightly darker. 34:56 So what you can do, and you actually probably can't even see the difference on 34:59 the screen when I switch it, but you use the darken function, and 35:03 say whatever the color is for the headline, make the text 20% darker. 35:06 Then you can just use that function over and over in your site, and 35:12 then your text will always looks like it matches the headline. 35:14 Saturate and desaturate are examples of some other things you can do in Sass. 35:18 For example, you might saturate a blue by 70%. 35:24 If you start with the one on the top and you make it more saturated or 35:27 more of a deep color that is on the bottom. 35:31 Or you can desaturate it where the bottom color is desaturated by 40%. 35:34 You can change colors to grayscale. 35:39 For example, let's say you have a purple. 35:41 You can change this purple to a grayscale variation of the color. 35:43 Change a darker purple, it changes to darker gray. 35:48 This is handy if, let's say, you wanna do a special effect where you change one 35:50 section of your site to grayscale instead of color. 35:54 It can make it stand out. 35:57 You can do the inverse of a color, which I don't really understand from a design 35:59 perspective how this works, but there's cool things like this you can do. 36:03 And then there's a whole lot of other things, like you can take a color number 36:06 and pull out the R G or B values and use them to produce other colors. 36:10 You can change the opacity of a color, 36:16 you can change a whole bunch of properties all at once. 36:17 And there's really a lot of things you can do. 36:21 This is only just a starter. 36:22 And this is only color. 36:24 Remember you can do a lot of other things in Sass. 36:25 So if you haven't started doing it, I suggest taking a look. 36:27 Just take a day, give it a try, see how it works for you. 36:30 And it can actually make your workflow a lot easier. 36:33 Here's a really cool site if you're doing Sass called SassMe. 36:38 You put in a hex number color. 36:41 It'll show you what the color is. 36:43 Then you use the sliders on the bottom to change the saturation to darken or 36:45 lighten it or to change the hue. 36:51 And then you find out what the new color is. 36:53 And then in the middle there, 36:55 you can see the Sass code that gets you from that color to that color. 36:56 So it's just kind of a handy tool to work with colors and get the right one in Sass. 37:00 So going back to Dorothy's shoes for just a second, her ruby slippers. 37:05 The colors, it has a power to transform an experience. 37:09 But the colors are not the experience, they're just part of the experience. 37:13 Like I said, they could be amethyst or sapphire. 37:17 It wouldn't change the story, it just, they stand out. 37:19 Making a website, your colors aren't going to look the same to everybody. 37:22 But that doesn't matter. 37:26 This is the main point of what I'm saying, is not everybody will see the same thing. 37:28 And you need to stop being focused on exactly what the colors look like. 37:32 And it's hard because the designers will come. 37:37 They're like I want exactly this color, exactly this color, exactly this color. 37:39 And you can do that. 37:43 But they need to know that not everybody is gonna see those colors they pick. 37:44 Most people aren't going to see those colors, they're gonna see something 37:48 a little bit lighter or darker, a little bit different in the saturation. 37:51 So that's just something as a designer you need to live with. 37:55 And this is part of responsive design. 37:57 Remember what responsive design is, 37:59 we provide an optimal viewing experience across devices. 38:01 That doesn't we mean we provide the same experience for everybody, 38:05 we just provide a optimal experience, which may be different on every device. 38:07 So, we know the layouts not gonna stay the same, 38:12 the navigations not gonna stay the same. 38:14 But we still want the exact color we picked in Photoshop, and 38:17 we just need to know that that is not ever going to happen. 38:19 So we need to embrace that. 38:23 We need to start thinking about color as a part of our responsive design process. 38:24 How can we make the colors look better on every screen size? 38:28 And that's, like I said, the biggest thing is testing. 38:32 To use these devices in different light conditions and 38:35 different brightnesses to see what happens. 38:37 And then adjust for that to make sure it still looks good 38:40 on that small screen in a dark room, or in the sunlight or wherever else. 38:43 So we wanna give everybody a better experience on their device. 38:47 That's our main goal. 38:50 That's what responsive design is about. 38:50 Responsive color is a lot more subtle. 38:53 It's not, wow, I'm gonna change the whole layout around. 38:56 It's just, color isn't going to be the same for everybody. 38:58 Just like everything else on the website. 39:01 So, we need to make it the best we can for everybody, 39:03 no matter what device they're using. 39:05 No matter what they're seeing from their eyes. 39:07 No matter where they are. 39:09 Thank you. 39:12 [APPLAUSE] 39:13 [MUSIC] 39:16
You need to sign up for Treehouse in order to download course files.Sign up