Skip to Main Content

Colors are one of the most important tools for your UX and UI. That is why you will come across a bunch of texts and examples that deal with this topic. ABOUT theory i color psychology we have already written in earlier texts. However, research can be a lengthy process that, like any extensive topic, will lead to new questions, before offering you quick and concrete answers.


How to choose the best colors for a website?

We therefore present a couple of tricks on how to choose the best colors for website, while saving some time.


Initially design in tones (Grayscale)

Every good design starts with a sketch. Although it seems to you that you can immediately start with color designing in tones, respectively grayscale will help you to clearly set the visual hierarchy. In addition, it will be much easier to select colors once you set up the project as a whole, instead of looking for the right shade for each element separately.

Visual hierarchy determines how the eye will move around the page and it is very important that it has a natural flow. You will often hear that the English word is also used flow. This selection of objects will make users feel comfortable and pay attention to information that is more important than others.


The visual hierarchy depends on 3 things:

- From the size of the object

- From the empty space around the building

- And from the color or tone of the object


So for example in the visual hierarchy when designing banners or landing page it will be more important for you to emphasize the headlines or "call to action”In relation to other information.


Combine colors with logo colors

Your color palette website the pages should include more colors than those on the logo.

In the process of defining colors, try not to use only lighter or darker shades of colors from the logo. Users will find it easier to remember if you surprise them with a new color when designing. Make sure that every new color you include in website matches the colors of your brand.

Many brands have scored when the basic, calm colors from the logo are on website they also added bright colors. As a rule, bright colors give energy and a feeling of immediacy.


Make a balance

However, do not deviate too much from the original idea of ​​your brand. Improper use of colors can easily confuse your users and distract them from the brand. Try to achieve harmony and balance in the design.

While this may sound like some super-talent at first glance, designers often use some of the rules to achieve this effect.

60-30-10 is a very simple rule for creating well-balanced color palettes. 60% should be dedicated to one color (very often it is a neutral color), the second (complementary) color makes up 30%, and the third color is mostly accentuated and used for details, ie the remaining 10% of the design. This rule is often used in architecture when designing interiors.

Do not use more than 3 colors. This is not such a strict rule, but you need a lot of experience to combine more than 3 colors without overdoing it. If that is not enough for you, try adding lighter and darker shades, even in that case, limit yourself to a maximum of 5 to 6 colors.

You can also use some of color generatorfrom the internet.

Designers often experiment and explore new ways to define color palettes, so you can find interesting methods on the Internet by taking color samples from photos of birds or landscapes.


Color as a functional element

Colors are certainly there to make the design more attractive and appealing to users, but it should by no means be overlooked that designers use color to simplify the interaction process. Along with shape, color is something that users rely on when communicating with the digital world.

By using color, we often distinguish between interactive and static objects. We also explain the current state of the object (active or not) and draw the user's attention to important information.

It is necessary to use colors consistently. In other words, if you decide to use a particular shade for a clickable object, this color should be used throughout website page. In this way, we give users the opportunity to rely on their previous experience when interacting with the site.



We're not sure if we need to emphasize how important color contrast is.

First and foremost, you should pay attention to the great contrast of the content in relation to the background, and then to the elements that overlap or are next to each other. The lower the contrast, the greater the chance that users will miss this information, especially on mobile phones where the light falls differently on . In addition to using a personal feel, there are a number of tools that can help you determine the best possible contrast.

Finally, it is advisable to test the colors with real users. The color palette you have defined should suit, above all, the people who will visit yours website.


For more news and interesting stories from digital marketing visit our blog page or follow our Instagram profile.

Made by Sava Spasic - Senior Graphic Designer @Digitizer

Back To Top