Basic understanding of color science


Considering the exceptions of layout, and typography, color perhaps has had the profoundest impact on the creation and designing of websites- from presenting the visuals using images, to choosing different colors to give your website the feel of a particular era, for instance, neon green takes you straight to the ambience of Simon and Garfunkel’s ‘Sound of Silence’. The following article is the perfect manual for those who come across certain problems while working with CSS colors. With a variety of tools and color charts, this guide looks forward to help you with your working with color values. 

Color theory mainly focuses on:
  • Exploring the theory and psychology of simple color
  • Examining the various options that are available.
  • Analyzing examples of basic codes for different colors.
  • Examining several factors like transparency, opacity and others.

Color Associations 

The best start would be with a brief introduction to some of the elemental color associations. Colors are more than what they just appear to the eye. Colors tend to create an impact that is long lasting. Psychologists and designers agree that colors affect the way in which a user responds to a page, and participate in affecting the user’s intentions of purchase. A large number of studies and articles have come up regarding the color theory. Therefore, pursuing a career in this arena is no longer needs to be given a second thought. 
Very often, the human mind may be sub-consciously, tends to associate different colors with different things present in our surroundings. The association may depend of various factors like experiences from personal life, say, for instance, the color red may be associated with the feeling of love, as well as anger, or the image of blood. The impact of using colors on a website page is a kin to the impact created by a painter who uses a plethora of colors to capture his audience. If one wishes to create, say a matrimonial website, using bright colors like red and golden, or white seems more appropriate rather than using dull colors like grey, or black or brown, for red, golden and white have been conventionally associated with the very idea of wedding. 
The standards of color association set up by the West, however, must not be generalized, because different cultures have their respective modes, instruments, or symbols associated with different colors. Another factor that is very often considered in color theory is the temperature, the color white usually stands for freezing things, while, the brightest of the yellows, or orange or shades of red symbolize heat. Our eyes kind of suit themselves with this conventional theory, and as soon as the weather report says that the day is going to be bright, we immediately visualize the sun pouring out its yellow rays. More than often the color theory is regarded as a process that is psychological, largely because of its tendency to taint our perception of the world that we live in.

Color Value Notation

A variety of notations come in handy while one is working with CSS. The important point remains in choosing what way suits him/her best, keeping in mind the setbacks such as the compatibility among the browsers. 
Our imagination contributes, to a large extent, to the parochial nature of color. With the release of a variety of displays, there have been abundant choices available to the users. They can choose from these displays which let the users choose from more than a million number of color. These new displays have surpassed the old ones in which the user was provided only with   256 colors. 
The catch lies in the identification of the correct shade that is used in one’s code, after which among the many color values; the pattern used for description is functional in determining the exact requirement, in the required form and place. For the proper working of CSS, the user must be aware of the RGB, hex, and HSL equivalent of every color.  

Hexadecimal Value Notation

Among the various methods of description of color, majority of users choose to use the hexadecimal value, which either has three or six digits, the characters beginning with the ‘#’ (hash). The format that is used in this method is that of the RGB notation. For example, the value for the color pink is, #HHHHHH, and it can be abbreviated as #HHH*.
*the example is hypothetical.   
The main reason behind the popularity and preference of this method over the old system would undoubtedly be its brevity. This is achieved successfully because this system supports a plethora of characters, including green, black, red, blue, and others. 

RGB Value Notation

The other method of value notation, that is, RGB has been in existence, just as long as the hex codes. Because of the popularity of these hex codes, the RGB ones often remain unnoticed. In fact, RGB is actually a derivative of the very first specifications, ever used in CSS. The colors in RGB are restricted to green, red and blue, and the range of its numerals lies between 0 and 225. RGB lets you use percentages as well, which makes comprehending one’s choices easier.  

HSL Value Notation

A new entrant in the CSS family would be HSL Value notation. It is a multi-functioning method that lets you create an amalgamation of the hue, brightness, and saturation. Thus, it largely functions as a complementing hand for the RGB value notation. 
In this method the shades can be made lighter or darkened, by merely adding to or subtracting from the base value, of a particular hue. The process, therefore, becomes a lot easier. 
The hues of different colors are mentioned in the unit of degrees, while the values of saturation and brightness are measured in percentages. 

Color Keywords and X11

Until the present date, if calculations, like those of hexadecimal values, were not your kind of thing, you might find a tad bit difficulty working with CSS notation. 
This, however, has been made easier, with the introduction of a group of what are called as color keywords. Basically, these key words function as worded substitutes, for the tedious hexadecimal values. Although the character support is confined, but their functions, are undoubtedly of an excellent level.
The description of color in CSS cannot be done in an easier way. This is the easiest method of all. This is a user friendly method. It avoids making use of any kind of alien notations. Instead, it provides every color with a familiar name, to which are assigned a basic set of values. The names however are again limited to 16. Their expansion is possible by making use of the extended palette. 
The limited nature of the basic color keyword has resulted in the use of the X11 extended palette by the browser makers, in order to widen the range of colors. As a result of which, we now have 100 colors at our disposal.  
If the browser is supportive, every color can be described through keywords. There is, however, one problem that a user might face while working with X11. It does not offer any kind of guarantee regarding either the support or the consistency of the browser. For example, there are chances of instances of color clash. 

System Colors

The final kind of the color keywords lets the designers choose their respective colors and then match them to the default scheme of the operating system. This is called the system colors. When you change the colors of the title bars, backgrounds, or of the system text in Windows, you are using nothing but system colors. The introduction of the system colors was an initiative taken to make websites appear similar to the operating systems.   
Since it is up to the operating system to choose the color and appearance, the system color keywords often become dangerous for the accessibility of the website. Also the character support is very poor.

Color Opacity and Transparency

The above description might have given you the idea that letting the browser know about your chosen color is all that is there to do while working with CSS. However, the introduction of CSS3 lets you control the colors on another level- a level which lets you add various effects, like those of adding opaque, or semi-transparent layers on different objects, thereby making the websites appear more beautiful and appealing. 


Opacity is usually very tricky, especially because it requires the support of all the browsers and versions. Although opacity came in use only after the advent of CSS3, the earliest of the browsers like Internet Explorer have also been found to support it. Achieving an accurate amalgamation of the colors is often challenging. One can blend in a variety of colors to achieve his end. 


Like opacity, the revitalization of transparency has taken place with the introduction of CSS3. The user can now go beyond the alpha transparency that was image based, or what one could call mono-transparency effects. The latest browsers make use of RGBa as well as HSLa, value notations, along with an alpha transparency value in percentage, which is attached to it. 

Safe Colors

It is very obvious for a user to expect compatibility when he is working with color. Achieving a perfect end, however still remains a far- fetched dream. This is because all web browsers do not support the new X11 color system very well, which is only a new specification of CSS. Old browsers do not prove to be very reliable while using RGBa, HSLa, and HSL, which have been recently added to CSS3. 
In the earlier stages of the development of the color theory, it was restricted to the color notation, due to a variety of problems among which compatibility was a series one. This problem was largely the outcome of the limited nature of the displays, which provided the user with only 256 colors, thereby making the base colors an issue with the old hardware, as well. 
In order to maintain the consistency of the devices’ appearance as well as usage, safe color was introduced on three different levels. 

Really-safe Colors

Really safe colors were popularly used during the time of the 8-bit displays, where 22 among all the colors were displayed properly. These 22 were known as the web-safe colors. 

Web-safe Colors

This lot is the most widely known. It was more common in older displays and offered 216 colors. 

Web-smart Colors

This has a huge range offering about 4,096 colors. It was introduced with the aim of going beyond the restrictions of the web-safe colors. In addition it does not hamper the compatibility.
Apart from compatibility there are certain issues that bother the web designers while using colors, especially those related to web accessibility. . Color blindness with its various levels of seriousness, often poses as one of the problems in this respect.

Web Accessibility Considerations

As mentioned earlier, color blindness has different degrees of severity. While one might be unable to respond towards a single color, others may be insensitive to the complete band. There are cases of monochromes as well where the patient can see only two colors that are black and white. In severe cases one might also end up losing his vision completely.  
The different types include:


When a person fails to distinguish colors apart from black and white, or at most shades of grey, he is said to be suffering from monochromacy.


People suffering from color blindness are usually blind to three colors: red (protanopia), green (deuteranopia), and blue (tritanopia). A person undergoing a blindness of any of these three colors is said to be suffering through dichromacy. 


A condition that involves not complete blindness towards the three primary colors, but defects causing confusion, is called trichromacy. The defect with green is the most common. It is called deuteranomaly.
Due to these problems that may affect web accessibility, calls for a more careful choice and usage of color, in order to make the websites user friendly, and attractive. While designing the websites, one must realize that what appears attractive and colorful to one pair of eyes, may not be good enough for the handicapped users. 

Although color blindness cannot be eradicated completely, there are tools that can help overcome it.