Creating color palettes in Figma is easier! "Color wheel palette generator"

Figma

2024/09/23

When creating designs for websites and banners, preparing a color palette in advance can greatly improve the efficiency of your design work.
It’s even more convenient if you can easily create a color palette in Figma!

This time, I will introduce how to use the Figma plugin "Color Wheel Palette Generator" that allows you to easily create color palettes on Figma.

Consistent color usage in website and banner designs greatly affects the quality.
By utilizing this plugin, you can quickly create professional color palettes and enhance the quality of your designs.

Let’s use the "Color Wheel Palette Generator" to start efficient design work right away!


Introduction

The "Color Wheel Palette Generator" is a convenient Figma plugin that generates color palettes based on the color wheel.
Using this will make your design work much more efficient.
Even if you lack confidence in your sense of color, it is attractive because it can be used easily.

The steps to use the "Color Wheel Palette Generator" are as follows.


1. Run the Plugin

First, run the "Color Wheel Palette Generator" in Figma.
Simply opening the plugin will prepare you to create a color palette.

2. Enter Base Color

Next, enter the base color that will serve as the foundation for your design.
This will form the basis of the color palette and determine the overall color scheme.

3. Choose Color Scheme

Choose the appropriate color scheme from six types of palette options.
Each type of scheme offers the optimal color palette for different design needs.

With this, you can easily complete a color palette that perfectly fits your design.

Now let’s take a closer look at how to use it!


1. Run the Plugin

The "Color Wheel Palette Generator" is a plugin available on Figma and can be used like any regular plugin.



Let’s start with how to install Figma plugins.

This plugin can be easily accessed from the Figma community.
Select "Plugins" from the menu in the Figma toolbar, then select "Manage Plugins,"
and enter "Color Wheel Palette Generator" in the search box to install (run) it.

You can also run it from the Figma community below.https://www.figma.com/community/plugin/1286792998372727741/color-wheel-palette-generator


2. Enter Base Color

When creating a color palette using the "Color Wheel Palette Generator," first set the base color.
This base color will serve as the foundation for the generated color panel.

Begin by entering the hexadecimal (HEX color) code in "Pick a color" or
select the base color directly from the color panel.

By entering the HEX color code, you can specify the exact color, and
by selecting from the color panel, you can easily find your preferred color visually.

Furthermore, you can also adjust the color's opacity using the gauge at the bottom of the color panel.
This allows you to adjust the shades while setting the base color that perfectly matches your design.

This time, I specified the red color "#FA000C."


3. Choose from 6 Palette Types

There are 6 types of palette options available as below.

Complementary
Split
Square
Analogous
Monochromatic
Triadic


By specifying the palette type with the desired characteristics from the above 6 types, the color palette will be generated.


Now, let’s introduce the characteristics of the 6 types of palettes!


Complementary

Complementary refers to "complementary colors."

Complementary colors are the colors used that are opposite the main color on the color wheel.

The complementary color of "red" is "cyan."

Arranging complementary colors next to each other enhances the brightness of each color.

By selecting the complementary color located opposite the main color, you can create effective color combinations that highlight the main color.

Additionally, due to their vividness, complementary colors are often used in advertisements that seek a strong impact.


Split

Split refers to split complementary colors.

Split complementary uses two colors on either side of the complementary color based on the main color on the color wheel.

The split complementary colors for "red" are "green" and "blue."

By combining colors adjacent to the main color and its complementary color, you can soften the strong contrast between the complementary colors while achieving overall color harmony.

This results in a balanced color scheme.

Moreover, split complementary colors bring visual appeal and vibrancy, making them particularly effective when you want to avoid strong contrasts of complementary colors or when seeking a more complex color palette.


Square

Square refers to square colors.

Square colors use 4 colors that are evenly spaced in the color wheel.

Based on the main color, divide the color wheel into 4 equal parts and select each color.

The square colors for "red" are "lime green," "cyan," and "purple."

Using the 4 colors that are evenly spaced on the color wheel, the colors located diagonally from each other are in a complementary relationship, creating a strong contrast while also providing a harmonious impression.

This results in a design that is balanced, visually rich, and engaging.

This color scheme is suitable for adding richness and depth to designs, particularly effective in posters, advertisements, and interior design where many colors are used.


Analogous

Analogous refers to analogous colors.

Analogous colors utilize colors that are adjacent to each other on the color wheel, meaning colors that are similar in hue.

The analogous colors for "red" are "orange" and "pink."

Because analogous colors are close in hue, they create a natural connection and achieve an overall harmonious color scheme.

This color scheme is easy on the eyes and creates a calming impression.

Using analogous colors helps create a sense of unity in the design and allows for a visually consistent impression.

Therefore, when seeking consistency and harmony in key visuals or main visuals,
this is very effective for achieving a natural and pleasing design.


Monochromatic

Monochromatic refers to monochromatic colors.

Monochromatic refers to color schemes based on a single hue that use different tones and shades adjusted for lightness and darkness.

Using monochromatic colors with "red" will specify colors adjusted for brightness levels.

Monochromatic colors allow for a simple and cohesive design because all elements are constructed using the same hue.

Using variations in lightness and saturation allows for visual harmony and creates a calming impression.

Since no other colors are combined, it is easier to focus on a specific color or theme,
making it ideal for polished, simple designs in posters and advertisements.


Triadic

Triadic refers to triadic colors.

Triadic colors use 3 evenly spaced colors on the color wheel.

The triadic colors for "red" are "lime green" and "blue."

Triadic color schemes provide a balanced overall look and create harmonious designs because they use 3 evenly spaced colors on the color wheel.

This color scheme creates colorful and dynamic visuals, maintaining harmony while the different colors create strong contrasts.

It is suitable for colorful designs that attract attention in posters and web designs.


Creating a Color Palette

Once the main color and palette type are determined, click "Update colors" to generate the color palette.

The color panel has been generated!


Making Design Creation in Figma Easier!

By using the "Color Wheel Palette Generator,"
you can easily create color palettes based on the color wheel, significantly improving design efficiency.

As you can quickly try out color combinations and schemes, actual design work proceeds much more smoothly!

When creating multiple design proposals, considering color variations can take a lot of time,
but by using this plugin, you can greatly shorten that time.

Additionally, since you can easily create visually appealing color palettes, the quality of your designs will also improve.

Furthermore, communication with clients and team members becomes smoother, enhancing the persuasiveness when proposing design ideas.

Please use the "Color Wheel Palette Generator" to make your design work more efficient and enjoyable!

Editor

Designers Editorial Department

Designers help to enhance customers' branding with the motto of bringing the world to life through design.
We specialize in website development and application development.