Color knowledge for programmers when designing websites

According to Kissmetric, when we look at a certain color, the eye sends a signal to the hypothalamus of the brain. From here, the signal will be processed before pushing back to the pituitary and thyroid gland, then stimulating the body to produce hormones that affect our mood, emotions and behavior. Science has also proven that using colors can lead to positive, negative or very negative emotions.

According to Kissmetric, people only need 90 seconds to make a conclusion or a thought after they visit a website. In addition, "62% to 90% of this interaction is determined only by the color of the page." In short, colors play an extremely important role in creating a first impression for users.

The following is the general meaning of common colors


Choose a color scheme

# 1: Triadic (trinity)

Triadic focuses on the brilliance of colors and complementary colors, and this is the simplest, most balanced method of the three mentioned in this article. If Triadic is applied, developers will use a wheel with 12 colors, and you can choose any of the three colors for the background color, content and accent color as long as they form an isosceles triangle. .


# 2: Combination

This method is a bit more complicated and maybe the developer will have to test it several times before choosing the most suitable color combination. It sounds like a lot of hardship, but if done well, the results will be very high. Here we continue to use 12-color wheels like Triadic, but now people will choose 2 color pairs. The first pair can take any, the second pair must choose the color next to it as shown below. The meaning of this choice is to provide contrast (two opposite colors) but there is still an addition in it (two adjacent colors).


# 3: Analogous similarity

This last method only focuses on complementarity, no longer talking about contrast. Therefore, on the color circle, people choose 3 colors adjacent to each other. Of course, choosing hot or cold colors, green or red, depends on the main customers who will use the website and the content of that website. Analogous needs to be used carefully with a lot of time and effort to invest, otherwise it is easy to lead to "color" when someone visits your website.


For example, with the website below:

1- Background color : black represents professionalism, seriousness and it seems that something is "business". Obviously, considering that this is a website that supports user coding, professionalism is essential. And the feeling of "business" mentioned above suggests that people learn to program with this website is not a fun thing but a thing that affects the career and employment of users. 2- Button color: in the picture below, there are 2 types of buttons. The orange button pointing to the registration page is highlighted, looking at it and wanting to click right away. Meanwhile, the secondary button with video playback function is simply white framed, suggesting that this is something less important than the orange button next to it. 3- Font color (content in general): white shows the contrast but still suitable for the whole website. In addition, the icons are intentionally arranged at the edge of the site to encourage users to scroll down to see more.


In general, the above CodeMentor website has a good color scheme – white with black, but the color is still there to not be boring, while emphasizing the full feeling that the web wants to give to My main user statue.

Colors should be avoided

Often brown suggestive of nature when used in design, but it is also the color most hated by men. But not always. You can see the UPS shipping service website, they use the main brown tones, the brown logo but still suitable because they show their credibility, suggesting to users that "if you use my service Your goods will be delivered properly and on time. ”


As for women, they often do not like orange so if you are designing a website for women, you should pay attention to this. Of course, these things are only relative, it depends on how you color, what is the main purpose of your website as well as what your customers have in particular that can make them like a color. Is it normal to be hated?

The picture below will list some of the colors like / hate depending on the gender of the user


These tools help you choose good colors for your software / website

Here is the suggestion of the DesignModo page:

  • Adobe Color CC – reliable tool for all Adobe users
  • Palletion – simple color picker for web design beginners
  • Flat UI Color Picker – choose beautiful color combinations that match the flat design style
  • MudCub Color Sphere – many different themes for you to choose, available HEX code to enter the website code
  • Check My Colors – check if your background color and font color are sufficiently contrasted so that people who are colorblind can still see it
  • Material Pallet – choose color combination according to Material Design style of Google e


Color is an extremely important component to consider when designing , and it also affects the way users look at your brand or product. In other words, the color used must be consistent with the idea that you want to convey to the user, the nature of the brand, who the user is, and most importantly, it must be applied in a uniform way. Best on all your websites, applications, even on logos. If so, the user will fully appreciate your message.

ITZone via Viblo

Share the news now