Navigating the RGB Color System

Authored by Christy Olsen
3-minute read.

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, it's good to know the basics if you are a digital artist or web designer.

Red, Green, and Blue (RGB) are added 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


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 the RGB system's Red, Green, and Blue components. 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 be 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:

Hex 00 33 66 99 CC FF
RBG 0 51 102 153 204 255


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 displayed in the palette using the following color closest to it.

Follow Christy Olsen
on her instructional blog at christyolsen.blogspot.com
or visit her website at ChristyOlsen.com
Previous Next

Contact Form