Creating a color palette for design systems: revised edition

Some time ago I wrote an article about "How to create a color palette for design systems". My article had some success and was read by tens of thousands of people. But time does not stand still and I strive for perfection in my work, so I present you an improved and updated article with all the additions and evolution of my approach.

The basics of a color palette

A color palette, sometimes referred to as a color scale, is a foundational element in any design project. It comprises a collection of tints and shades that represent the project’s core colors. These colors are then applied across various aspects of design, including UI components, states, illustrations, and the overall visual style. A thoughtfully designed palette streamlines the design process and simplifies routine tasks, ensuring a cohesive and efficient workflow.

Crafting an effective color palette is critical. A poorly designed palette can hinder progress and fail to meet the project’s needs. To avoid common pitfalls and save time when selecting tints and shades, we’ll explore a proven method that works universally across all designs and color schemes. This approach will act as a dependable guide, helping you navigate the design process from start to finish.

Why you need a system

Creating a color palette, especially one with numerous tints and shades, might seem unnecessary. In most types of design, a palette is often just a simple set of a few base colors.

But UI design has its own rules and goals. To achieve them, you need to implement diverse components in various contexts, for different design themes, devices, and so on. This requires creating a wide range of shades and expressing many nuances through color.

That’s why, in interface design, websites, or other informational systems, it’s rare to get by with a palette of just a couple of base colors. It would certainly be desirable—minimalistic, simple in appearance, and likely simple to work with. In fact, there are examples where designers try to follow the principles of minimalism by using a very limited number of colors.

In the Human Interface Guidelines, Apple provides only a basic set of colors for designing on iOS and iPadOS, along with a few shades of gray. This approach appears clean and minimalist. At first glance, it seems to work without the need for numerous tints and shades.

However, in reality, those same guidelines include four times as many shades for different design themes and modes. Moreover, in the iOS and iPadOS design systems, you can even find some colors with transparency.

So, in the end, this creates a full palette of tints and shades for each color and a total of 24 shades of gray for different design themes and modes. The initially defined base colors expand into a complete palette of shades when applied in real interfaces.

And this isn’t chaos or a poor design approach—it’s simply that interfaces always require a wide range of color shades to express everything they need to convey.

So, having many tints and shades is nothing to fear. It doesn’t ruin the design or make you a bad designer. On the contrary, with an extensive color palette, you can tackle the most complex tasks and create intricate interfaces.

It all comes down to how you organize this into a system and structure the palette in a way that ensures the design remains cohesive, stylish, accessible, and functional.

Goals and requirements

When starting to create a color palette, it’s important to consider the role it will play in your project, the tasks it needs to accomplish, and the constraints you are prepared to work within. Therefore, before selecting colors, it’s crucial to define the key requirements and principles that will form the foundation of your palette.

I have developed a few essential guidelines that I always follow when creating a color palette.

Wide range of tints and shades

My design experience shows that you can never have too many tints and shades. This is especially true when building an administrative interface or a large website. Beyond typical marketing tasks, such as drawing the user’s attention, you also need to address feedback and various component states. Additionally, it’s hard to imagine a modern interface without a dark theme, which means you’ll need an additional set of colors for a harmonious and balanced implementation in that theme.

So, a palette should include a significant number of tints and shades. How many? That depends on the project, and there’s likely no universal answer. However, we’ll explore how to create a versatile palette that can work for any scenario and accommodate even the most complex interfaces.

A palette should not limit your work. If it doesn’t include the right tint to create a faded background for an alert component, it doesn’t mean you need to change your design concept and make the component fit what’s available. It simply means that the palette isn’t flexible enough to meet your needs.

Base color as a foundation

A good color palette simplifies the design process and makes work easier. One of the key principles of effective work is knowing where to start. For this, it’s essential to have a foundation—a clear starting point that provides direction.

In color palettes, the foundation is the base color, which serves as the building block for the entire palette. This same base color is also the core for accents and the default states of components.

There are many examples of design systems and their palettes built on algorithms without relying on a base color. For instance, here are the tints and shades of yellow from a couple of design systems and one popular framework.

Now imagine you need to create a yellow button. Which color number should you choose from each palette? Should it be 200 or 300 in the Spectrum design system? And in Tailwind, should it be 300 or 400? Let’s say 400 seems to work. Now you need to make a blue button.

Logically, you’d choose 400 for the blue button as well, just like the yellow one. But it doesn’t work—it’s too light a tint. So, should you use 500, 600, or maybe 700? It’s not clear at all.

A good design system helps make these decisions, and a well-crafted color palette should guide and support you in the same way. This makes the design cohesive and logical. If you know the base color for each shade in your palette, it’s much easier to work with the system. Typically, the base color is the most commonly used for accents, buttons, badges, and other components.

Accessibility

A good color palette helps make design accessible by enabling the selection of color combinations with strong contrast. This is partially achieved through a sufficient range of tints and shades, providing the necessary variety to apply contrasting foreground colors on colored backgrounds while maintaining a consistent tone.

If your palette includes only a small set of tints and shades, your options become limited when striving for an accessible design.

Accessibility is often achieved by maintaining contrast steps between different color values in the palette. However, sometimes the balance of colors is more important than contrast, and for this, you also need a robust selection of tints and shades. For example, this is particularly relevant for dark theme implementation, where text and accents should not appear overly bright compared to the background. Otherwise, it becomes difficult to read—not just for people with visual impairments, but for everyone. Balanced colors create a more readable design overall and prevent the dark theme from becoming a collection of glaring patches that flicker on the screen.

A well-designed palette with a sufficient number of values helps establish balanced contrast in both light and dark themes. It ensures that interfaces are accessible to everyone, regardless of their vision abilities.

Automation

A good palette lends itself to automation. This means it can be generated programmatically, simplifying the process of adding and modifying colors.

Automation allows you to use plugins and other tools to quickly and easily create style sets and variables from the palette in design tools like Figma or to prepare tokens for implementation in CSS.

Automation also includes building a dark theme. One of the best features of a good palette is mirrored tints and shades. For example, you might use the color named ‘a5’ for a background in the light theme, and ‘b5’ for the same background in the dark theme. This ensures that the background in both themes maintains the required contrast and balance.

Automation is a strong indicator of a well-functioning system. It enables a truly efficient design process.

Full control

A good palette is manageable and answers only to you. This means you have full control over the algorithm used to create it, allowing you to adjust a tint or shade value or add a new one whenever needed.

It shouldn’t be complex math known only to one person who left your team five years ago. It shouldn’t rely on a logarithmic algorithm generated by a computer. Instead, it should be something simple, intuitive, and that just works. We’ll discuss how to achieve this further below.

The requirement for control is the final one on my list. You may add more depending on your specific needs, but I believe this set of five requirements is already sufficient to create a robust system for building a palette.

Pick your base colors

Base colors are the fundamental building blocks of a design, setting the tone and defining the project’s overall aesthetic. They serve as the foundation for generating tints and shades within a palette. These colors often encompass corporate branding hues, component state indicators, black and white, product-specific tones, accent colors, and other essential colors that bring a design to life.

Brand or primary color

Selecting a brand or primary color is crucial for highlighting key design elements. On websites and in applications, the main accents are typically action elements such as buttons, links, and labels.

For consistency, it’s best to choose an accent color from the corporate palette. However, if no suitable color is available, you can select any primary color that feels appropriate. Don’t worry too much—if needed, you can always change it later.

Once you’ve chosen a color, test it on real components to ensure it works well. Pay special attention to its contrast and brightness. If the color is too bright or too dark, adjust its saturation and lightness accordingly.

The best strategy is to choose a shade of the primary color right away that has good contrast and passes the accessibility check.

Now your primary color is ready, and you can move on to selecting the other colors for the project.

Black and white

When designing a website or application, it’s essential to use black and white as foundational colors. These hues play a significant role in every project, serving as dominant colors for backgrounds, text, and form controls.

White is straightforward—it’s always #ffffff. Black can also be used in its pure form as #000000.

To add more uniqueness and character to your design, try blending primary colors with black. This will create a softer, more harmonious feel for all design elements that use these colors.

What about gray? It also plays a significant role in interface design. We’ll create it later from black, so there’s no need to select a separate gray color. However, if you really want to, gray is the in-between color of white and black, with a lightness of around 50-55% on the HSL scale.

Night and smoke colors

Nowadays, it’s hard to create a high-quality user interface without including a dark theme. That’s why it’s important to choose the right color for the dark background of your website or application. Pure black often feels too harsh and makes light text harder to read.

Instead, opt for a “night” color slightly lighter than black for the background in dark mode. By increasing the lightness slightly, you can create a softer background that will help you achieve more balanced shades of other colors for the dark theme in the future.

White in a dark theme often remains too bright, even on a Night background, and text in this color tends to have a glowing halo due to the high contrast. This doesn’t contribute to comfortable reading within the interface. To address this, it’s a good idea to add a muted white to your base palette, perhaps naming it “Smoke.”

By using this color in the dark theme instead of pure white, the overall design and text will automatically appear more balanced on a dark background.

In fact, if you use the Smoke color, the Night background can even be pure black, as the contrast with white will still feel balanced.

State colors

State colors are used to represent the interactive states of components and text. These colors indicate various conditions such as errors, success, focus, and more. Typically, there are five states, which are sufficient for most interfaces.

The informative (or active) state is used to highlight the current or selected state of components. It is typically represented by blue, a familiar color widely used in many interfaces to indicate this state. Sometimes, it can be the primary or brand color if it aligns with the design concept. For example, an orange primary color as the informative state is perfectly fine.

The focus state is used to indicate the state of focus in components like a focus ring around a button or input element. The color for this state is usually a slightly brighter blue than the one used for the Informative state and can actually be derived later as a tint of blue when building the palette. Therefore, it is not essential as a base color.

The negative state is represented by a color used to indicate errors, destructive actions, negative trends, or highlights. It is typically associated with red, which can be applied in various scopes. Therefore, calling it simply an “error” would be too narrow. The negative state is a broader concept.

The positive state is represented by a color that is used for successful messages, positive trends, and accents. Typically, this state is represented by the color green. Like negative state, this color has a wide range of scopes, and thus the name “success” does not reflect its meaning very well.

The notice state is represented by a color that indicates information or component states that require attention or should be highlighted in the interface. Typically, this state is represented by the color yellow or orange. Often, this state is called “warning”, which is too narrow in meaning and scope. Therefore, I prefer the term “notice” as it is more semantically correct and has a broader meaning.

Additionally, there are hover and pressed states that primarily vary in shade, rather than color. For this reason, there is no need to create a distinct color for these states.

Secondary, tertiary, etc.

The primary or brand color serves as the main accent color, but additional accent colors may be needed for captions, backgrounds, as well as secondary and tertiary colors to support the overall design aesthetic.

These colors can either be harmonious or contrasting, depending on their role in the interface and the context in which they are utilized.

Product specific

When it comes to design, colors can play a crucial role in expressing and effectively showcasing products or services. Often, different sections within a design have their own branding and color schemes.

For example, in online stores, products belonging to specific categories might use distinct brand colors. A vegan food section might feature lime as its accent color, while a healthy food section could use soft coral tones. This not only enhances the visual appeal of the design but also makes it easier for customers to identify and differentiate between various products.

Gradients

Gradients typically use the same colors as the primary or accent colors. However, there are cases where you may need specific colors exclusively for gradients.

Gradients can often be brighter than other design elements, or they might be soft and pastel, while the rest of the user interface colors are more bold and saturated.

Charts

Choosing the right colors for charts is an essential aspect of presenting data in a clear and readable way. Chart colors are unique and should be selected with special care, considering their individual characteristics and rules of construction. In fact, the topic of color selection for charts is extensive and could fill an entire book.

Typically, I rely on two color scales for my charts: warm and cool. To select the colors, I begin by picking the two farthest colors with same temperture on the color wheel. Then, I determine how many values I need and use the HSB scale to adjust the hue gradually, creating distinct, harmonious colors that are easy to differentiate.

Illustrations

When incorporating illustrations into your design, it's essential to consider the color harmony of the overall scheme. While using existing primary and accent colors is perfectly fine, certain illustrations demand a unique color approach to convey meaning or enhance expressiveness.

The resulting outcome

Now you have a complete set of base colors to meet all your needs and goals for the upcoming project. Remember, you don’t always need to define all the base colors before starting the design. You can always add colors during the design process, building the overall system step by step.

For small projects, you may only need four or five colors, including the primary color, white, black, and a few secondary colors. However, larger projects might require sets of dozens of colors, and that’s absolutely acceptable. These colors serve as the foundation for creating all the necessary palettes with tints and shades.

Add transparency

Even simple interfaces are complex and diverse in their color schemes. Moreover, projects are often subject to changes and expansions. For instance, you can never be sure that interface elements will always be placed on a white background. There are cases when a form might need to be on a yellow or light blue background.

Unfortunately, gray elements and text on a colored background can look unattractive and detract from the overall design. To ensure your design looks clean and polished, consider creating sets of transparent colors within your palette.

At a minimum, you should have scales of transparent colors for white, black, and their counterparts for dark themes, such as smoke and night. The number of colors in the scale depends on your project. It’s best to use a consistent step, like 5% or 10%, and include a few specialized values, such as 2%, 7%, etc., to cover a wide range of needs.

For naming values in the scale, I find the following convention helpful: black-a60. The transparency index follows the color name, preceded by the letter “a.” This makes it easier to find the desired value in design tools like Figma. By typing “a + number,” you can quickly and easily access color options from your list. This approach saves time and reduces the chance of confusion with other non-transparent colors in your palette.

Make tints and shades

Color tints (light) and shades (dark) offer a wide range of design possibilities by introducing variations in elements and their states. This feature enables the creation of interactive interfaces, highlighting important components and distinguishing secondary ones using color. Therefore, it's important to have a set of tints and shades derived from the base color to achieve the desired results.

When it comes to creating tints and shades, there's an element of magic involved that makes it difficult to find a comprehensive explanation of how to create an entire set of colors based on a main color. It's not as simple as just taking the darkest and lightest colors and using them to create all the others. What are the rules and algorithms involved in this process? It's a mystery that many have yet to unravel?

There are plenty of plugins and tools available for generating color palettes, but the problem is, each of them has its own hidden algorithms that you have little or no control over. As a result, creating the perfect set of tints and shades can be quite challenging. For instance, if a plugin generates only eight values, but you need twelve, you've hit a dead end.

However, some design systems suggest creating tints and shades based on the color contrast against black for tints and against white for shades. This approach involves using an algorithm that takes into account the contrast between the color and the background.

In this case, creating your own color and palette based on contrast values may seem like a simple task, but it's actually quite challenging again. Achieving the desired contrast values requires manually adjusting the lightness and saturation of the color, which can take a significant amount of time. While it's possible to program your own algorithm to automatically create palettes, it can become a bottleneck for the project and limit its versatility and flexibility.

Of course, there is an approach where tints and shades are selected manually. Each value is adjusted individually with specific steps for lightness and carefully chosen saturation.

However, this approach is not efficient if you need to create unique color palettes for every project based on your base color. While you can certainly develop your own algorithm for adjusting lightness increments or decrements to somewhat automate the process, it’s unlikely to be truly productive. Adding each color would still be a tedious and challenging task.

There is another approach that addresses all the drawbacks of the described methods while offering significant advantages in efficiency and simplicity. This involves creating your own color builder, which you can fully control to generate a palette for any color in just seconds.

Make a color builder

A color builder is a set of predefined values for a color with transparency on white and dark backgrounds. This approach allows you to create palettes with any number of tints and shades. It fully meets the requirements we discussed earlier: automation, complete control, accessibility, and a base color as the starting point.

Here’s a link to my color builder for Figma. You can explore how it works and adapt it to your needs. It also includes ready-to-use color palettes that you can take and implement.

The color builder is designed so that you create tints by adjusting the base color’s transparency over a white background, and shades by applying it to a dark background with transparency.

The best part is that you don't have to manually select tints and shades. With true automation, you can change the base color and get all the values you need. This makes the method versatile and allows you to create as many tints and shades as you require, making it perfect for light and dark themes.

You also get independence with this method. The tint and shade creation will follow your rules without any magic, and you won't be bound to using a plugin or other tool with its own algorithms. This means that anyone who works on your design can understand how to build a palette and can add their own colors to solve problems.

Finally, with this method, the base color will always have the same index in any palette. This means that a surface accent color of “base” will always be “base”, whether it's a blue, red, or yellow button.

Color groups

You may have noticed that there are several color groups in the color builder: neutral (gray), contrasting colors with white foreground and bright colors with black foreground. Each color group requires a different approach, taking into account their unique nuances. For bright colors, darker shades are needed to ensure good accessibility for text and elements.

In the Color Builder, transparency values for tints and shades are carefully selected to ensure that any base color generates correct palette values that can be used in various situations while remaining accessible.

For example, if your base color is yellow, it’s likely too dull on a white background, making it unsuitable for text or links. The Color Builder will generate shades that can be used as accent colors for text and links derived from the yellow base color, ensuring good contrast.

Of course, you can create your own groups of colors as needed, defining your own transparency rules for the values. This way, you can tailor the tints and shades specifically to your use case

Harmony on a dark backgrounds

As you may recall, for the main background in a dark theme, we use the Night color as the base. It serves as the foundation for creating shades in the Color Builder. This is what ensures color harmony in the dark theme. The shades won’t be too bright or too dark.

Of course, if your black color in the dark theme is pure black, you should use it as the foundation for shades instead of the Night color.

You can test this in my Color Builder by changing the background color of the color groups.

Fine-tuning

Since the Color Builder generates the palette by adjusting color transparency, some tints may lose tonal brightness. In such cases, you can simply increase the saturation for the final palette values. This is especially common with green colors.

For yellow and orange colors, shades may develop a muddy tone when applied to a dark background. To avoid this, it’s better to shift the hue toward a more red value for the final shades.

When creating the final palette values, you are not limited in any way and can adjust any tint or shade as you see fit.

Symmetry for a dark theme

One of the biggest challenges when designing for both light and dark themes is determining which shade in the dark theme should correspond to a tint in the light theme.

With the Color Builder and its specialized naming convention, this issue is solved automatically. If you use a4 as the background in the light theme, its counterpart in the dark theme will be b4.

This is, of course, not a strict rule. You can use any shade in the dark theme. However, this naming convention generally helps make the design process more efficient and automated.

How many values are enough?

Create as many tints and shades as you need for your project. In fact, it could be as simple as three colors: one base color plus its tint and shade. It all depends on your project’s goals and requirements.

My experience suggests that the more, the better. I typically create 17 values, as shown in the Color Builder. This amount covers even the most complex interfaces and is sufficient for any task.

In the end, you might only use a limited number of tints and shades in your design. However, having a palette with plenty of values ensures you’re prepared if additional needs arise. This way, you won’t face challenges when expanding the palette later.

Test it

Test all tints and shades on actual design components. Modify the transparency values in the builder for the tints and shades if necessary to ensure that all values are appropriate for your task.

Making sure to check the contrast of the various backgrounds and texts that utilize the selected color is an important consideration. To ensure all colors are accessible on different backgrounds.

Wrapping up

Here is a link to my color builder for Figma. You can see how it is set up and modify it to suit your needs.

In this article, I have attempted to cover all the aspects of building palettes for UI design. However, there are still many subtle nuances and tricks that I have not included, as it would have made the article endless.

Once you have created the palette, the big question remains of how to make the semantic colors of the design. This is a major topic that I will cover in the future, as there are many approaches and techniques to it. I have my own way, which I believe is the right way. It works so efficiently that it's hard to imagine anything better. Stay tuned for more updates.

Email me at [email protected] if you have any questions.