The Art and Science of Color: Creating Stunning UI Palettes

Discover the secrets to crafting captivating color palettes for UI design. Ready to elevate your projects with UI color palettes? Read more to know about what is color ? hue ? saturation ? and so on…

You can directly check figma community file to learn and create UI color palette. check here → Figma link

creating color palette fo ui design

Lets dive into this

what is hue ?

Hue is like the specific color of a color pencil in a box, such as red, blue, or green. Each color pencil represents a different hue.

different hues with hex values

hue vs color ?

Hue is like saying a color pencil is red or blue, while “color” refers to all aspects of that color pencil, including saturation, shade of color or lightness

what is saturation ?

Saturation indicates how pure or strong a color is. Imagine you’re painting with a color pencil; saturation is like how much color you decide to use; press hard for more saturation.

different colors with saturation values

what is lightness?

Lightness defines how light or dark an overall color is. Bright colors have high lightness, while dark colors have low lightness.

different colors with lightness values

HSL vs. HSB for UI Design ?

Both HSL and HSB are different ways to describe colors. HSL (Hue, Saturation, Lightness) is often preferred in UI design

Because it helps designers choose colors and understand their brightness or darkness, which is extremely useful for making things look good on screens!.

same color — hsb vs hsl

Now lets create color palette

Step 1

Select a specific which you want it to be primary brand color, like purple, green or orange

different hues from violet to red

Step 2

After selecting Hue, Make a frame in figma and duplicate it 12 times, so that we will have 12 different shades in single particular hue.

10 copies of single hue

Step 3

Now switch to HSL from HEX in color picker, select each color row and change lightness having difference of value 8 between each shade

its always better to choose saturation value for a color between 50 to 80.
So, that you have balanced primary color.

step 4

Repeat same with one more color which acts as Secondary color and also include Red, Green and Yellow as common colors which acts as error, success and warning colors

You did it exactly the way we discussed here, you will be having palette like below:

You can experiment with HUE values too, it need not to be consistent for every shade, in this example i have used H:240 for all shades, you can have smallest range like H:240 to H:245 for all 12 shades.. but not broader range of hues

sample color palette for ui design

Now You have different shades of each hue which acts as primary and secondary and other purposes. this is how you create color palette

plugin method

Use tailwind css color generator plugin to create color palettes, enter hex code and click to create styles and guide! enjoy creating colors

figma plugin “tailwind color generator”

You now have a solid grasp of color fundamentals, including concepts like color, hue, saturation, and the distinctions between HSB and HSL. Now go and experiment in figma

You can directly check figma community file to learn and create UI color palette. check here → Figma link

thanks for reading it :)