Understanding CSS2 Color Modes

“CSS2 gives you three basic ways of choosing colours: hexadecimal, keywords and rgb.

Hexadecimal notation

You probably already know how the hexadecimal notation looks, for each colour (Red, green and blue) you have two letters or digits, and in front of that a #. The higher the digits are, the brighter the colour. Pure black becomes #000000 while pure white becomes #FFFFFF.

But what do those digits actually mean? Hexadecimal notation uses a system of 16 digits. Because we only have 10 digits, the remaining 6 (they start at 0) are described using the letters A to F. Together, this allows for 256 numbers per primary colour. Those 256 numbers correspond with the current RGB colours in most screens, and allow for about 16 million different colours.

Next to the #rrggbb notation, there also is the #rgb notation that lets you pick red, green and blue with 16 increments, totalling 4096 colours. This means that #ff0000 and #f00 give the same colour.

RGB Notation

Another notation that has been in CSS for a while is “direct” RGB. It looks like this: rgb(255, 0, 0) for 100% red, 0% green and 0% blue. As you might already have guessed, this notation also uses 256 steps for each of the primary colours.

The only difference (apart from the syntax) is that RGB uses our own system of counting, while hexadecimal notation uses an alternative method. In theory, it’s easier to use the RGB notation because we understand it better. But when working with hexadecimal notation, it is my experience that you learn to think in 16 digits pretty quickly.”

Read the full article hosted by Kilina Valkhof’s personal blog and master the art of color control for your web page.