Understanding RGB Levels

Having different levels of each of the primary colors is important because without them, only the 8 fullest colors would exist - black, white, red, green, blue, cyan, magenta and yellow. There would be nothing in between.

Think back to the 'flashlight' example from the previous part of this article. Now imagine that you are turning the 'flashlight' down. The light being shined onto the canvas will diminish in brightness. We can represent this in our hex color values by bringing the value down closer to 00. The closer to 00 (black) that you go, the darker the color will become. In web design, the most common colors (the colors considered to be safe) are defined with the levels 00, 33, 66, 99, CC or FF for each of its red, green and blue counterparts.

The image below depicts the three primary colors at the most common levels.



A dark red could be represented by #330000. This red is one fifth the brightness of a full red color (a full red being represented by #FF0000). #660000 would represent a red that is two fifths the brightness of a full red. Similarly, the same principle can be applied to green and blue. For example, a full green is represented by #00FF00, so a dark green that is one fifth the brightness of full green is #003300.

The following images will illustrate some basic examples:




Navigate this article:
Intro | 1 | 2 | 3 | 4