TEmelie - web design blog

What is color? Well according to W3C the definition is quite simple actually. In the W3C perspective a CSS color is one of two things: a number or a keyword. In reality an artist for instance doesn’t create a painting by simply writing on the canvass the numbers or the keywords corresponding to the colors he pictured in his head. The same applies to Web designers.

HTML uses 4 color keywords as follows aqua, black, blue, fuchsia, gray, and green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Sounds fairly simple doesn’t it? Well before you get to excited you should know that there is a second list of keywords first introduced by Netscape, which was the first browser to support color keywords. As if this wasn’t complicated enough spellings comes into action. What I mean by this is that Internet Explorer is very picky when it comes to the way we spell gray or grey. No matter what the name is or who first introduced them, color keywords are a big pain in the “side” (if you don’t know what you are doing, that is).
A second way to define colors is by using numbers. Right off the bat CSS 2 provides us with two ways of specifying colors as numbers: RGB and Hexadecimal RGB.
RGB color numbers
RGB stands for red, green and blue and every other color is obtained by mixing these three colors in different proportions. There are two ways in which you can define a color in RGB: the first way assigns each of these three colors a number between 0 and 255 e.g. rgb (255, 0, 0) whilst the second uses percentage values e.g. rgb (100%, 0%, 0%).
Hexadecimal color numbers
Are the same thing as standard RGB color numbers just converted in base-16. What this means is that every number is formed by three pairs of numbers which take a value from 00 to FF. In this case the color red becomes #ff0000.
CSS color numbers
A more complex system of defining colors by numbers is presented in three categories by CSS 3:
-the transparent keyword
-RGBA color values
-HSL color values
The transparent keyword evolved from CSS 1 to CSS 2 and then finally reached the form we now see in CSS 3. What this mean is that the keyword can be used in any property that has anything to do with color.
RGBA color values simply mean you can set the opacity of the color on a scale that ranges from 0.1 to 1.0. In practice this is achieved as follows :

rgb (red, green, blue, opacity)

Some browsers don’t recognize the last value, the one used to define the opacity. In this case theoretically the color should return to fully opaque. In practice however there is a different story: the color value is completely ignored.
HSL color values
RGB has two major problems that need mentioning. Firstly, in order to display the colors RGB assumes the CRT color model which can lead to problems when trying to print something. This translates into a poor printing on some ocassions because most printers are based on CMYK. Secondly RGB is non-intuitive. This means that while people think of colors in order of hue, saturation and lightness, RGB sees colors in a machine generated way.
In order to adress this problems, HSL color values define hue, lightness and saturation by assigning them numerical codes. For instance red in HSL would be written hsl (0, 100%,50%). Although HSL resolves this problem it too has a drawback in the way that it’s not supported by most browsers.