How to create a nice color palette in Figma

Every designer has faced this challenge before starting a new project. While there are many ready-made color palettes available online, in this article, I want to share a universal method for creating a palette yourself. Trust me, it’s easy.

By the way, this method was used in my Hedonism UI Kit. You can also use a Figma file with a ready-made palette.

Choosing the Main Colors

In web design, black and white are the most popular colors. The main colors are those used in graphic elements, buttons, icons, and text, among other things. Is that correct?

However, the main colors must somehow interact with black and white. For example, buttons can be blue or red, but the text will always be white. Or the website background is white, and the text is black.

So, our task is to choose main colors that perfectly match black and white text. This means the text should be clear and easy to read, and the color should not strain the eyes.

Create two pages with white and black text and backgrounds.

In this section, we apply our colors and see how they fit with the text. First, we need to choose one of the primary colors. Let’s begin with blue.

Change the black background to a blue color of your choice. As an example, let’s use the system blue color that Apple uses (#007AFF).

It looks great. The color is not too dark or too light, so it can be used to create a palette with different shades of blue.

Creating shades for the color palette.

In short, each color have 9 shades: 5 lighter and 4 darker.

Let’s create a square with our blue color. Create a component from it and name it Main Color Blue.

Then we duplicate the component once and draw on top of the square another one the same square, but white with transparency of 20%. And let’s copy 2 squares: blue and white on top of it. Let’s call the group Blue.

Now duplicate this group 9 times and number all 10 groups.

Our main blue color will be the sixth. So in the sixth group we need to remove the white layer.

Next, we change the transparency of the white layer to the left of the main color. Namely: 20%, 40%, 60%, 80% and 90%.

For the four colors to the right of the main color we need to change the white color to black. Then we set the transparency for black to 20%, 40%, 60% and 80%.

Congratulations, you created shades for blue. That was quick, right?

Now let’s check how our colors match the text. We use the first 5 shades of blue for black text, and the other 5 for white.

If we see that one of the color shades is too dark or too light, we change either the base color or the black/white layer. In our example everything looks great.

Now let’s create 10 more squares and use a pipette to copy the colors.

Now we have the color code without additional layers, which means we can pass the color code to the developer or create a Color Style. Let’s do that.

Note: I recommend that you skip all the steps involved in creating styles. The point is that Figma recently added Variables. You have a choice what to use in your project. At the end of the article I give instructions on how to work with Variables. So create a palette first and then decide where to store it.

Name the styles in this format Blue / 10, Blue / 20, etc. As a result, our colors will be in the Blue group.

So, the first colors will be used to create colors. The bottom ones are the final colors. Let’s move the final colors to a separate page and add a description to them.

Now immediately create Hover colors that will be used when hovering over a button, icon or link. Let’s duplicate the colors and transparency.

We will work with the second group. Our task is to add one more transparent layer to each color.

For the first 5 colors a layer is black with transparency of 5%, for the other 5 colors we add a white layer also with transparency of 5%. We make the light shades a little darker and the dark shades a little lighter.

Hover colors are ready. Let’s move the colors closer together to make sure that colors are different from each other.

As we see the hover colors are different from the foreground color. Let’s add a description to the hover colors and add them to the main color page.

Now let’s add Hover colors to the color styles. The names will be in this format: Blue Hover / 10.

Now we have two colors of 10 shades each. Great!

Now do the same for the other colors. For example, a red color. We duplicate the blue squares, create a new component with name “red”, change blue color to red. Next, we need to change the components with blue color to the component with red color.

Now we have shades of red. Let’s check the colors with text.

It looks great. Let’s add styles like we did with the blue color.

Now we have two primary colors with 10 shades and two hover colors with 10 shades. In the same way we add other colors.

Congratulations! Our color palette is ready. By the way, don’t forget to create 2 base colors: Base/Black (#000000) and Base/White (#FFFFFF).

Update: Figma variables for colors.

Recently Figma published a major update and added Variables. I will definitely write a separate article about it. In short, the Figma team wants us to use Variables instead of Styles. Ok, let’s do it!

In the right pane you will find Local variables. Click on the inscription.

Then click on Create and choose Color.

Repeat this 9 times.

Now change the name of the colors to 10, 20, 30, etc. In the value set the shades of blue. It’s good that we wrote the code for each color separately. It will save us a lot of time.

Next, select all colors in the Variables with the Shift key and click the right mouse button.

Click on New group and call it blue/base.

Great! Now we need to add the Hover in blue. To speed up the process, right-click on Base and then click on Duplicate Group and rename to Hover.

Now we need to change the values to Hover colors.

We’re going to have a lot of colors here. Let’s make a little improvement right away. We need to rename “blue” group to “colors/blue”. This way you can create a new group or add one group to another.

Select the blue group and duplicate. Next, add the other colors as we did before.

Great, and we’re done. If you click on the square and select the color libraries, you will see a color duplication there.

Now the colors in Variables are displayed as squares, and the colors from Styles are displayed as circles. The question is what we should use in the project.

I think Figma will soon become a competitor to Framer and it will be possible to publish sites directly from the project. Figma team will add more and more new features related to Variables and I recommend using it.

As you can see we have 242 colors. The advantage of Variables is that we can create individual groups of colors, attributes, sizes, gap and more. Let me show you an example.

My Hedonism UI Kit has a login page. We don’t have a lot of colors here. There is white, black, blue and a few shades of gray in the text, icons, background input, etc.

So we can create a separate group (tokens) of colors that are used here. And the web page developer will use only them and not copy our other colors from the palette.

I created a new collection (Tokens) and a group (Log In). Next, I specified the colors of all the elements.

I choose colors only from our collection from the color palette.

You can also add multiple colors to an element and switch between them. This is called Mode. In the pictures above, I created a mode for the dark version of the page and specified colors.

Now I can switch between the dark and light theme in one click.

That’s what Variables is for and it should make life easier for web developers. I will write more details about how to work with new functions in a separate article.

One more thing.

You can change colors as you design your project. That’s fine.

For example, I changed the Gray 10 to #FAFAFA because it suited the site background better. I also change shades of blue regularly, as I use them frequently in my designs and not all shades fit my projects.

So don’t be afraid to improve your color palette. The more often you do this, the more versatile it will become. In this article, I showed you where you need to start.