Cheaters Guide to the Perfect Color Palette

Creating an attractive, balanced, accessible color palette is hard. Very hard. Doing it well takes complex math equations, lots of testing, and a dash of witchcraft. Mostly because of the differences in perceived lightness. For example, blue will always be easier to see than yellow with the same brightness and saturation.

Rather than reinventing the wheel for every new project. Steal from a popular, well-tested, framework or design system. Then make customizations to match your branding and needs. This method allows you to inherit the expertise from the original source (e.g., Material Design, Ant Design, Tailwind). And offers complete control and flexibility over your styles.

👀 Want to jumpstart your color styles workflow in Figma? Get the (free) Style Guide UI Kit here.

Before we get started. Here are a few markers of a good color palette

• Each color category looks distinct from another.
• Tints and shades grow lighter/darker in even increments.
• Tints and shades across different color categories (e.g., blue vs yellow) are perceived as being evenly light or dark.
• All tints and shades are accessible with either white or black text layered on top.

1) Copy & Paste

Find an existing, tried-and-true color palette you like.  One with many distinct colors. Each with ~10 tints/shades. Then choose the colors most similar to your needs (e.g., Primary, Secondary, Danger, Warning, Success, Neutral). And copy and paste the hex value for all 10 tints/shades into your Figma file. Creating a large color key matrix 100-1000.

Great color palette options

• Tailwind CSS
• Material Design
• Ant Design

2) Customize Hue Values

Customize each color category by updating the hue value for each tint/shade (use the dropdown menu to switch from HEX to HSB). While keeping the brightness and saturation values as they are. Some existing palettes might use multiple hue values for one color category (e.g., “225”, “226”, “227”). That’s ok. Update them all so they have a single matching value. For example, make the hue value for all 10 primary colors “220”.

A good way to make your Primary and Neutral colors feel related is to use the same hue value for each (e.g., “220”). The large difference in brightness and saturation will make them appear distinct while still sharing the same coolness or warmth.

Warning colors are most often yellow which is a tricky color to work with. By nature, it’s very light. Making it difficult to see. And tends to look “muddy” when the brightness is turned down.  For this color only, consider using multiple hue values. Allowing the color to inch towards orange as it gets darker.

3) Test & Refine Brightness/Saturation

Make sure every color is accessible by testing its contrast ratio. Test colors 100-600 with black text on top. And colors 700-900 with white text on top. If a color does not pass, adjust the brightness and saturation values until it does.

When making adjustments, keep in mind that as they progress, dark shades will have less brightness and more saturation. And light tints will have more brightness and less saturation.

Simplified WCAG guide

• 3:1 and higher → OK for UI elements like an input border
• 4.5:1 and higher → OK for 14px text and larger

Good tools for testing contrast

• Contrast Plugin
• Able Plugin
• A11y Plugin

4) Create Color Styles

Identify the base + tints/shades needed for your product. A good starting point is ~4 for each color to support backgrounds and different interaction states (Default, Hover, Pressed). All 10 tints/shades are not needed as styles. But will be helpful to have as your product evolves. The one exception being Neutral. Add additional tints and shades to account for multiple background levels, division lines, etc..

Turn each of these into Color Styles so they can be applied across your designs. Name each style with forwarding slashes (”/”) to create a nested hierarchy. And add a helpful description for each. For example..

• Primary/100 (AAA Background)
• Primary/700 (AAA Default)
• Primary/800 (AAA Hover)
• Primary/900 (AAA Pressed)

5) Edit Color Styles

Tweak or completely change the branding in seconds by changing the standardized hue value for every color in a category. The different levels of brightness and saturation will maintain the range of tints/shades. This change will be seen instantly across all designs with these styles applied.

• Primary/100: 220 hue → 260 hue
• Primary/700: 220 hue → 260 hue
• Primary/800: 220 hue → 260 hue
• Primary/900: 220 hue → 260 hue

Give it a try!

Try this on your own or skip steps 1-4 by downloading our UI Prep Style Guide Kit.

👉 Get the (free) Style Guide UI Kit here