Text ColorSince Craig introduced color, let's take a look at how we can use color in a post.
First, let's talk about how computers represent
color. As a kid, I learned how to mix colors with crayons. But crayons are really "pigments" which absorb some colors of light while reflecting others. Absorbing some colors of light is the process of
subtracting certain colors from the white light that would otherwise be reflected. This is what is done when we put ink on a page. The page doesn't generate light. The page reflects light. The various pigments in the ink subtract certain colors of light from the white light that hits the page. But computer screens generate their own light. So computer colors are
additive and not subtractive.
These are the three primary
additive colors of light used by computer screens:
Red
Green
Blue
If you remember the "old" color television tubes, you may have looked at one very closely and found that the full color screen was made up of tiny red, green, and blue dots (phosphors). In other words, all computer colors can be made up with mixtures of red, green, and blue. Here are a the combinations of full strength red, green, and blue:
Red + Green makes Yellow
Green + Blue makes Cyan
Blue + Red makes Magenta
Red + Green + Blue makes White
- Mixing of full-strength Red, Green, Blue to get Yellow, Magenta, Cyan, and White
- Additive_Colors.png (9.26 KiB) Viewed 2680 times
So those are the "full strength" colors and "full strength" combinations. But what about non-full-strength colors? How are are other mixtures represented?
That brings up the question of how to represent different amounts of different colors. As you might guess, we can represent color values with numbers. For example, you might represent the amount of "red" in a given color as a number from 0 to 99. That's pretty close to what computers use. The only difference is that computer digits go beyond 0 through 9 to include A, B, C, D, E, F. So rather than numbers going from 00 to 99, computer colors go from 00 to FF. Let's see how some of those numbers might be used to represent the 3 primary computer colors red, green, and blue:
00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF
00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF
00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF
Those are the three primary colors (red, green, blue), but they can also be combined to create other colors. These combinations can be represented as points in a "color cube* as shown here:
- Every displayable color is represented as a point in the color cube
- Color_Cube.png (46.5 KiB) Viewed 2680 times
Each point in that cube is represented by the three numbers (coordinates) of that point. These will be the amounts of red, green, and blue. For example, the web color known as "SaddleBrown" is listed on
Wikipedia as:
SaddleBrown = 8B red + 45 green + 13 blue
The colors are traditionally ordered as Red, Green, Blue (RGB), so the color "saddlebrown" is "8B4513". Here's how we can use that color for some of the text in a post:
I had a great landing in the [color=#8B4513]muddy water[/color]
by the shore.
Note that the color number (8B4513) is prefixed with "#" in the post.
Here's what that post will look like in the forum:
I had a great landing in the muddy water by the shore.
Remember from our previous exercises that the bold, Italic, and underline tags had an opening tag and a closing tag as shown here:
Example | Opening tag | Closing tag | Result |
[b]Cape Kiwanda[/b] | [b] | [/b] | Cape Kiwanda |
[i]Oregon[/i] | [i] | [/i] | Oregon |
[u]1978[/u] | [u] | [/u] | 1978 |
The same is true with the color tag. There will be an opening tag and a closing tag around the text that you want to color. But unlike the earlier tags, the opening tag will include the color itself. Here's the previous table with the color tag added:
Example | Opening tag | Closing tag | Result |
[b]Cape Kiwanda[/b] | [b] | [/b] | Cape Kiwanda |
[i]Oregon[/i] | [i] | [/i] | Oregon |
[u]1978[/u] | [u] | [/u] | 1978 |
[color=#8B4513]muddy water[/color] |
[color=#8B4513] | [/color] | muddy water |
You can see that it's the same pattern of an opening tag and a closing tag. But for color, the opening tag includes the color you want to see.
And speaking of the color you want to see, all colors can be represented with a "#" character followed by exactly 6 hexadecimal digits. A hexadecimal digit is one of these:
0 1 2 3 4 5 6 7 8 9 A B C D E FAny combination of 6 of those hex digits (2 for
red, 2 for
green, 2 for
blue) will make a color, and you can use any color number. That gives you over 16 million possible colors to use (16,777,216 to be exact). There are also much smaller tables of
named colors such as the
color table at Wikipedia. Here are some samples from that table:
Color Name | Hex Number | Color |
HotPink | FF69B4 | |
LightPink | FFB6C1 | |
DarkRed | 8B0000 | |
Red | FF0000 | |
Salmon | FA8072 | |
Orange | FFA500 | |
Gold | FFD700 | |
Yellow | FFFF00 | |
LightYellow | FFFFE0 | |
SaddleBrown | 8B4513 | |
Chocolate | D2691E | |
Tan | D2B48C | |
BlanchedAlmond | FFEBCD | |
Green | 008000 | |
DarkGreen | 006400 | |
OliveDrab | 6B8E23 | |
Chartreuse | 7FFF00 | |
Teal | 008080 | |
Cyan | 00FFFF | |
Aquamarine | 7FFFD4 | |
Blue | 0000FF | |
LightSkyBlue | 87CEFA | |
Navy | 000080 | |
Purple | 800080 | |
Magenta | FF00FF | |
Plum | DDA0DD | |
Lavender | E6E6FA | |
Beige | F5F5DC | |
Ivory | FFFFF0 | |
White | FFFFFF | |
Black | 000000 | |
SlateGray | 708090 | |
LightGray | D3D3D3 | |
You can also use these named colors in your posts instead of numbers. For example, you can use these BBCode strings:
[color=Red]Red[/color]
[color=Green]Green[/color]
[color=Blue]Blue[/color]
[color=HotPink]HotPink[/color]
[color=Orange]Orange[/color]
[color=Aquamarine]Aquamarine[/color]
[color=LightSkyBlue]LightSkyBlue[/color]
[color=Plum]Plum[/color]
[color=SaddleBrown]SaddleBrown[/color]
to get these post strings:
Red
Green
Blue
HotPink
Orange
Aquamarine
LightSkyBlue
Plum
SaddleBrown
As listed in the table above, each of those named colors is equivalent to a color number, but not all color numbers have a name (remember, there are over 16 million possible color numbers!). So using numbers for colors gives you the ability to specify ANY color, but using named colors can often be more convenient.
OK, that should be enough to do the following exercise. If you have any questions, please post them. Have fun!!
Exercise 2: Make a post to this topic that describes a few gliders (or airplanes or cars) that you've seen or owned. Use a few appropriate colors in the description.