TideArt

Archive of TideArt content.

Tue, Feb 19 2013 22:44:32 UTC

An introduction to colors

Colors may seem simple as we look at an object and register in our mind what color they are, but when it comes to computer graphics, these have to be represented in some numerical values, and then things tend to become more complex. Thankfully, engineers have developed a series of conventions that people can use to represent a certain color, but how familiar are you with these representations? In this quick introduction we will see some of the most basic concepts like the RGB color model, HSV, the HEX representation and alpha channel, along with the difference between ambient, diffuse and specular colors.



Whether you're working with 2D or 3D software, the color selector shown above may be familiar to you. This particular example comes from a program called Paint.NET but they all have similar concepts. On the upper left is the color wheel which shows every color available to you. In nature, there is no limit as to the actual amount of colors that you can pick, but on a computer, for practical reasons, these colors have to be limited to a certain number.

Back in the days of DOS and early Windows or Apple systems, people had to work with 16 colors only. This was very limited, and soon after the amount was brought up to 256 thanks to an increase in memory space. With this number of available colors, artists could finally start doing digital artwork that would mimic real life, but it was still fairly limiting. On modern computers, you have access to 16 million colors or more, which eliminates the need to have such a restricted palette. These colors are all shown on the wheel itself.

Since it can be almost impossible to remember exactly which color you picked on the wheel, almost all software also provide swatches, which are the rectangles you see at the bottom of the image. These allow you to store specific colors for later use. On the right side, you see the various representations of the selected color.

Modern computers work with the RBG color model. This is a way to represent a color with 3 values: red, blue and green. These are base colors that get added to one another, with a value between 0 and 255, or one byte. For example, if you have each value at 0, then you get black, since there is no blue, no green and no red. If you have each value at 255, then your color is flooded with each primary color, and you get white. All 16 million colors can be represented this way.

The HEX value is exactly the same thing as RGB, but those same values are shown using hexadecimal instead. So instead of 0 to 255 you have 00 to FF. So if you want pure green, you would have 0 blue, 255 green, and 0 red. In HEX, that would be 00FF00. This is something any web designer is familiar with, since web browsers understand these values inside of HTML and CSS files.

Another way to represent the same color is using HSV, which stands for hue, saturation and value. This is often used as an easier way for humans to adjust colors, but usually gets transformed back into RGB behind the scenes. Hue specifies which color you want, saturation is how saturated that color is, and value is often referred to as lightness, or how dark the color is.

One other concept which was added further down the line to computer systems is transparency, or the alpha channel. This is an added byte between 0 and 255 which specifies how transparent a specific pixel is. While it isn't a color per say, often it's used in combination with the color wheel. Using the alpha channel, you can select a red color at 50% transparency thanks to the alpha channel.



Finally, it can be useful to understand the difference between ambient, diffuse and specular colors. Computer graphic programs have to replicate the way light rays act in real life, and to help do that, an object may accept various types of color. Diffuse color is the most basic type, and what most people refer to when talking about the color of an object. It is the color visible when shining a direct, white light on it. Ambient color is the color visible in the shadows, visible thanks to ambient light.

Specular color is the color of the light in specular reflection. For most objects that color will be white. In the case of metallic objects, this will often be the same as the diffuse color. So a red plastic ball will have a white highlight, but a red metallic ball will have a bright red highlight. This is what gives hints as to the composition of the material.

Of course in order to display all that for you, many complex math formulas are used. A popular one is the Phong model, which is a process of calculating the ambient image, then the diffuse one, and finally the specular one, then adding them together to create the final image. But thankfully as artists, we rarely need to go into this much details.

Back to index


© 2007-2019 Patrick Lambert - All resources on this site are provided under the MIT License - You can contact me at: contact@dendory.net