Colors on websites: Beyond Aesthetics (Part II) Finding out why website color palettes are probably way more important than you think.

Creating a cool but simple color palette can be very difficult, right? Designers often focus on UI and UX to get it right. But how does it all work?

Navigation
Colors, UI and UX
Color Palettes — It’s just a theory, a color theory
Now, what?
References

Read part one here.

In the first part, we’ve talked about the meaning of colors. Now let’s explore color theory and how it helps us make great color palettes with UI/UX principles.

Colors, UI and UX

To start our discussion about colors, it’s crucial to understand where they are predominantly studied in website creation: UI(User Interface) and UX(User Experience).

Figma explains that UI primarily concerns the layout, color palette, and design of on-screen components — the styling of all pages on a website.

Think of UI as a painting or poster that you are thinking about buying. You spend a lot of time trying to decide between several with different colors, designs, and frames until you find the one that best harmonizes with your visual preferences. Therefore, we can say that UI has a more direct connection with color theory, which we’ll explore further in this article.

UX also pays attention to colors but in a slightly different way. UX designers study the target audience and the goals of the company’s website to figure out which colors and layouts would be easiest for them to use. These designers keep updating their research with new information based on what’s popular with their audience.

Think of UX as when you finally find your favorite poster or painting and now you have to spend hours trying to decide where the perfect place to hang it would be so that your entire room has a harmonious decor. And just like the UX Design process, it will take time and need to change several times as you discover that the first solution didn’t match exactly what you wanted. Therefore, we can say that UX has more to do with color psychology, which we already discussed in the first part.

So accessibility, usability, and the success of our software can often depend greatly on choices regarding colors in the UI and UX. That’s why you must plan your website colors wisely.

Color Palettes — It’s just a theory, a color theory

To craft a harmonious UI, it’s essential to understand color theory. Its key principles include the color wheel, color harmony, and the context in which colors are applied. Let’s explore various palette types based on these principles.

To demonstrate, I’ll use some free online tools; one that allows you to create your color palettes: Coolors and another that has an interactive color wheel: Canva’s Color Wheel. They are a great way to practice what you have learned here.

Monochromatic: they are one of the easiest to create. You only need to choose one of the colors from the color wheel and change it a little. But they can also be considered too simple depending on your application objective. Monochromatic palettes use different tones (addition of gray to the color), tints (addition of white to the color) and shades (addition of black to the color).

Actually, many other types of color palettes also rely on monochromatic schemes because they help to create harmony across the entire palette. Typically, black and white are also included in this scheme to provide contrast in specific areas of the page.

Another positive aspect of this palette is that when balanced, it creates a clean and polished look. It’s commonly used on more serious websites that aim to maintain consistency with their logo.

But do keep in mind the importance of creating a harmonious combination. Try to avoid using very dark shades or only very light tints, as this can result in a lack of contrast between different elements on your website.

In the palette below, I use red as a stepping stone and start from Black Bean to Tea Rose(red), changing the tones, shades, and tints. The darker color can be used as the text color of an application. The brightest ones would be used for links or chosen as the accent color (highlight color of your website, compared to the others). And the third color could probably be used for titles. But this will all depend on where you want to use the lighter and darker tones, of course.

Monochromatic palette made with Coolors

Analogous: basically made up of three colors next to each other on the color wheel. Normally, a trio of analogous colors can be easily found in nature, giving the impression to us, humans, of great natural visual harmony. Look at the example below with red used as the starting color again:

Screenshot using Canva’s Color Wheel

Naturally, your website will require more than just three colors. That’s why I mentioned that the monochromatic palette is also incorporated into some other palettes. Take a look at the example below of a palette I created using the aforementioned colors. It’s more complete and includes various tints, shades, and tones that can be utilized across different pages of the same website:

Analogous palette made with Coolors

Usually, each page has different sections and even more than one CTA area. So, having more colors at your disposal can create visual harmony when used in a balanced way, without making your pages too colorful.

Complementary: it initially uses two colors that are opposite to each other on the color wheel. It’s one of my favorite palettes due to its simplicity and effectiveness. However, remember that you must choose one of them as the main color (about 80% of your website) and the second as an accent color for CTA areas, for example.

So, it’s literally like drawing a line on the color wheel and finding the two opposite colors you want. Because they are directly opposite, they have great contrast. It’s important to mix this palette with the monochromatic one. Check the example below that uses red (Persian Red). Its opposite color would be a shade of blue (Robin egg blue). After selecting the two colors, I added white (created tints) and black (created shades) to them:

Complementary palette made with Coolors

Triadic: to create this palette, you need to draw an equilateral triangle on the color wheel. After that, you will have found the three colors for your palette! The three primary colors, for example, are triadic colors. Also, this palette generates colors that typically have high contrast. Observe the color wheel with the three colors selected using red as a base:

Screenshot using Canva’s Color Wheel

Since this palette initially incorporates more than just two colors, it’s essential to be cautious not to overdo it and make your website overly colorful. This can strain users’ eyes and lead to a decrease in dwell time on your website.

In these cases, we use the design rule 60-30-10 which says that 60% of pages should use the primary color from your palette, while 30% should be using the secondary color, and finally just 10% for your accent color. One approach involves choosing one of the three as the main one and lighter tones of the others are used around it to highlight. Buttons, links, and menus will use accent colors to stand out from the main color that encompasses the majority of your website.

And that’s precisely what I’ve done below! I selected red as the primary color, slightly darkened it, added another color with a darker shade, and incorporated lighter tints of the remaining two colors mentioned above:

Triadic palette made with Coolors

I hope that by now you understand a little better the relationship between UI and color theory. Creating an interface with the right colors for each page component will require knowledge related to the color wheel, as we have already seen. There are also other palette types, but these initial ones will allow you to play a little with what you’ve already chosen!

Now you’re almost ready to design your webpage. Remember, it’s crucial to consider all the different types of people who may access your website and understand why colors are essential for your website’s accessibility. By doing so, you’ll ensure a great experience for your users.

Now, what?

Now you need to put it into practice! I mentioned some tools throughout the article that can help you start testing your palettes. You can start with a single page and experiment on it. Don’t forget to keep the palette consistent with your website’s main objective.

Even though it’s difficult to create a harmonic palette from scratch, following color theory principles will make your website look much more professional with real techniques used by UX and UI designers.

I also recommend reading Color Theory for Designers, Part 3: How To Create Your Own Color Schemes which covers the other palette types that I didn’t mention and other cool techniques to complete your color palette!