It’s easy to create a small color palette that feels calm, clean, and effective. But if you aren’t careful, a small color palette can feel boring and flat.
Sometimes it’s not just a matter of how many colors you use. Often, it’s a matter of how many different roles the colors fulfill in the design. If a five-color palette is too busy and chaotic, it might be that every color is trying to do too many things at once. A three or four color palette can feel full of life and action if each color has its proper place: dominant, accent, neutral, or contrast.
1. Start with the dominant color
Start by deciding what dominant color will be the anchor of the palette, the primary hue that is present throughout the layout. This doesn’t mean the color has to cover the largest portion of the design, but that it is the color the viewer associates with the design when thinking about it.
The dominant color may be the color of a shape that forms part of the background, the color of the header at the top of each layout, or the color that appears multiple times throughout the design, as an icon color or a border.
Then, choose a supporting color to pair with it. You don’t need to think too hard about color harmony principles, though it is helpful, but keep in mind that analogous colors may feel a little softer and harmonious together while complementary colors might feel a bit more dynamic. You don’t need to be too picky about the color you choose to support the dominant hue; you’re only experimenting right now, so just choose a color that works well with the first color and see how it looks.
2. Don’t let every color blend together
A flat feeling palette often occurs when there’s not enough contrast between the values, that is, the lightness or darkness, of the colors you choose. Colors that are of similar value might look great as color swatches, but they may have a harder time distinguishing each other in a design.
A light blue, light green, and light beige might look great together as color swatches. But if they’re all close in value, you may have trouble differentiating a card from a button or a text area from the background.
One great way to check your color palette is to convert your palette to grayscale (a lot of image editing programs will allow you to do this, or you can use an online grayscale converter like Grayscale Image). If you convert the images to grayscale, do you have a hard time telling the different elements apart? If the main sections of the page do not distinguish themselves against each other, this is a sign that you need to make the colors more distinct in terms of value.
3. Use colors with different levels of saturation
Another way that a small color palette can fall flat is if the colors you select all share a similar level of saturation. Colors that all share a muted quality may make the design feel calm or relaxing but lifeless and boring. Colors that all feel very loud and vibrant can make the design feel loud and jarring.
To make sure that you have a full spectrum of saturation values in your palette, choose a primary color, a neutral or background color, and a contrasting accent color to bring out the colors you’ve selected so far. If the colors you chose were muted, use the brightest of the three colors as the accent color (for a button or a small label, for example). If all the colors are very loud, use a more neutral accent color.
If the accent color appears on every element of your layout, on all headings, all icons, all borders, or all buttons, you may be overusing this color, and it won’t really act as an accent color. Save the brighter or more saturated color for just one thing to make the pop.
4. Exercise: Pick a dominant color
Choose three more colors in addition to your dominant color: an accent color, a light neutral, and a dark neutral (which can also be used as a contrast color). You might use the light neutral as the background color of the layout and the dark neutral as the text color.
Using the dominant color, the light neutral, the dark neutral, and the accent color, design a simple card layout with a header and a text body. Choose one of the four colors for your “dominant” element, like the card header (the dominant color might also be the color of an image), one color for the background and text colors of your layout, and the final color for the accent element: for instance, you might use the final color for a button or a label.
Make two copies of the card layout you have already designed. In the second copy, decrease the saturation of your primary color; in the third copy, darken one of your lighter neutral colors or lighten one of your darker neutrals. You now have three different card layouts to compare without actually altering the layout design itself. Which layout feels more flat? Is it the dominant, neutral, or accent color that needs to be adjusted?
5. Don’t forget about neutrals
It’s important not to forget neutrals, that is, white, off-white, gray, beige, charcoal, or very lightly tinted neutral colors that can be used as background or text colors in a design. Neutrals can be used to give a space to bright or saturated colors to “breathe.” If you choose to use bright, bold colors for your buttons and icons, you may need a very simple neutral background to balance the palette.
If you’ve decided to add another color to your palette, ask yourself if the other colors you have already chosen have enough contrast, or if there’s a way to use the existing colors to create more contrast without adding another. It’s much easier to create color harmony if all of the colors in your palette are working together than to use colors just because they look good as separate swatches.
You will know you have successfully created a cohesive color palette when each color you use has a specific role, and that role is clear to the viewer. If a color can act as an accent color in one layout but a background color in another, then that color is too neutral. Use it as a text color for that section. If you don’t have a strong accent, try to find a more saturated or a darker, high-contrast color to stand apart from your other colors. A small color palette doesn’t have to feel flat, and by the end of this series, you’ll see it’s much easier to create harmony using a few colors than many.