How to Understand Color Codes [con't]
|
To better illustrate the behaviour of the colored bars that represent each light, try this example. As I'm sure most of you are aware, mixing red and green gives you yellow. Continue to move the knob on the green light all the way up to the top. Now look at the colored bar that represents the red light. You will see that it now starts out as green at the bottom and develops more yellow as you get closer to the top of the bar. This shows that, now you have added the maximum level of green into the mix, you would get yellow if you were to move the knob on the red light all the way up to the top (fully on) position. If you do move the knob on the red light to point to the yellow all the way at the top of the red light then you will see that the resulting color will be displayed in the sample data section in the bottom right corner of Colourcoder's window where the results of your mixing of the three lights will be displayed.
(See Figure 3)Using the colored bars in this way should make it easy to find the color you want, but this isn't the only reason for showing the mixing results in this way. The main reason the color mixing possibilities are presented on these large colored bars is because the only effective way of learning which mix of base colors produces which final color is to regularly see the mixing results for yourself. Over time, as you see the effects of mixing these lights in this way, you'll gradually develop the ability to figure out how much of each base color is necessary to produce the color you want without having to constantly refer back to Colourcoder or some sort of wall chart.
Number Formats
In general, when specifying colors for use in Web pages and many other places, one of two number formats will be used:
hexadecimal or decimal. The hexadecimal notation follows the form of a hash mark followed by six hexadecimal digits. For example,
#267193 and #CA9B87. The decimal notation follows the form of three decimal numbers ranging from 0 to 255
separated by a comma and optional white space. The numbers used in this hexadecimal example would be be displayed as:
38, 113, 147 and 202, 155, 135 in decimal notation. Most people are likely to find the decimal format the
easiest to understand, since it's the system we've grown up with and use on a day-to-day basis. It has also has very
clear boundaries between each of the three color values that make up the single overall color. In contrast, the hexadecimal format is
neat, compact, and easy to understand once you become familiar with it. The Colourcoder program
supports both of these formats and allows you to freely switch between them. Simply select your desired format using the
buttons in the bottom-right corner of the window, just above the text field containing the color code value. I encourage you to
make use of both formats equally in the hope that you will become just as comfortable with one format as the other.
Regardless of whether you're using the decimal or hexadecimal notation, three simple rules will always hold true. The first rule is that the color code is always split into three sections. The boundaries between the sections in the decimal notation are made obvious by the comma, but in hexadecimal notation the boundaries aren't shown. In the hexadecimal format, each section is represented by a two digit number ranging from 00 to FF and each section sits right next to its adjacent sections without any separating marks. The second rule is that in each color code section a higher number means a brighter light. The third rule is that the sections always appear in the same order; the first section always represents the value of the red light, the second always represents the value of the green light, and the third always represents the value of the blue light. You can see this in action when sliding the knob of one of the lights up and down. If you slide the knob for the green light up and down you will notice that in hexadecimal notation only the middle two digits will change their value. If you do the same thing while displaying the decimal notation, only the middle number will change its value. Understanding this basic concept allows you to instantly construct or pick apart either color code format.
After the structure, the only thing left that might trip some people up is the hexadecimal number system itsself. Like most aspects of color codes, the hexadecimal number format isn't actually as complicated as it might seem. You can use the number system in much the same way as you use the decimal system so long as you remember that the range a single digit represents is larger than it is with decimal. In decimal you count zero to nine and then move on the the next, more significant, digit. In the hexadecimal format you don't stop at nine and continue counting on to A (signifying 10) through to F (signifying 15). Once you hit F you then do the same as in the decimal format and move on to the next digit. Just remember that in hexadecimal 30 does not mean 3 times 10: it means 3 times 16 (48 in decimal). A slightly more complex example would be AC. The number AC means 10 (A) times 16 plus 12 (C) which equates to 172 in decimal.
Summary
By now you will see that, despite their apparent complexity, color codes are simple constructs. They just need a little bit of understanding from both an artistic and numerical standpoint. Once you understand the structure of color codes all that's left is to practice your color mixing skills. I hope the Colourcoder program helps you understand how to mix colors, so you can eventually learn to quickly create color codes without needing to refer to a visual aid. For more information, please write to me.
Original: October 14 2008
