Extended color palettes

Since user interfaces have numerous components with multiple layers and states, defining just one color for each category mentioned above isn’t enough. Additionally, this can lead to issues with accessibility and creative restraints. We solve this by using the colors defined above as the base for our extended palettes. Try to get around 10 different shades of the base color.

When it comes to building out an extended color palette, I’ve seen multiple ways to go about it. Below, I describe the two most popular ones:

Color palette generators

Here, you use a color palette generator that does some math in the background and generates an extended color palette based on the base color defined by you. This method is pretty straightforward and highly recommended if you’re a beginner or crunched for time.

While there are multiple tools for this on the internet, I prefer using a neat little Figma plugin named Foundations: Color Generator. All you need to do is choose a color profile (I prefer Material) and define your base color, and it will generate an extended color palette. The real reason I prefer this plugin is for the additional options it provides; design tokens, color palette snippets with color contrast ratios, and the ability to add the entire palette to your Figma styles, all with one click, or maybe a few.

The plugin also neatly mentions the color contrast ratios. Since we’d most likely use the 500 shade as our base, ensure that the color contrast ratio against white is 4.5:1 or greater..

ColorBox by Kevyn Arnott

If the method above seems too simple for your taste or you just want complete control over your palette, ColorBox is just the tool for you. The ColorBox method is relatively advanced and time-consuming. It can be difficult to achieve a harmonious transition if you don’t know what you’re doing, so choose this one carefully.

Unlike the previous step, you trade the convenience of one-click generators for granular control. You can define everything from the hue, saturation, and brightness to the easing functions applied to them.

You can learn more about the tool here.