RGB color model explained

The RGB color model is used for color representation on display devices, and not print use where among others, the CMYK model would be an appropriate model — however, in print scenarios it depends on the printing device what specific color model can be used.

Short excursion into CMYK: CMYK is a four color (ink) printing model and means: CYAN, MAGENTA, YELLOW, and KEY (in printing that is the KEY plate for details), however, with regard to CMYK it is BLACK as the fourth color. Actually, overlapping the CMY colors produces BLACK but not in a satisfactory saturated way, therefore a real BLACK ink is used. CMYK is a subtractive color model because adding ink layers reduces the amount of light reflected from the surface and therefore ‘subtracts’ some wavelengths of light. To put it in other words: the ink is absorbing some light and the rest is reflected and what our eye catches.

Other color models in printing are e.g. SPOT color (readily mixed colors used in printing devices, aka no mixing) or PANTONE (an industry standard high quality color model).

Short excursion into the TRADITIONAL ‘ART’ Color Model: RYB (Red, Yellow, Blue) — Art education will use that model as the traditional primary colors used since the old 19th century masters like Renoir, VanGogh etc. — the following color wheel is one of many representations and that one is by Johannes Itten (Johannes Itten, 1888 – 1967, was a Swiss expressionist painter, designer, teacher, writer and theorist associated with the Bauhaus school.)

The RGB color model

RED, GREEN, BLUE are the primary colors that represent light beams and when combining such light you create the secondary colors (CYAN, MAGENTA, YELLOW) and eventually reach the full spectrum: WHITE. The following image represents that light combination very well.

Brief side-step into Photoshop: image editing software like Adobe Photoshop allows to break up a color image into its RGB channels plus and alpha channel which can be examined and modified separately.

The intensity of each light beam and the overall mixture of those intensities defines the resulting color. In RGB each component (RED, GREEN, BLUE) can assume 256 values (0 to 255 or represented in HEX: x00 to xFF (see also my brief introduction into The Hexadecimal System explained).

A RGB value (aka a color value) is commonly written as decimal or hex e.g. RGB(255,0,0) or #FF0000.
A ‘zero’ value means that there’s NO intensity at all and if there’s no intensity in any channel then you end up with BLACK. RGB(0,0,0) or #000000.

Vice versa, as the above graphic shows: if the intensity of all channels is 100%, aka RGB (255,255,255) or #FFFFFF the resulting color is WHITE.

00 describes zero intensity (non-existing) and FF describes full intensity. So, here is how to describe the three primary colors RED, GREEN, BLUE:

RED in fullest intensity: #FF0000
GREEN in fullest intensity: #00FF00
BLUE in fullest intensity: #0000FF

Now put them all together and create FULL WHITE: #FFFFFF

Now, take away a channel, one by one:
Take BLUE away (#FFFF00) which means you mix RED and GREEN and the result is the secondary color YELLOW.
Take GREEN away (#FF00FF) which means you mix RED and BLUE and you get MAGENTA.
Take RED out of the full spectrum (#00FFFF) and GREEN and BLUE make CYAN.

Values (per channel) lower than FF means a lower intensity of that channel color and therefore you end up with a custom mix of color intensities which form all the other colors we like to represent, up to the 16 Mio.

Especially once you have read my Hexadecimal article you will recognize the importance of calculating with the HEX system. Here, in the RGB model we deal with three channels and each is represented by 8bits which go from 00 to FF, altogether 256 values. All three channels create a 24bit value which can address max. 16,777,216 values (or colors if you want…). The system is also referred to as TrueColor. But wait, there’s also a 4-byte representation of colors and you might encounter that in Photoshop and other applications and areas like CSS. The extension of RGB is adding an Alpha (opacity) channel and it becomes RGBA.

RGBA

RGBA still represents the three color channels RED, GREEN, BLUE and yields the ca. 16 Mio colors, however, you add an opacity value (again #00 (nothing) to #FF (full)) — mostly in design or software the alpha value is written as percentage or a decimal value ranging from 0 to 1, e.g. for 50% opacity write: 0.5. A red color with 50% opacity could be written as: rgba(255,0,0,0.5)