Color Tools

[00:00:00]
>> Sarah Drasner: So, let's talk about tools. Everybody likes tools. I like tools. They make our lives easier. On Dribble, you can steal palettes. You see that little drop right there? There's like a little drop, and you can click that, and you can download it, and you can import it right into Photoshop and a bunch of swatches appear, and then you can just steal other people's palettes.

[00:00:20]
Awesome, you can also click on one of the colors and bring up color palettes of like a spectrum of designs that work within those color parts. So, if you are like I wanna see everything in this type of blue, show me that and it can just show you that, especially for a lot of us, we don't get to decide what our brand color is, right?

[00:00:44]
You can't come into a giant application, you have a brand color. What you can make me a new design from scratch but you've got a brand color that you're working with. So this is a kinda nice tool to see what other combinations people are making. What other accents people are using with that color in particular.

[00:01:01]
It's pretty cool. This is my favorite, especially for side projects. For side projects that I'm working on alone, I'm not super great at building color palettes. I just go to colors and keep hitting the thing until I find something that I like. And even once you steal a color palette, I keep saying the word steal, they're yours, it's fine to use them.

[00:01:24]
It's not like you're gonna go to jail or anything. [LAUGH] Once you have a color palette, you'll probably deviate from it a little bit but I would never make this color palette. This is awesome, look that yellow like that yellow fits, it's awesome, it works but I would never think to make this by myself.

[00:01:46]
So you can kinda just keep hitting, I'm hitting the space bar, and you can kinda keep hitting the space bar. But let say I come across this and I'm like I like everything, except I don't like that brown. It's like lock all of these and then just change that one color if I want to.

[00:02:04]
Let's say I like that, I can go to Export and it gives me all of these different options like SVG, URL, PNG, PDF, blah, blah, blah. Awesome, I can also decide, I really like this but it's a bit too bright for my liking. Actually on my screen, it's bright, it's not bright here.

[00:02:23]
I could say like I wanna bring that saturation down. Like I wanna bring the brightness up and they have all of these little slider thingies. Pretty cool? Like you can just keep working with this until you have something that you like. Especially if you don't know where to start.

[00:02:45]
And that's why I say for side projects because usually for other kind of projects, you are starting with some base colors. But if you're working alone, you might not know where to begin and that's not a really good place to be in. So Paletton is a really nice one.

[00:03:00]
Paletton is kind of like what we saw before with the colors, Adobe Color CC or whatever they call it now, cooler. It will always be cooler in my mind. But what it allows you to do is build up a palette based on some proportion. So let's say you want mostly blue, you can add monochromatic, you can see all of those ones on the top and the left.

[00:03:24]
It's allowing you to decide between amalgous, triad, compound, all of those kind of things. But then you can kind of build a palette up in this square. So say I just need a little bit of this one color but I need a lot of this color and it will give you shades.

[00:03:42]
If it takes up more of that color, then it'll give you more shades that are kind of in that range too. So, pretty cool. So yeah, you can switch it up say, triadic and then it'll show you the kind of allow you to build up the palette that way.

[00:03:59]
Like we showed you before, that color, Adobe Color CC also allows you to build up palettes that way and save them. My friend Tim Holman made this, Palettab. So if you don't have any like, when you have a new tab, you're not using some fancy extension, you can use Palettab.

[00:04:19]
And every time you open up a new tab on your browser, it will show you a new color palette and it will also show you some fonts and stuff. So, you could just, every time be like that's a kind of cool one and steal those. So, Adobe Capture is pretty cool because what you do is you load in a photo that has colors that you like, so sometimes you see an image and you're like that's got a really cool palette but I don't know why.

[00:04:47]
[LAUGH] I don't know why I like this. I just know I like this. So you can put it into Adobe capture and it will analyze the photo using machine learning and pick out different colors. But the other thing it does is allows you to pick out moods. So if I'm using this on that flower, I could say I'm in a happy mood, so it'll pick some of the brighter colors.

[00:05:06]
I want like dark mood or moody mood, and it will kinda pick out some of the darker colors in there. So you can kind of, even though it's picking out a color palette within that thing, you can keep adjusting from that one image until you find a palette that you like.

[00:05:24]
>> Sarah Drasner: For gradients, I always use ultimate CSS gradient generator. This is like a really, really old tool that I've never given up on because I really like it. And it's not great for finding a gradient but if you already have two colors and you need to make a CSS gradient, it outputs the code for it really nicely and gives you fallback and sorts of stuff.

[00:05:49]
If you need to find the gradient, use UI gradients. UI gradients is really nice. Basically, it's the same thing as coolers, where you hit the space bar, hit the space bar, just keep finding gradients. Or you can pull down show all gradients and it'll show you all of these gradients.

[00:06:04]
Gradients can be a really nice way of sprucing up designs and making them look really beautiful as well.