How to Understand Color Codes
By
|
Most people who work with the Web believe that one is either a developer or a designer. The developers handle the programming (and in general aren't artistic) and the designers can produce beautiful designs, but lack natural programming skills. The reality isn't as clearly defined, though there is some element of truth, and it's probably the reason why so many people tend to struggle with understanding the values of color codes. What trips most people up is the fact that it takes a little bit of understanding from each side of the apparent developer-designer divide.
In this article you'll learn how the mechanism behind color code values works with the aid of a simple program that I've created. The program, Colourcoder, is designed to not only let you find a color you want with ease, but also help you gain a more intuitive grasp of color codes while you use it.
About Colourcoder
Here's a download link for the program which also includes the source code. Note that the program is colorcoder.jar. The program has been designed so you can use it whenever and wherever you need it. It should run on just about any operating system and doesn't need to be installed on a
computer (although it does require that a reasonably up-to-date version of Java be installed.) You can even run it
off a USB memory stick if necessary. When run, the program will
check to see if it has permission to write a tiny (0.15 KB) history file in the same folder that the program is housed. If
it has permission, it will use this file to record any colors that you've told it to store in the palette. If it doesn't
have permission to write the file the program will work normally, but color samples stored in the palette will be lost
once the program is closed.
Color Mixing
As a child, you probably recall learning that white light is actually a mixture of many colors. The same principle also applies to color codes. When trying to create the color you want with color codes, you have three base colors (red, green and blue) which you must mix together to create the final color you want to display. Instead of simply thinking of them as just colors, think of them as colored lights where you can increase and decrease the brightness. If you look at the color mixing bars in the left side of the Colourcoder window you'll notice I named them lights to reinforce this idea.
(See Figure 1)If you're curious as to which values you need to use to get the color you want, imagine a space where the only sources of light are these three colored lights. Thinking about the colors in this way should make two things immediately obvious: how to get the color black, and how to get a lighter or darker variant of a color you already have. To get the color black you simply turn off all the lights. To get a lighter or darker shade of a color you already have, you simply turn all the lights up or down together respectively. You'll see these effects when you start up Colourcoder. Each light is represented by a colored bar with a knob at its side that you can slide up and down to increase and decrease the brightness. When you start Colourcoder, all the lights are in their off (zero) position and the result is the color black. Each bar indicates the color you would get at whichever position you moved the knob up or down. As you can see, each light starts out black (off) and then gradually gets brighter towards the top.
For a simple demonstration leave the red and blue lights down in their off position and move the knob on the green light to the halfway position. When you do this, three key things will happen. Firstly, the color in the sample data section will change from black to the setting indicated on the knob. As you will see more clearly in a moment, this is where the mixed or individual color is displayed. The second change is that part of the colour sample index value in the text field has changed to reflect the color code value of the color sample that is currently being displayed in the sample data section. The third change is that the other two colored bars have also changed the colors they're now displaying. This is because they've updated to show you what color you will get at whichever position you move their knobs to now that you have blended in another color (green.)
(See Figure 2)
