Learn how to create and refine a color scheme for your design project using Figma. Pick and tweak colors, and explore different modes to find the perfect palette.
00:00
- [Narrator] We're gonna assume that Aria has signed this off and it went from Approval into Completed, so she's pretty happy with it. The next thing we want to work on is Colors, of course, so we're gonna move that into In Progress. Now, again, back on my Figma file, I've got all the colors in here, how do we make a color scheme as part of this? Well, the first thing that I'm gonna do is actually create a brand new page for this, which is gonna be more to do with, like, brand and sign, so I'm gonna click this plus to add a new page, and this one, unsurprisingly, is going to be called "Design." Maybe we should call it "Brand", cause this is kinda to do with the general feel of this project, you know, she might use this on business cards, in different kind of ways that we never imagined before, maybe it's not just on a website.
00:42
So, the first area that we're gonna do is all about colors, but maybe there's different areas in this brand, so colors, and type, and logo, we all we all wanna include on here, but we wanna kind of have it in separate areas. So, rather than make different pages, the first thing that I'm gonna do is use this next thing up here, called a "Frame." So, this is similar to an art board, if you've used Sketch in the past, so I'm just gonna make a brand new frame here.
01:05
So, I'm gonna make it pretty big, so maybe something around about 600 by 400, lets say, and I'm just gonna give this frame a name, over here, or here. So, I'm gonna call this one "Colors", unsurprisingly, and, in here, what we can start to work on is the color scheme. So, I could just ignore the mood board, and just start adding rectangles in here, and giving them some colors, but we don't wanna do that, we actually wanna, kind of, do this properly.
01:31
So, the way that we would add a rectangle is up here, we can press "R" as a shortcut, and I can just add a quick one in here, maybe 100 by 100, just to give it a unique size, and, how do we start playing around with the colors in here? Well, down here is the fill, this is this gray color at the moment, I can start basically moving this around, kinda moving these around as well, I can switch some of these if I know some of their Hex colors, Hex color is just a way of kind of informing a color, so for instance, if she knows exactly what color she wants to use, she could just tell us and we type this in, but, for us, we don't know this at the moment, so we're going off instinct.
02:09
We do know some of the stuff from her assets that we could use and from the mood board as well, so maybe we kinda wanna pick these different colors from here, like, lets try to get the one from the mood board. So, I could just go back here and go like, "maybe this is the blue that I want, or maybe this is the blue, I'm gonna roughly go back and forth between them." Now, if I go back and forth between them, it doesn't make much sense, so what I'm gonna do is actually, I'm gonna copy this out, well, actually, gonna cut this out by using "Command" and "X", or "Control" and "X" on Windows, and put this in here for now, which is, I'm pressing the wrong one, so I'm pasting it in, and I'm just gonna move it down here, and zoom in.
02:49
So, this currently is slightly off, and I want this to match this blue, so I'm gonna click here, and use this eye dropper to pick this blue, so, this, now, is exactly the same, it merges in, so, I'm gonna take this and use this as part of my color scheme. So, again, I'm gonna cut it out by using "Command" and "X", and put it back in my brand. And there we go, this is the first color that we're gonna pick. And I kinda wanna do this with a few of them, because this is a pretty bright color scheme in here, maybe this orange, maybe this green or this red, I do like this green for instance, so maybe we'll go with that next.
03:23
So, again, I'm just gonna, quick, make a quick rectangle here, I'm gonna use this color, so I'm just gonna take this from here, and this works for me, I'm gonna cut this out, and move it into my brand. Again, its a little bit big, just gonna make it 100 by 100, and just move this into position. Now, I can keep doing this and, you know, maybe I wanna add in different colors that, and part of this, maybe I wanna add something a little bit lighter, maybe a pink color for instance.
03:49
So, at the moment there isn't a pink color in her imagery, so I've got yellow, orange, and these three, maybe I wanna pick something a little bit more like this, so, maybe I'm gonna be inspired, well, we're gonna copy for now and then be inspired, so, we're just gonna quickly take this color, and we're gonna work with it, cause it might not work with our current color scheme, we're gonna cut it out, and move it into our brand, and make this 100 by 100. So, if I move this in here, maybe I can go "Hey, this kind of works for me, but, at the moment, maybe I kinda wanna make it a little less salmon, maybe more pink color", so I can play around with some of this.
04:29
So, I can tweak this around, and kinda make it a bit more red, or a bit more orange if I want to, I can move this around, maybe make it brighter in this corner, maybe make it darker into a browner color, more gray as well. One little trick that I like to use is actually switch this from Hex into different kinda modes. So, here, there's RGB, which is red green blue, and this doesn't really change much, It has exactly the same color picker, but, in other ones like HSL, it changes this completely, in HSB, it kinda changes this as well.
05:01
So it, notice the difference between the two, of HSL, which has more white up here, and this kinda makes it a little bit easier to pick a brighter color on the same wavelength, I suppose, and then a saturation color this way, too. So, this is a tool that I actually like to use, I actually like to switch to HSL if I'm picking a color scheme, because it's just a little bit easier to pick exactly the color, this is the hue, this is the saturation this way across, and this is the lightness up and down.
05:30
So, for me, I can start working on some of this stuff, so I can go, "Hey, maybe I want this to be a bit more pinker, I'm gonna move this over, and this is gonna be a bit darker pink, so maybe something a little bit more like that." So, I'm gonna tweak these a little bit later and start working on them, but this is kind of how that I would generally work, this kind of feels like it goes together. Now, with these bright colors, I might wanna pick a black, and maybe a white color as well, because I might wanna have some text on here, so maybe some darker colors might help.
06:01
So, rather than going straight back into the mood board, you know, picking a black color, I could just pick one out, and just make one from scratch. So, again, I'm just gonna make a new rectangle in here, and just quickly add one in, 100 by 100, and I might just wanna pick a white color, just pure white. So, again, if I just pick pure white, it kind of disappears into here, so just to show it on this, I wanna click "Stroke." So, on Stroke, I'm gonna click Plus, and this just gives me a black edge, so I know this is part of the color scheme.
06:33
I could give this to all of them, I generally just do it for any kind of white ones in here, and maybe I want a black color as well, so I'm just gonna make this art board a little bit wider, there we go, so maybe up to 800, just to fill it in, perfect, and, again, I'm just gonna add one last color in here, so, again, 100 by 100, and, here, what I could do is just go straight to black and be like, "Cool, I picked a black color." Now, generally, what I like to do is not use a pure black color, I actually wanna use something that's kinda related to some of these, so I'm gonna pick one of these other colors first of all, I'm gonna switch to HSL, and, instead, I'm gonna pick something from here instead, so, rather than just going into this corner, which is a saturated black color, I'm gonna use this blue, and just go down here, and pick something that I like, so maybe something in here, it feels like a black color, but it's not quite black.
07:29
Again, I can kind of go back and forth between them, this is quite a cold color, this is a little bit of a warmer black color over here. So, again, I'm gonna tweak these in a second, I might not be 100 percent happy with them, but what I'm gonna do here is actually use something that isn't a pure black color, if we look, and kind of compare it to a proper black color, it's not too much of a difference, but this one just feels a lot warmer, so, again, this is just a quick technique that I use.
07:54
So, what I'm gonna do in a second is just clean them up, and then the next video, we'll talk about how to make some tints for this.
A place for you to post notes about anything on this page. Only you can view your notes.
Want some ambient music in the background? Play our radio station!
