Before you look at the color table below, I should explain what RGB codes are and how to interpret them.
In the world of computers, we presently have 16,777,216 different colors to work with, and all of them are defined in terms of their Red, Green and Blue values - RGB for short. Each of those three colors can have any one of 256 values, ranging from 0 to 255, and in combination with the 256 possible values of the other two, they make up all 16,777,216 colors (256
3 or 256 X 256 X 256 = 16,777,216 Â And some of you probably thought nothing you ever learned in Math class would ever have any practical value? Well just wait - it gets worse!
)
HTML relies most often on the hexadecimal representation of 0-255 to code all 16,777,216 colors. (See - I told you it would get worse.
) Now, I'm sure you
all remember that hexadecimal notation uses the digits 0 through 9 as well as the letters A through F. So, the numbers 0 through 255 are represented in the following manner in the table below when converted from decimal (Base 10, which is what we use nearly every day of our lives) into hexadecimal (Base 16, which people like me, who program computers and/or do advanced work on the Web use nearly every day of our lives because so many aspects of programming revolve around multiples of 16 in one way or another.)
0 = #00 | 86 = #56 | 171 = #AB |
1 = #01 | 87 = #57 | 172 = #AC |
2 = #02 | 88 = #58 | 173 = #AD |
3 = #03 | 89 = #59 | 174 = #AE |
4 = #04 | 90 = #5A | 175 = #AF |
5 = #05 | 91 = #5B | 176 = #B0 |
6 = #06 | 92 = #5C | 177 = #B1 |
7 = #07 | 93 = #5D | 178 = #B2 |
8 = #08 | 94 = #5E | 179 = #B3 |
9 = #09 | 95 = #5F | 180 = #B4 |
10 = #0A | 96 = #60 | 181 = #B5 |
11 = #0B | 97 = #61 | 182 = #B6 |
12 = #0C | 98 = #62 | 183 = #B7 |
13 = #0D | 99 = #63 | 184 = #B8 |
14 = #0E | 100 = #64 | 185 = #B9 |
15 = #0F | 101 = #65 | 186 = #BA |
16 = #10 | 102 = #66 | 187 = #BB |
17 = #11 | 103 = #67 | 188 = #BC |
18 = #12 | 104 = #68 | 189 = #BD |
19 = #13 | 105 = #69 | 190 = #BE |
20 = #14 | 106 = #6A | 191 = #BF |
21 = #15 | 107 = #6B | 192 = #C0 |
22 = #16 | 108 = #6C | 193 = #C1 |
23 = #17 | 109 = #6D | 194 = #C2 |
24 = #18 | 110 = #6E | 195 = #C3 |
25 = #19 | 111 = #6F | 196 = #C4 |
26 = #1A | 112 = #70 | 197 = #C5 |
27 = #1B | 113 = #71 | 198 = #C6 |
28 = #1C | 114 = #72 | 199 = #C7 |
29 = #1D | 115 = #73 | 200 = #C8 |
30 = #1E | 116 = #74 | 201 = #C9 |
31 = #1F | 117 = #75 | 202 = #CA |
32 = #20 | 118 = #76 | 203 = #CB |
33 = #21 | 119 = #77 | 204 = #CC |
34 = #22 | 120 = #78 | 205 = #CD |
35 = #23 | 121 = #79 | 206 = #CE |
36 = #24 | 122 = #7A | 207 = #CF |
37 = #25 | 123 = #7B | 208 = #D0 |
38 = #26 | 124 = #7C | 209 = #D1 |
39 = #27 | 125 = #7D | 210 = #D2 |
40 = #28 | 126 = #7E | 211 = #D3 |
41 = #29 | 127 = #7F | 212 = #D4 |
42 = #2A | 128 = #80 | 213 = #D5 |
43 = #2B | 129 = #81 | 214 = #D6 |
44 = #2C | 130 = #82 | 215 = #D7 |
45 = #2D | 131 = #83 | 216 = #D8 |
46 = #2E | 132 = #84 | 217 = #D9 |
47 = #2F | 133 = #85 | 218 = #DA |
48 = #30 | 134 = #86 | 219 = #DB |
49 = #31 | 135 = #87 | 220 = #DC |
50 = #32 | 136 = #88 | 221 = #DD |
51 = #33 | 137 = #89 | 222 = #DE |
52 = #34 | 138 = #8A | 223 = #DF |
53 = #35 | 139 = #8B | 224 = #E0 |
54 = #36 | 140 = #8C | 225 = #E1 |
55 = #37 | 141 = #8D | 226 = #E2 |
56 = #38 | 142 = #8E | 227 = #E3 |
57 = #39 | 143 = #8F | 228 = #E4 |
58 = #3A | 144 = #90 | 229 = #E5 |
59 = #3B | 145 = #91 | 230 = #E6 |
60 = #3C | 146 = #92 | 231 = #E7 |
61 = #3D | 147 = #93 | 232 = #E8 |
62 = #3E | 148 = #94 | 233 = #E9 |
63 = #3F | 149 = #95 | 234 = #EA |
64 = #40 | 150 = #96 | 235 = #EB |
65 = #41 | 151 = #97 | 236 = #EC |
66 = #42 | 152 = #98 | 237 = #ED |
67 = #43 | 153 = #99 | 238 = #EE |
68 = #44 | 154 = #9A | 239 = #EF |
69 = #45 | 155 = #9B | 240 = #F0 |
70 = #46 | 156 = #9C | 241 = #F1 |
71 = #47 | 157 = #9D | 242 = #F2 |
72 = #48 | 158 = #9E | 243 = #F3 |
73 = #49 | 159 = #9F | 244 = #F4 |
74 = #4A | 160 = #A0 | 245 = #F5 |
75 = #4B | 161 = #A1 | 246 = #F6 |
76 = #4C | 162 = #A2 | 247 = #F7 |
77 = #4D | 163 = #A3 | 248 = #F8 |
78 = #4E | 164 = #A4 | 249 = #F9 |
79 = #4F | 165 = #A5 | 250 = #FA |
80 = #50 | 166 = #A6 | 251 = #FB |
81 = #51 | 167 = #A7 | 252 = #FC |
82 = #52 | 168 = #A8 | 253 = #FD |
83 = #53 | 169 = #A9 | 254 = #FE |
84 = #54 | 170 = #AA | 255 = #FF |
85 = #55 | | |
Now, why am I trying to confuse you? Honestly, I'm not. Really!
I'm just trying to give you a better feel for how colors work on the Web and in computing in general. And I'm also trying to give you a way to translate hexadecimal color codes into something that you can use in some of the software that's probably already on your computer.
For instance, many graphics programs allow you to define custom colors to use for backgrounds, text, borders, etc. And if you like some of the colors that you can use on the forum, with all this stuff as a background, you should be able to add them to your custom colors in whatever program you might like to use them.
But before we move on, let's take a look at the colors that are available on the forum (though I should warn that some older browsers - particularly older versions of IE - will not be able to display these colors correctly because they were originally developed for Netscape, but have since been adopted into standard HTML):
Color Name | RGB Code | Color Name | RGB Code |
 ---------- | ---- | ---------- | ---- |
aliceblue | #F0F8FF | lightsalmon | #FFA07A |
antiquewhite | #FAEBD7 | lightseagreen | #20B2AA |
aqua | #00FFFF | lightskyblue | #87CEFA |
aquamarine | #7FFFD4 | lightslategray | #778899 |
azure | #F0FFFF | lightsteelblue | #B0C4DE |
beige | #F5F5DC | lightyellow | #FFFFE0 |
bisque | #FFE4C4 | lime | #00FF00 |
black | #000000 | limegreen | #32CD32 |
blanchedalmond | #FFEBCD | linen | #FAF0E6 |
blue | #0000FF | magenta | #FF00FF |
blueviolet | #8A2BE2 | maroon | #800000 |
brown | #A52A2A | mediumaquamarine | #66CDAA |
burlywood | #DEB887 | mediumblue | #0000CD |
cadetblue | #5F9EA0 | mediumorchid | #BA55D3 |
chartreuse | #7FFF00 | mediumpurple | #9370DB |
chocolate | #D2691E | mediumseagreen | #3CB371 |
coral | #FF7F50 | mediumslateblue | #7B68EE |
cornflowerblue | #6495ED | mediumspringgreen | #00FA9A |
cornsilk | #FFF8DC | mediumturquoise | #48D1CC |
crimson | #DC143C | mediumvioletred | #C71585 |
cyan | #00FFFF | midnightblue | #191970 |
darkblue | #00008B | mintcream | #F5FFFA |
darkcyan | #008B8B | mistyrose | #FFE4E1 |
darkgoldenrod | #B8860B | moccasin | #FFE4B5 |
darkgray | #A9A9A9 | navajowhite | #FFDEAD |
darkgreen | #006400 | navy | #000080 |
darkkhaki | #BDB76B | oldlace | #FDF5E6 |
darkmagenta | #8B008B | olive | #808000 |
darkolivegreen | #556B2F | olivedrab | #6B8E23 |
darkorange | #FF8C00 | orange | #FFA500 |
darkorchid | #9932CC | orangered | #FF4500 |
darkred | #8B0000 | orchid | #DA70D6 |
darksalmon | #E9967A | palegoldenrod | #EEE8AA |
darkseagreen | #8FBC8F | palegreen | #98FB98 |
darkslateblue | #483D8B | paleturquoise | #AFEEEE |
darkslategray | #2F4F4F | palevioletred | #DB7093 |
darkturquoise | #00CED1 | papayawhip | #FFEFD5 |
darkviolet | #9400D3 | peachpuff | #FFDAB9 |
deeppink | #FF1493 | peru | #CD853F |
deepskyblue | #00BFFF | pink | #FFC0CB |
dimgray | #696969 | plum | #DDA0DD |
dodgerblue | #1E90FF | powderblue | #B0E0E6 |
firebrick | #B22222 | purple | #800080 |
floralwhite | #FFFAF0 | red | #FF0000 |
forestgreen | [font=Courier  New]#228B22[/font] | rosybrown | #BC8F8F |
fuchsia | #FF00FF | royalblue | #4169E1 |
gainsboro | #DCDCDC | saddlebrown | #8B4513 |
ghostwhite | #F8F8FF | salmon | #FA8072 |
gold | #FFD700 | sandybrown | #F4A460 |
goldenrod | #DAA520 | seagreen | #2E8B57 |
gray | #808080 | seashell | #FFF5EE |
green | #008000 | sienna | #A0522D |
greenyellow | #ADFF2F | silver | #C0C0C0 |
honeydew | #F0FFF0 | skyblue | #87CEEB |
hotpink | #FF69B4 | slateblue | #6A5ACD |
indianred | #CD5C5C | slategray | #708090 |
indigo | #4B0082 | snow | #FFFAFA |
ivory | #FFFFF0 | springgreen | #00FF7F |
khaki | #F0E68C | steelblue | #4682B4 |
lavender | #E6E6FA | tan | #D2B48C |
lavenderblush | #FFF0F5 | teal | #008080 |
lawngreen | #7CFC00 | thistle | #D8BFD8 |
lemonchiffon | #FFFACD | tomato | #FF6347 |
lightblue | #ADD8E6 | turquoise | #40E0D0 |
lightcoral | #F08080 | violet | #EE82EE |
lightcyan | #E0FFFF | wheat | #F5DEB3 |
lightgoldenrodyellow | #FAFAD2 | white | #FFFFFF |
lightgreen | #90EE90 | whitesmoke | #F5F5F5 |
lightgrey | #D3D3D3 | yellow | #FFFF00 |
lightpink | #FFB6C1 | yellowgreen | #9ACD32 |
A lengthy list, but really quite small when you consider that there are actually 16,777,216 colors available. These are merely the colors that someone decided to name so that people without a Math or Computer Science degree could avoid using hexadecimal codes and use understandable words instead. (And I seriously doubt that anyone will ever sit down and try to name all 16,777,216 available colors!
)
So, say you've decided that you like mediumturquoise so much that you want to make it one of your custom colors. However, your software wants you to enter three numbers between 0 and 255 to define a color. As you can see in the chart above, the hexadecimal code for mediumturquoise is #48D1CC. How do you make that information useful? Well, you break it up into its Red, Green, and Blue components, and then with the chart I've provided, you convert the hexadecimal code to its equivelent decimal number between 0 and 255 (0 being its darkest shade, 255 its brightest).
For #48D1CC, the Red component is the first two characters after the number sign, so Red equals 48 hexadecimal. The Green component is the two middle characters, so D1 hexadecimal is the Green component. And the last two characters are the Blue component, which is CC.
Now, going back to refer to the chart I've provided, you'll see that 48 hexadecimal equals 72, D1 hexadecimal equals 209, and CC hexadecimal equals 204. So, to add the color mediumturquoise to your software's custom colors, you'd enter the following values:
Red = 72
Green = 209
Blue = 204
End of today's lesson. But you can be sure that this won't be the last one I'll ever post.
And if I've whet your appetite to learn more on this subject, I suggest you check out the following link:
HTML Color Nameswhere you'll not only be able to get a better idea of what each of the colors looks like, you'll find links to all sorts of HTML related topics.
Have fun posting with all the new colors!
The MB