How to create a color palette in Figma

Hi everyone, in this video we're going to make a kind of a color palette, that we're going to start building our High Fidelity mock-up with. I'll just show you my technique for grabbing, primary, secondary, accent colors, getting a few shades of them, what to do with blacks and whites, at least my process, let's get into it. 

My colors, where did they come from? I can't remember, I kind of prepared this class a couple of weeks ago, got everything ready, I can't remember how I got my first one at least. So, I know what it is, because I've got my kind of practice exercise files, but what I'm going to do is, going to grab my Rectangle tool, and draw out like a nice small rectangle here, and over here I'm going to paste in that color I got. 

So you might have got yours from Color Hunt or Adobe Color, or from somebody else's mock-up. That was the color I started with, and I remember, I got my secondary color from this. So that's, I'm going to use a lot of that, I'm going to probably use a little bit of this next one , now with this concept stage, man, you end up changing it so much. 

So we're not going to get too official with, like, the color police aren't going to come and get you, you're allowed to do whatever you like, but I felt like those kind of went together. There's a couple of different shades in there, can you see, lighter, darker, you can kind of see it up here. I'm finding one that I like, something like that, and then I wanted another color, an accent color. It's really common to have a primary, secondary, and an accent color, so the accent color often can be very loud or distinct, because it's a special little color that you use every now and again. 

So I just went like this, I went through this and found something, that I liked with it all, and I ended up, with something pinky, rougey, reddy, mandariney, something like that. You can end up getting it close, with down here, and then you can move this around, depending on how, like saturated it is, how dark it is, how bright it is, probably, something in there, we can change this later on, we're at just concept stage. 

Now often, when you get to this sort of stage, you need some variations in those colors, I'm moving it out of here, and, actually, I'm going to cut it and move it into my Desktop Hi-Fi. I'm not sure why these are there, who remembers the shortcut to turn the columns off? 'Ctrl G' on a Mac, and I can't remember, on a PC, hang on, please hold, there it is, 'Ctrl-Shift-4', never to be remembered, anyway. 

So I'm going to paste this in here, and I'm going to just have it up here, and it'd be really common to do this. I've got these ones, I'm going to go, all of these three, slightly darker version. So you are going to be moved down a bit, I want to keep it in the same kind of zone. So what you might do is switch it to Hue Saturation Brightness, and Hue changes the color, Saturation, how saturated it is, and there's brightness, you can kind of move up and down. I'm using my arrow key to go up and down, the old 'Shift', goes in big chunks. 

So there's, no-- again, you know it shouldn't go up like 10% or 2, or-- We're going to end up having to play with this in the mock-up, and adjusting it as we go, depending on its use cases, and we'll end up with kind of just, we don't want to have a million different colors, but let's start with some we can work through. So slightly darker version, and same with you, clicking on 'B', holding 'Shift', pressing down arrow somewhere in there. 

I'm going to do the same thing for our lighter ones, and I'm going to say, you, want a lighter one now. Do I want brightness just up? Yes, and probably a little bit richer as well, so more saturation, kind of like this way. So up is straight up, whiter, whereas I want it kind of up a little bit, a little bit this way, same with this one. I want it to be a little bit brighter, it's pretty close to brightness now. 

Does it need to be richer? Probably not, I like it there, probably, actually, back a little bit this way, somewhere in there. All right, I guess what I'm trying to emphasize here is, there is science to color, there's like, you know, there's the color wheel, and you can pick particular colors, and contrast and analogous, and sometimes though there is a little bit of just like, I'm a creative person doing creative stuff with my colors. Also, what we're going to do is, let's look at doing black and white. 

So with white, white's an easy one, you don't need to mix it up, I tend to not use a full white, I use a little bit of an off-white, just a teeny tiny off, I find it's, I can use it for like a panel, let's say that we've got a big white app, and it's white, I'll often use this white kind of off-white thing. If I bring it to the front, square brackets, it's probably not enough, just a teeny tiny bit more. So on its own it looks like near enough white, but here I'm going to use this off-white kind of, for interface stuff, things that are, kind of need to be white, but when we add things like a Drop Shadow, they kind of work later on. 

How do we do a Drop Shadow? It's too soon, too soon for effects. Now let me look at my list, oh yeah, we get into effects soon, so that's going to be good. Now when I get up to say a black, so maybe I'm going to have five, five is a good kind of staging. So I'm going to have one, two, three, four, remember, 'Command D', 'Ctrl D' on a PC, black, I'm not going to have full on black, I'm going to have what's called a rich black. 

So I want it to be a tiny bit green, because I'm going to use a lot of this green in places, and I don't want just a flat black, I want to get into the greens, and I want to-- actually, let's get that first color. So let's grab my Eyedropper tool, grab you, we're in the same hue, but I'm going to bring it down and over here, can you see, it's pretty much black, but there's a hint of green in there, just a teeny tiniest bit, that's what I like to do. Same with you, I'm going to go Eyedropper tool, but I'm going to use my Saturation, and go upper chunk, oh, see, up and over, because I don't want it to be too green, I want to be lighter, and have a hint of green, but not too much. Same, again with you, up and over, we're getting there, still a hint of green in there, but not too much. 

If you're a color theorist, or a way better designer than I am, you're totally allowed to disagree with me. When I get closer and closer to white, having a little bit of green in there, just looks a bit weird. So I'm going to get basically nothing towards the end there, but in this darker parts, these parts over here, I do like them to be darker, what did I do? I think I accidentally clicked on the background, 'I' for the Eyedropper, you, I'm going to go somewhere in here, not too green. 

All right, those are my colors, you can go the other way, we've gone green, if you're going for a warmer group of colors you can do the same thing, like have a black, that is just in the kind of like, red and warm spaces, and in this case it's probably way too rich. So I'm going to bring it back over here, so it's still kind of warm, chocolatey, but it's kind of black as well. Now I'm saying that, now that I saw that in contrast, I think these are all too green. So give me a second, I'll fast forward it, there we go, I feel like they're a dark, kind of a cool grays, that's what I'm doing. 

All right, that's my final decision for at least this first concept, it's a good range of colors, that I can start picking for my UI. Now if you do have like a corporate color you have to stick to, but you've only got like a primary color in the logo, maybe two of them, and you need some other bits, I find Adobe, or color.adobe.com, they do change this around again, so have a look around, try and find the color wheel. What you can do is you can pick one, I'm picking the one that has a little arrow, it's my base color, and I'm going to put in that green, I know, the Fuchsia, and what you can do is you can say, actually, I want to find complementary colors to that, wow. 

The color wheel is not always right, it's technically complementary, but hey, it's not doing it for me. I find Split Complementary a really good one, oh, there's my greenish, I'm not sure about these guys, but it's a way of kind of maybe being a little bit more scientific, Double Split Complimentary, we got Triad, Square, Compound. You might just find yourself exploring colors that you might not have before, and you can find some of those secondary and accent colors, that you might be needing for your UI, can't all be one color unless you want it to be. 

All right, that is it for this one, we've got a color palette, let's move on.