|
The purpose of the RGB color system is to display a colored image within an electronic system, such as a television, computer, or any digital image, before print. It is a complex system. However, if you are a digital artist or web designer, it's good to know the basics.
Red, Green, and Blue (RGB) are added together in various ways to produce a broad array of colors in this additive color method.
Each color is described by the strength of the Red, Green, or Blue components. These values specify the intensity of the colors with three numerical values for each, from 0 (none) to 255 (full intensity).
Within RGB, possible decimal notations include: Red is equal to 255, 0, 0 (Red at full intensity, no Green or Blue); Green is equal to 0, 255, 0 (Green at full intensity, no Red or Blue); and Blue is equal to 0, 0, 255 (Blue at full intensity, no Red or Green).
|
| Decoding RGB |
When Red is equal to (255, 0, 0), this means Red at full intensity with no Green or Blue. Green is equal to (0, 255, 0). This means Green at full intensity with no Red or Blue, etc.
| Creating Colors with RGB Values | Red Value | Green Value | Blue Value |
| Red | 255 | 0 | 0 |
| Green | 0 | 255 | 0 |
| Blue | 0 | 0 | 255 |
| Maroon | 153 | 0 | 0 |
| Yellow | 255 | 255 | 0 |
| Gray | 153 | 153 | 153 |
| RGB Value | 0 | 17 | 34 | 51 | 68 | 85 | 102 | 119 | 136 | 153 | 170 | 187 | 204 | 221 | 238 | 255 |
| Red | ||||||||||||||||
| Green | ||||||||||||||||
| Blue |
Converting RGB Numbers to Web Colors
Web colors are usually specified using hexadecimal notation, not RGB decimal notation. The hexadecimal system is an alphanumeric base-16 system. F is the highest value, and 0 is the lowest value. The whole counting range is 0 1 2 3 4 5 6 7 8 9 A B C D E F.
Hexadecimal Number System:0 1 2 3 4 5 6 7 8 9 A B C D E F
Color is coded by the strength of its Red, Green, and Blue components within the RGB system. The HTML hex color value template is 'RRGGBB.' RR is the Red intensity, GG is the Green intensity, and BB is the Blue intensity. A combination of six hexadecimal digits displays the digital translation, where the hex values for each color can range from a high of FF to a low of 00.
For example, FF9900 is the hexadecimal code for orange (255, 153, 0) in RGB notation. The first two digits represent the amount of Red. The following two digits represent Green. The last two digits represent Blue.
On a 256 color monitor, only the R of Red, the G of Green, and the B of Blue affect the color, except for pure colors and grays, where only 6 of the hex digits have any effect. Those digits are F, C, 9, 6, 3, and 0. The most practical two digits are FF, CC, 99, 66, 33, and 00. We could also use F0, C7, 95, 61, 3A, 0E instead of FF, CC, 99, 66, 33, 00 and get the same results on a 256 color monitor, but it might come out slightly different on higher resolution monitors.
There are millions of combinations of colors within these six alphanumeric digits, but only 216 of these colors can be safely displayed by every browser. The 216 web-safe colors are always a combination of the following values:
|
|||||||||||||||||||||||||
The Browser Safe Color Palette
Web-safe colors are the set of 216 colors common to most browsers. A palette created from such colors is often called a web-safe or browser-safe palette because it produces consistent results on different platforms and browsers. When an image is displayed in a 256-color screen mode, this set of colors is never dithered.If a designated color is not included in the default palette, the browser will choose two colors to closely replicate it. This substitution of color is called "dithering." That is why specific images may look speckled or grainy. Text will not be "dithered," but it will be displayed in the palette using the following color closest to it.
The chart below contains the 216 "Non-Dithering" palette colors showing both the RGB and the hexadecimal codes.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Have you ever worked with color in Photoshop or used the additive color method?
