Color in CSS Design: Color and Psychological Considerations

Different colors evoke different emotions in different people. This means that colors can be used to put users in the right state of mind to help in the success of a website. Similarly, the language of color (or color symbolism), which is what we have learnt colors to mean, based on natural, psychological, and cultural associations, can be used to better communicate content to users. Basically, everyone in the course of their lifetime invariably develops these associations in varying degrees. Natural association happens as a result of the color that we have observed a natural object to have. This type of association is universal and timeless. For example, vegetation is green and so everywhere on earth and will probably always be so. Psychological association develops as a result of the psychological state that we have commonly known a color to evoke. For example, deep colors are said to generally convey a sense of mystery, while bright colors are linked with liveliness and light colors are linked with coolness. This type of association is neither universal nor timeless, since it is subjective and can change. Cultural association arises out of cultural or common usage, and it, too, is not universal or timeless, as a color that means something in one culture or context may mean something different in another culture, today or in the future. For example, in some countries, when looking for a post box, one looks instinctively for a red box, because that is the color that symbolizes the post office in those countries, whereas in some countries, it is yellow, and this may change in the future.

Colors (typically, color schemes) can also be used to create association. For example, using the color scheme of a country’s flag for a website of national relevance, such as the website of the government of a country, enhances the perception of the design. Similarly, colors can be combined to create branding, such as for a company’s identity. Many organizations have brand colors that people automatically associate with them. For example, for Coca-Cola, it is a particular shade of red and white; for Starbucks, it is green and white; and for T-Mobile, it is hot pink, white, and black.

As subjective and non-standard as color symbolism is, its use should not be dismissed, especially because it can help reinforce the message or the theme that a design is meant to communicate. Table 9.1 presents a list of common colors and their associations compiled by Jill Morton, a color consultant in the use and meaning of colors, who has written many books on the subject and the use of color in Web design. The list was compiled based on research and common color usage. Although it is not necessarily a product of empirical science, it provides possible starting points that may otherwise not be considered when choosing colors to use for different Web design situations. It can save time, while also leaving ample room for experimentation. For example, it suggests that using a color such as purple for an application that relates to spirituality, faith, mourning, or death (such as a website for a funeral home) is more appropriate than using, for example, red color. On the other hand, red can be the main color used when a website is required to project energy, dynamism, speed, or passion, while blue is unlikely to be the best for projecting passion. Naturally, the same color can be suitable for multiple design situations, just like the same situation may be well-served by different colors. Furthermore, color symbolism can change or become obsolete over time. So, it is better to use timeless symbolisms than timely ones. For example, colors should not be used because they are fashionable, as fashion is transitory.

TABLE 9.1
Common Colors and Their Associations

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *