How to Create the Perfect Color Palette

Our team creates several new design systems every year, and through trial and error, we've learned what works and what doesn't work when it comes to color palettes.

What we've learned, is that the secret to the perfect color palette is creating an organized, easy to use, system of colors. This system is a collection of well documented styles that automatically generates and maintains a balanced hierarchy within your color palette.  In this guide, I'll tech you step-by-step how to create your own system of colors.

👀 Want to speed up your color styles workflow? Get our free Style Guide UI Kit here. It includes all the best practices covered in this article and gets you up and running in seconds.

1) Pick your default colors

Selecting colors for a new design project is exciting but also a little intimidating.  A seemingly small decision can dramatically change the tone of your designs. Luckily, with Figma styles, you can update your color palette across 100+ designs in just a few seconds.  So there's no reason to stress about your default colors. In the beginning, creating an organized system of colors is much more important than the colors themselves.

When creating your color palate, simplicity is key.  Use as few colors as possible to communicate your brand, available actions, and necessary statuses.  Below are some good colors to start with.

• Primary
• Success
• Warning
• Error
• Accent 1  optional
• Accent 2  optional
• Gray  optional

Tip: start with blue as your primary color

By process of elimination, blue is an ideal primary color for most projects. Green, yellow, and red are already taken by success, warning, and error. That leaves you with blue, orange or purple if you want your primary color to not compete with you status colors.  All can be great options but blue tends to be the most popular because it has so many positive associations (sky, sea, depth, trust, tranquility, cleanliness, health, power, etc).

Tip: Keep your color palette simple

Find all your default colors by keeping the color selector in the same spot (or very close) and move the hue slider back and forth. This will create a collection of colors that feel closely related to one another.

2) Create variants

Each default color needs a range of light and dark variants to provide visual depth, hierarchy, and change in state.  The best way to do this is by adding layers of black and white, with varying opacities, on top of your default colors. Applying these layers consistently across your default colors will ensure a harmonious range of color variants.

Pick black and white opacity levels that can really expand your color palette and offer distinct variations for each default color. Below are some good opacity levels to start with.

• Darker: Default + 50% black  optional
• Dark: Default + 25% black
• Default: Default
• Light: Default + 50% white
• Lighter: Default + 75% white
• Lightest 2: Default + 90% white
• Lightest 1: Default + 95% white  optional

Tip: Let black and white play by their own rules

Black and white can't follow the same rules as the rest of your colors for a few reasons. 1) Adding layers of black and white on top of your black and white colors doesn't really make sense 2) Black can't get darker than black, and white can't get lighter then white 3) Black and white are typically used for text and need to follow accessibility guidelines.  Below are some good opacities to start with.

Black variants:

• Default: 100% black
• Light: 50% black
• Lighter: 25% black
• Lightest - 2: 10% black
• Lightest - 1: 5% black  optional

White variants:

• Default: 100% white
• Light: 70% white
• Lighter: 50% white
• Lightest - 2: 35% white
• Lightest - 1: 25% white  optional

Tip: Test color accessibility

Test how accessible your colors are with Material Design's color tool.  Enter the hex code for each variant into the color tool and see how well text can be read on top of it.

3) Turn colors into styles

Turn your colors into styles so they can be applied as fills and strokes across your designs.  Once this is done, updating default colors or tweaking the variations across all designs only takes a few seconds.  To create a style: select the colored object > navigate to the color styles menu in your properties panel and select the "style" icon > select the "create style" icon >  add a name and select "create style".

Tip: Give styles generic names separated with forward slashes ("/")

Colors should be given generic names like "Primary" rather than "Ocean" so when you inevitably update the colors there is no need to edit every name. They should also be named with the forward slash naming system so Figma will know to automatically group them by category. This way your color system will have clear hierarchy and be easy to navigate to find the right color you're looking for.

Example: Primary/Dark, Primary/Default, Primary/Light..etc.

Tip: Add descriptions to key styles

Add descriptions that will be helpful to your future self. For example, add "divider" to the black or gray variant that should be used for all dividers across your designs.

4) Edit styles

Color styles can be edited at any time to update default colors, tweak variants, or add effects.  once the edit is made, it's instantly applied to all designs. To edit a color style:  click the background of your page (outside of any frames) > hover over your color and select the "edit style" icon > make desired changes > close edit modal.

All variants of a color can be edited by copying and pasting the new default hex code into the edit style modal. The existing black and white opacities will preserve the variant range.

Skip the set up

Creating a well organized, highly usable, system of colors is easy enough to understand, but creating and documenting all the styles can take a bit of time. Time that could be spent on actual design work.

Skip the set up and download our free Style Guide UI Kit which includes all the color, text, and elevation styles you need to start any UI project. Plus, it has some bonus styles like avatars, maps, cities, and popular product colors.

👉 Get the (free) Style Guide UI Kit here