Before diving into using the color tools in Dreamweaver CC, let’s take a moment to learn a little about how colors are defined in internet applications.
Red, Green, Blue, Three Colors That Make Up The Rainbow
The Red Green Blue color model has been around for quite some time. Long before the age of the modern computer, television sets used red, green, and blue electron guns to create all the colors of the spectrum. Combining different levels of these three colors can produce all the colors seen on a modern computer screen. Combining all the colors together at the maximum output level results in the color white, and all three colors at minimum output produces the color black.
Most of your web will probably involve the hexadecimal color format, but let us get started with the rgb format, which is a little easier to explain and understand.
As you might guess, the “rgb” in the rgb format simply stands for “red,” “blue” and “green.” To display the color red only, at maximum output, you would use the color definition “rgb(255,0,0).” To describe the color blue, at maximum output, you would use the color definition “rgb(0,0,255).” And the color white, which is created by combining all three colors at maximum output, would be written as “rgb(255,255,255)”.
You might wonder where the number 255 comes from. First, keep in mind that in the world of computers, counting almost always starts with the number “0”, so color levels have a range of 256 values, from 0 to 255.
Imagine you have a light switch. With the switch off, the room is dark, with the switch on, the room is fully illuminated. To describe this in the world of computers, you would need only one bit, representing either “off” or “on.” Remember, at the end of the day, computers are digital machines that that can only think in terms of switches being either on or off.
But when if we added a second switch? This would double the range of values, to four possible light levels. The possible combinations are both switches down, the first switch up and the second switch down, the second switch up and the first switch down, and finally both switches up. We could call this 2-bit color. Each time we add another switch, we double the number of light levels, so three bits gives us 8 levels, 4 give us bits 16 levels, 5 gives us bits 32 levels, 6 bits gives us 64 levels, 7 bits gives us 128 levels, and finally 8 bits, or eight switches, gives us 256 possible levels. As you might guess, this means that each color element, red, green, and blue, requires eight bits each. The total combination is 8 + 8 + 8 bits, or 24-bit color.
We use the term “24-bit” to describe the resolution of colors displayed on web browsers. Again, this is a combination of three colors, each with 8 bits.
The amazing part is this: by varying the levels of these three colors, each with a range of 256 possible values, we can define 16,777,216 different colors!
When you think about it, this is an incredibly efficient system for describing colors and transmitting images across the internet.
There is a special extension of the rgb color format called “rgba.” In this format, one extra number is included, called the alpha channel. This alpha channel number lets you specify transparency. Let’s say that you have a background image for your homepage, and this background image is a picture of the ocean. When you put your text on this page, it is hard to read, because of the rich colors of the background image.
One solution to this problem is to put your text inside a container, a div, and then set the background color for the text container to white. This works well, but what you would really like is to see a little of the background ocean image show through the white background of the text. You do not want a solid white color, but a slightly transparent color. The color white, in basic rgb code, is rgb(255,255,255). You could make this color white slightly transparent by specifying the color in rgba format, and adding a fourth number to indicate the level of opacity.
To create a background color for your text container that is 80% opaque, and which allows 20% of the background image to show through, specify this color: rgba(255,25,255,0.8). The last number indicates how much of the background can show through the color. This is much like tinting the windows on a car. To add a color white that is 50% opaque, or 50% transparent, specify the color to be rgba (255,255,255,0.5).
Let’s look again at that last number, the alpha channel. This is a number between 0 and 1. A completely transparent image has an alpha channel value of “0”, and a completely opaque color has a value of “1.” Of course, if all your rgba colors have an alpha channel value of “1”, then they are fully opaque, and you may just as well use basic rgb colors, which are by standard 100% opaque.
While you may never have occasion to use the rgba format, this feature can be handy for adding a sense of depth to a web page. You can also use jQuery to animate the alpha channel property, creating colors with transparencies that fade in or fade out.
Most frequently you will see internet colors written in the popular hexadecimal format. Hexadecimals colors are written with the “#” (or ‘pound’) sign. If ever you see a color described using the “#” sign, you can be certain that you are working with a hexadecimal color. Hexadecimals are written with either six or, on occasion, three numbers. In the decimal system, built around the number 10, we count from 1-10, or 0-9, if we are a computer. We use the term hexadecimal, because we essentially count from 1 – 16. After the number 9, we use letters of the alphabet, a,b,c,d,e and f. For example, the color “white” can be written as #ffffff, or #fff. We will cover the three number format a little later, so for now keep in mind that a six character heximal color is really is actually a combination of three colors, red, green and blue.
Hexadecimal colors are really the same as rbg colors, but written in a way that requires fewer characters, and is a little more “computer friendly.” You can see from our earlier example that computers like numbers that represent different powers of the number 2, such as 4, 8, 16, etc. because computers, at their heart, and based on simple on and off switches.
Perhaps if people had eight fingers on each hand, we would also prefer to count using hexadecimals!
So, the number “10” written in hexadecimal format, is represented by the letter “a”, and the number “11” is represented by the letter “b”, all the way up to the letter “f”, which represents the number “15.”
If we want to express the color black in rgb, we write rgb(0,0,0). In hexadecimal format, it looks pretty much the same, “#000.” The color white, in rgb, is rgb(255,255,255), but in hexadecimal the color white is “#ffffff.”
You can see that hexadecimal is just a shorter, more convenient, way to write the same thing. Consider the color pure blue, in rgb this would be rgb(0,0,255). In hexadecimal the same color is #0000ff.”
Because web designers are always trying to find ways to write code using fewer characters, a short hand version of the six character hexadecimal format was introduced as a part of the css specification. If all the color pairs can be expressed as a repeating number, you can simply write the color using three digits. For example, rather than writing “#ffffff” to represent the color white, you can write “fff.” Or the pure blue color “#0000ff” could be written as “#00f.”
Keep in mind this is a part of the css definition, not the standard html definition, so this rule must always be used as a part of a css rule.
Wayne Joness
West Los Angeles College, cs952
Fall