Color palettes for UI: create it in just 2 steps
Color is a very important part of any design: by themselves they are able to convey emotions, both positive and negative, and a misuse can completely break the design.
In this article, I’ll explain how you can create the ideal color palette for your next design 🙂
Here we go!
How to create a color palette
Most of the time projects already come “with colors”: either because the brand is already designed, or because there is already some preference from the client or stakeholder.
So I will start explaining how to create the palette assuming that there is already a base color to start from.
What should a good palette look like?
I’m sure you have downloaded an application or landed on a website where there was “something” that didn’t seem right.
If it wasn’t the typography, I bet it was probably the color palette: many brands choose to start putting colors without rhyme or reason to highlight different types of content, when in fact what they are doing is making everything more confusing.
Naturally, a good palette must take into account the psychology of color, since it is an important aspect that greatly influences our perception.
If you are interested in this particular subject, I recommend you to read the book ‘Color Psychology’ by Eva Heller. I bought it when I was studying design and I still consult it from time to time.
In short, the ideal color palette should have 10 colors, counting the 4 semantic ones.
More in detail, they are as follows:
- 1 main color
- 1 accent color
- 4 semantic colors (information, alert, success and warning)
- 4 neutral colors, which are obtained from the primary color.
Steps to make a good color palette
The main color and the neutrals
In this case we will use this color, which is “purple-almost-black”: #45475E. As you’ll see in the video below, it’s a color that it seems like nothing can be designed with… but wait 😉.
To create the neutrals what we will do is change the color mode to HSB (Hue – Saturation – Brightness).
By modifying the saturation (S) and brightness (B) values and without modifying the hue (H), what we will do will be to find colors related to our main color without modifying it.
The resulting hexadecimals are: #7D80AB, #D4D7FF and #EDEEFF.
Warning: avoid going to pure black. Doing so will decrease the accessibility of the design, because it reduces readability: the reader’s eyes get tired more easily and the other colors will be dominated by black.
Of the colors obtained, the two lightest colors below are usually used for backgrounds, separating content blocks or other UI elements such as lines and shadows.
The accent color is, as the name implies, the color to add emphasis. It is usually used for the main button, progress bars, form field focus, content blocks, etc.
Taking our “purple-almost-black” (#45475E) as a base, the next exercise is to choose a color using color theory.
In summary, I often use this tool and usually stick with:
In this case, I will not use the original color (#45475E), but one of the ones that came out of the first exercise, #D4D7FF. The tool I have used for the example is this one.
In this case I have chosen the complementary split.
These colors are present in all designs, as they psychologically send the following messages:
Red: errors, danger and alerts.
Green: success, safety and correctness
Yellow: alert and caution
There is no standard on what exact shade they should have, but it is important that you reserve these colors to communicate the type of message I mentioned in the previous list.
However, when choosing semantic colors, try to modify only the hue (H). Avoid modifying the saturation (S) or brightness (B) too much because it will create color combinations that will not match each other.
Obviously this is not the only method to create color palettes, but it is the one that has worked best for me after years of trying to find a system that would allow me to obtain them without suffering too much.