Color Tools

[00:00:00]
>> Jen Kramer: We've done a really bad job of picking colors, I hate to tell you. Okay, and I know some of you graphic designers out there are really bothered by the color violence we've committed today. So let's talk about a little bit more about color and where to get good colors.

[00:00:16]
So this is a website, it's called color.adobe.com, okay, where people smarter than you have picked nice color palettes, all right? And if you go to color.adobe.com and you click on the link on the top here called Explore,
>> Jen Kramer: People smarter than you and more talented than you have come up with some beautiful color palettes.

[00:00:42]
That they have shared right here on this website that you can take advantage of and use, isn't that a wonderful thing? So you can come here, and you can look at all of these. And you will never run out of colors, [LAUGH] they have a ridiculous quantity of color palettes here for you to choose from.

[00:01:01]
Right now, I'm looking at the most popular ones. Notice that we can look at most used ones or random ones or what's popular this month or all time, all kinds of different things. And they give you a few colors here to work with, they've been voted on and commented on, and these are great things to use.

[00:01:20]
If you click on these, roll your mouse over them, for example, you'll see this Info button that comes up here. This will show you the colors in a larger format. So then the next problem is, and you can click on them again, and they get even bigger. The next problem is how do we determine exactly what those color values are?

[00:01:40]
Cuz it's super pretty and we'd like to use them, but what are the color values? So one of the things that you can do for your browser is install this wonderful extension called ColorZilla, and that is at colorzilla.com. Click on ColorZilla for Firefox and Chrome, go ahead and click on that.

[00:02:01]
And then once you get in here, look for the button to install ColorZilla 3. Go ahead and click that and install that on your browser. And if you have both Firefox and Chrome on your computer, you may want to install it in both places, it's a pretty useful kind of thing.

[00:02:17]
So once you have ColorZilla installed, when you go ahead and click on the little eyedropper that's gonna show up there on the corner, it'll tell you that the page color picker is active. And then you can now roll your mouse over one of those lovely colors, okay? So let's say I want this one right here, notice that just rolling my mouse over it, it'll tell me that hexadecimal code.

[00:02:43]
If we click on it, it's gonna go ahead and copy that color to my clipboard, all right? And so now when I come back to my CSS, I can just paste in that lovely red that I had there from before, very, very nice. And we can actually start to make a color palette that actually works.

[00:03:05]
>> Jen Kramer: And those color themes are here for you, they're here to help you. If you are a talented graphic designer and you can create your own color palette, please feel free to do so. You can go ahead and get these hex codes right out of Photoshop or Illustrator.

[00:03:18]
Or lots and lots of other image processing packages that are available out there online. But having it right here in the browser is a super-helpful tool.