The color picker is an underrated and powerful tool for doing UI design in Figma. I’ve been using it in my design workflow since I started doing design back in 2012. In fact, I honestly don't see a way that you can avoid using it. But for much of my time as a designer, I didn’t really understand how it worked. It always kind of reminded me of one of these:
Like, hey, let's just sort of feel around a bit until we get something we like. I understood the basics, like moving the color slider around, and the fact that that the more you move it toward one color (from red to orange, for example), the more of that color would start to blend into the color you already had selected.
But at some point, I got frustrated by feeling like I wasn't really getting it. I felt like there had to be more to it. Was everyone using it like an ouija board like I was, sitting semi-aimlessly, hopelessly trying to summon the color spirits?
Turns out, like most things that seem like magic, there is more to the color picker than meets the eye. And by learning the basic mechanics of how it worked, I realized that I could start to reproducibly choose colors and accomplish what I was trying to accomplish both faster and more accurately. As you might imagine, that sped up my workflow by… well, a bunch.
Using the color picker like a pro is a great boost to your productivity in Figma, as well as your confidence in your UI design ability. And it’s not actually that complicated – you only have to learn how it works once.
By the end of this short workshop, you’ll be feeling confident in your Figma color picking abilities. You’ll know how the color picker works, some pro tips on how to speed up your workflow, and the single most powerful thing you can practice to noticeably improve your color intuition.
So buckle up, because here's all you really need to know:
Hue is controlled by the multi-colored slider
Your hue is the most basic version of the color you want to create. It's controlled by the rainbow road lookin' slider at the bottom of the picker:
Playing around with the hue slider is fun. Everything changes color all at once, and I hope I'm not alone when it starts to feel like you're back in Mario Kart 64 cruising down Rainbow Road. I like imagining that this is what you and I look like now, playing with our hue sliders together:
Choose the saturation of a color by moving the selector left and right
You can think of saturation as the richness, or intensity, of the hue you selected. Notice how when we increase the saturation, the resulting color has a lot of the same characteristics as our previous color. It's just more rich, deep, and intense:
Change how light or dark a color is by moving the selector up and down
This is called changing value. A change in value is to make the color more light (tint) or more dark (shade.)
If you want to learn more about hue, saturation, and value, check out the article I wrote here.
So... why is this all useful?
Well let me tell you, smartypants.
When you understand the system, you can more effectively reproduce the results you're looking for.
Imagine for example that you're trying to drive a newly-designed car. And for whatever reason, the makers of this horrible car decided that it only has one input: one giant stick in the middle that controls the car's direction and speed.
Without knowing the system behind it, you'd just be sort of feeling in the dark for the perfect diagonal combination of controls to match the speed and direction of cars around you:
This is basically the ouija-board-plasma-ball-color-picker version of driving this car.
You might gradually build some sort of intuition over time. But life is hard enough as it is, and most of the time you're just trying to get from point A to point B. So you don't spend much of your energy internalizing what's going on, and next time you get in the car it's like starting all over again.
But then you learn how the car really works.
If you push the stick one way, the car will go forward. If you push it another way, it will go backward. Moving the stick left and right changes the speed.
Say it looks something like this:
In this case it's still a pretty stupid design, but now you know how it works, and in the future you'll be able to use it more effectively and more consistently.
Which leads me to my main point...
Understanding the color picker helps you be a more effective designer
The system for controlling the color picker is the standard for the moment.
While not as silly as the imaginary car example, it is still completely invisible to you as a user.
Learning how the Figma color picker works comes in super handy when you're creating color palettes or trying to find colors that feel like they live in the same universe as each other.
Ok, I know that might all sound good, if not a little confusing, so let's look at an example.
We'll make sort of a proto-color-palette out of the color we had from the hue, saturation, and value examples. We're not going to go super deep right now into creating color palettes, for now we just want a reliable way to find different colors that look like they live in the same world.
So we liked the kinda pastel dark blue:
Now, let's find a similar color based on a totally different hue. We want it to stay just as dark/light and just as saturated to keep that dark pastel color.
All we do is move the hue slider:
So now we have these two colors:
Do we like them? A little too... gentle? Need more contrast? Let's do it.
We can increase contrast against lighter background colors by increasing saturation or darkness. So, let's just make these same colors a little more saturated.
To do this, we'll just move the colorspace selector for each to the right:
So now we've taken the colors we liked, made them more saturated, all the while keeping them at the same level of darkness (value).
Next, we'll learn how to use this in a real world situation.
