This lesson is exclusive to members

Figma UI UX Design Essentials

Color Inspiration & the eyedropper in Figma

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, in this video I'm going to show you the places I go to for color inspiration. A bunch of different ones, and I will show you then how to kind of get them into Figma, using both the Eyedropper tool, copy and pasting codes, plus we'll install a plugin that will make me look bad, you'll see why in a bit. I eventually worked out how to use it, all right, let's get started. 

To get inspiration for color, you can just type it into Google, "color inspiration websites," there are loads of them, I'll just show you the ones that I use, is colorhunt.co. It's nice, the colors are great, they are, there's four of them that work well together. Same with color.adobe.com, if you go to here, they're both free, and I like this one, where you can go to 'Explore', and type in things in here, it's quite nice. 

You can say, remember, Sarah is Eco-conscious, I realize it's a bit-- it doesn't have to be green to make it Eco-friendly, but you might be using kind of words from the company's kind of values, it might be that it is about brightness and equality, or travel, or I'm trying to think of things that would have a good color, unique color, color palette to them. it might be corporate, you might put in corporate, because that's the feeling that you have, that this thing needs, and like a lot of these, find one, you like, oh, it's hard from this lot, I'm in this zone.

What you can do is, click on them, and you can see, if I don't hover over, see that hexadecimal number, that hash number, that's what you can copy and paste into Figma. Same with here, you can see the codes, if I click them, let's click on that code there, it's copied, it's the same thing from here, you can copy them and then in Figma you just go, all right, Sarah's Eco-friendly, so she's going to like green. Let's go to our desktop version, I'm going to draw a rectangle, and I'm going to fill it with, that's it there. You can paste it in with the hash, and I figure, more sorted out, there you go, is that green? You can copy and paste some colors in from these, kind of more official color inspiration places, there's loads of them. 

Now another one for gradients, I use Grabient quite a lot, there are lots of these around as well, in terms of gradient color, size, sort of gradients, in probably the next video, but you can just start to see really nice kind of gradient colors, and down here you can see the hexadecimal numbers. You can copy, paste these in for your gradients. So color inspiration is not something we're short of. 

Now these things in isolation are fine, often, what you end up doing, or what I end up doing, is going to things, remember, our inspiration Mood Board earlier on, I'm going to be using screenshots from Dribbble, and even, it's just colors, it might not be the right content, but the colors are good. What you can do in Figma, is, I'm going to go to my 'Mobile LoFi', this is up here, remember my dodgy Mood Board, do the same thing, rectangle, grab this, and we're going to grab the Eyedropper tool, and just grab anything out of here. 

You can see, I might be using this, I'm going to draw another rectangle, you, Eyedropper, something lighter, is there a lighter version of it? Yep, and just do something like this, pull the colors from that group. You can see hints of where I got my colors for my final one, you've kind of seen the final one already, that I mocked up, kind of getting ready. I kind of pulled some of this colors out, and then designed my own. You kind of start with other people's, and then you start using it, you're like, actually, too bright, not bright enough, not enough contrast, out of the scope of this class. 

Accessibility, in terms of color, in terms of contrast, is quite important. It depends on where you're going, and how much it's enforced. You should, as a UX designer, really be concerned with accessibility, you know, people, not everyone is, some people are colorblind, some people a little bit colorblind, a lot of men my age are color blind a bit, and the visually impaired need a really kind of high contrast ratio, so Adobe Color is kind of helpful for that. 

You might have a read of this, kind of outside of here, but here's an example, this one and this one, has a contrast radio of 3.331, put in your two colors, and you can see, 17 point or below with that color, or the regular text on that green background, fails the accessibility kind of test here. The contrast between these two, with this 18 point, and it's bold, those colors work, again, it's probably, just we're, yeah, we're creeping into doing too much in this course. So accessibility is outside of the scope of here, but just know that it's part, that it should be part of your process, and add that to the list of things to learn as a UX designer. 

One last thing is, there's bound to be a plugin for it, so I'm going to go to 'Browser Community', or we can go over here, 'Community', I can say 'Plugins', I'm going to say "color", I'm using the American spelling here, I look at the ones that have the most downloads, that seems to have lots of downloads. I've never used this one so let's figure it out together, so it's installed, which is great, back to this one here, I'm going to go 'Plugins', 'Color Palettes', and I imagine, there we go, color palettes, and it's just, I guess, built in, rather than going out to those websites, so you, you, looks like, oh, it looks amazing. 

I think I've just liked it, I don't know how to use this, nice choice, pretty good choice, looks amazing. What has happened? I have no idea, I have to read the documentation. Did it appear down here? It did not, I've added it, there we go, worked that out eventually. Those are just regular old rectangles that are grouped, we can start picking colors from. So all plugins work slightly different, thank you, color palettes, you made me look like, I don't know what I'm doing, there you go, you get the idea. 

Colors are everywhere, you should be pulling colors from, your discovery kind of sessions with the clients, you know what they're looking to do, they might already have corporate colors, and you're kind of stuck using those, but sometimes we get all the freedom, and we can go look for color inspiration, and use that Eyedropper tool to steal colors from images. 

All right, that's it, color inspiration, Eyedropper tool, learned and done.