I knew long ago that colors simply inspire me. 🎨 Not only when painting with watercolors, but also in my daily work as a UX and UI designer. Next to working with typography, colors in UX are just amazing. The possibilities that are given with the use of colors, but also the many mistakes you can make with them, fascinate and interest me a lot.
This article includes a bit of color theory and the harmony of colors. After that, you will explore gradients and how to use them for data visualization. In the end, you’ll find a list of some awesome tools you can use for generating color palettes and gradients for your future work with colors in UX design.
So let’s start.
Color theory
You could spend an entire study just learning all about colors and the usage of colors in UX. Their creation, their effects, and their interaction. We’ll keep it a little shorter here, but it’s still worth knowing about the basic properties of colors.
The easiest way to understand colors and their relationships run through the well-known color wheel.
Color wheel
Using the color wheel, you can quickly understand how colors are related to each other. In the color wheel, also called the color circle, the differences between primary, secondary, and tertiary colors become clear.
With the help of this knowledge, color combinations can be derived to give any UX design the right polish.
As you can see, the primary colors in color theory are red, blue, and money. All other colors can be derived from these colors. A first indication of how this works is provided by the secondary colors. The three additional colors each consist of half of the two primary colors located next to them.
And this is exactly how the extension of the color wheel with the tertiary colors works. Every two colors lying next to each other result together in the tertiary color placed in between. If you would continue this infinitely, you could create every imaginable color.
Harmony of colors
But how can colors be combined in a way that doesn’t make your eyes cramp the first time you look at them? What makes the combination of colors harmonious?
For this challenge, the color wheel offers an extremely simple aid. When you choose your colors based on the color wheel, you can fall back on the following color theories:
Analog colors
Analog colors are right next to each other on the color wheel. By choosing analogous colors you stay in the same color space and create a uniform scheme instead of using contrasts. How many adjacent colors you use is up to you, of course. But the more colors you include, the more unsettled your color palette will become again.
Complimentary Colors
These are directly opposite each other on the color wheel and create strong contrasts. When you use different tints and shades, you can easily expand the spectrum from two complementary colors without bringing a third color into play.
Natural Color Palettes
Designs are often inspired by natural things we encounter in our everyday lives. This is also true for color palettes. Of course, you can create your color palettes, or use tools that do it automatically. But you can also be inspired by your surroundings and nature.
Color palettes created from photos often provide very coherent color palettes that reflect a certain mood. When using them, you should use the colors in the approximate frequency of their occurrence in the image source to maintain the desired mood and harmony.
Tints and shades
When we’re talking about shades, this means that you’re adding black to your color. Thus, you are making the color darker. When you add gray, it’s called a tone, and when you add white, it’s called a tint. This means that pastels are tints of the original colors.
Depending on how many times you add a certain amount of black or white to color, gradients are created that have your original color in the middle.
Gradients & data visualization
Gradients are extremely versatile when it comes to the use of colors in UX. They don’t have to be just one color, as in our previous example, but can certainly contain multiple colors. In addition, how the colors used in a gradient blend into each other differ.
Types of gradients
Sequential gradients
We covered single hue gradients earlier in the section on tints and shades. They consist of a single main color created with the addition of white and black.
These gradients are very close to the single hue gradients and also run from dark to light, but different hues can be used. The colors merge into each other in the gradient and thus allow a rich color palette that is well aligned with each other.
Divergent gradients
These are gradients that consist of two colors. In divergent gradients, the middle between the two colors is neutral. Often these gradients are used to describe data with mutual maxima, such as election results between two parties.
Color tools
There are a lot of color tools out there and you can easily find the right one to create your color palette, tints and shades or gradients for your next product.I’ve put together a list of tools for colors in UX that I use regularly for my UI work:
- Color tools by Learn UI Design
Create simple gradients, color palettes, sequential and divergent gradients within seconds. You can export the colors as SVG or copy the hex codes to use them in any software. - Adobe Color
You can create diverse color palettes with pre-defined settings and a color wheel but also edit every color which was generated by the tool. Next to this, you can extract themes and gradients from images and there’s also an accessibility tool that helps you to check the contrast ratio of your color choice. - Tints & Shades Generator
This free tool helps you to add tints and shades to multiple colors at the same time. You can copy the hex values by just clicking on each color and using the tints and shades in your project. - Artyclick
Artyclick also offers a color palette tool from images and a tints and shades generator. But what I find very special about Artyclick is that it helps you to find the right names for your colors. Haven’t found other tools that do it as nice as Artyclick.
Choosing colors for your user interface
When you’re creating a color palette for your product or website, you do best when choosing your primary color and depending on this, select all other colors.
So your secondary color could be the complementary color in a lighter or darker shade. But you should also create your colors for backgrounds, headlines, links, or texts based on your primary color.
To do so and to generate a consistent color scheme for your user interface, it is recommended to use the hue of your primary color for colors like shadows and backgrounds. This will create a more harmonized appearance than relying on black or white for these colors.
