Announcing Flows – User onboarding for modern SaaS →
Creating a great color palette can be a daunting task. The choices you make will impact not only users but also your colleagues. Here is our guide for creating the best UI color palette. We will guide you through every step - from finding colors, and creating shades, to naming conventions. Let's jump in!
Before we get deep into creating color palettes, we have to define a great palette. Every color palette has two main goals - to look good and be easy to use.
To help us achieve these things, we can use color theory (we will dive deeper into color theory when finding colors).
If your palette is hard to use, your hard work creating the best color palette will be wasted.
It may be tempting to skip all this work and use one of the many ready-made palettes. That may be a good starting point. But since the palette is not designed with your specific use case in mind, you will soon run into issues and the need to adjust. Any great product has a well-designed palette to go with it.
Every color palette starts with base colors. The amount you will need is specific to your project. For example, a product with lots of charts will need more base colors than a simple app. Base colors can be split into three main categories:
Most products have one, maybe two brand colors. They are used for primary actions and drawing users' attention. Brand colors are the first thing to decide on as they affect the rest of your palette.
Semantic colors help us convey meaning to users. For example, red is seen as dangerous while green has a positive connotation. Typically you will need:
Most elements in your interface will use neutral colors (text, lines, backgrounds, etc.). Sometimes it's recommended to avoid using pure black on white as the contrast can be tiring to the eyes. But be careful not to go too light to keep high legibility.
Like with all creative things, there is no single process to follow when looking for base colors. Here are a few methods that can help you:
Throughout human evolution, we have created associations between colors and emotions. We are drawn to red fruit over green because the color indicates ripeness. Considering these meanings when looking for colors can help us achieve the desired effect. But keep in mind that color meaning can vary across different cultures.
Try our color generator to find colors with your desired meaning.
To find great color schemes we can use the color wheel. The color wheel shows relationships between colors (schemes). The main ones are:
Try our color wheel to find color combinations that look good together.
Using this method we can find semantic colors that are harmonious with the primary color.
This process will usually produce great status colors. Don't hesitate to tweak the results to your liking.
Create your palette in minutes
Whether you're new to color palettes, or a pro looking for advanced tools, create your best palette in minutes.
After you have your base colors, it is time to start creating shades from them. Shades are necessary to have a flexible palette for all possible use cases and contrast needs.
Most palettes have around 6-10 shades per color and around 10 shades for the Neutrals (grays).
More shades = more choices and maintenance
It may be tempting to create as many shades as possible "Just to be safe". But this will leave you with decision paralysis when designing. Rigorously trim down the number of shades until you end up with a flexible yet compact palette. Remember that you can always add more if necessary.
To determine the darkest and lightest shades, consider how you will use them in the interface. Dark shades are used for text while light shades are mostly for tinted backgrounds. It's best to test your shades on an example UI (a few fields, buttons, and boxes should do the trick).
Generally, a lightness range of 95 to 30 seems to be the sweet spot. Any lighter and the colors are barely distinguishable. On the other hand, darker colors lose saturation rapidly.
One way to make your shades feel just right is to shift the hue values. This method slightly changes the hue value as you move from light to dark shades. Leaving you with vibrant colors.
For example, yellow is a good candidate for this. As you decrease lightness, the nice yellow becomes muddy. To avoid that, you can slowly decrease its hue value towards orange and red. The result will be nicer dark yellowish-orange shades.
Some colors benefit from this method more than others. Experiment, try wild shifts and you may find the perfect shade for you.
Pro tip: Use our hue shifting feature, to quickly try out different hue curves.
It's good to wait with choosing saturation until you have the lightness and hue values set. When choosing the saturation, there are two things to keep in mind:
Pure grayscale doesn't exist in nature and may seem unnatural. It is a common practice to use the primary color's hue with low saturation. This results in tinted grays that work nicely with the rest of your palette.
Not everyone perceives color the same way. According to WHO estimates, 2.2 billion people have some kind of vision impairment. So it's really important to consider if your colors have enough contrast and if they are distinguishable.
This is why Atmos comes with a built-in contrast checker and color vision simulator so you can ensure accessibility at every step of your color palette journey.
It's good to think about how your colors will be used in the interface now so you don't have to come back later. For example, will you need to put text on tinted backgrounds, how will your primary button look like, and so on? Continuously check the contrast ratios between the shades you plan to use together and double-check later in your designs.
WCAG recommended thresholds (for passing AA requirements) are:
Also known as color vision deficiency (CVD) affects about 1 in 12 men and 1 in 200 women in the world. There are 3 different types of color blindness:
99% of people who are color blind are suffering from red-green color blindness
To ensure color combinations are distinguishable check your colors using color-blind simulators. Don't rely only on color to convey information, use words or iconography as support. Learn more about these techniques in WCAG guideline 1.4.1 Use of color.
Naming conventions can make or break a palette. Why? Intuitive naming conventions have a big effect on the color palette's internal usability.
There are multiple approaches to naming your colors. You can use abstract names, real names, or the color's function. We recommend the latter as with this approach nobody has to remember if the success color is emerald or lime. The most common functions are:
The most flexible and predictable naming convention for shades is numbering from 0 (white) to 1000 (black). The numbers are assigned based on the lightness of the shade.
Why are numbers the best? This approach gives you the room to expand your palette without renaming existing shades. For example, if you would like to add a new shade between Primary light and Primary lighter, how would you name it? With numbers, you would have Primary 400, Primary 300, and add Primary 350.
There are many tools out there that will help you on your journey of creating the perfect color palette. Here are some of our favorites:
We've designed Atmos to be THE tool for creating a color palette - from finding colors through generating shades to fine-tuning your palette. If you're a total beginner or design professional, Atmos has everything you need to create your color palette.
Creating a color palette is a complex and important process. Follow these principles to achieve the best results:
That's it, good luck with your color palette! 🎨
If you enjoyed this article, I'm sure you will find Atmos helpful. Whether you are just starting a color palette, or your current could use some tweaking, then you should give Atmos a shot! Hey, it's free 🚀
April 15, 2022 · 8 min read
The LCH color space was designed to model human perception of color, making it ideal for UI design and color palettes. Learn about the benefits of using LCH over the now popular HSL color space, and why you should make the switch.
February 22, 2022 · 11 min read
Color theory describes best practices and concepts for creating visually pleasing designs. Learn about concepts like color spaces, the color wheel, color temperature, meaning, context, and how colors are defined.
February 9, 2022 · 10 min read
Working with colors and creating a theme can get messy because colors are spread everywhere. We'll learn how to avoid common issues and organize colors better.
Whether you're new to color palettes, or a pro looking for advanced tools, we'll have you set up and ready to create your best palette in minutes.
Get started for free
