RGB-HEX-CMYK: Color Modes Primer

Color Wheel

Why the Letters and Numbers?

Color Wheel
By Maycock, Mark M [No restrictions], via Wikimedia Commons
Have you ever wondered what the acronyms RGB, CMYK, and HEX stand for? Why these color models exist? And, what do those numbers mean? Likely the answer is, “not really.” But when it comes to preparing images for display or reproduction, a basic awareness of the differences can save time and frustration when the results are less than ideal.

A color model is a complex and abstract mathematical way to describe color values across a certain set of numerical components. A color space is the means by which the color is viewed (eg, a computer screen or printed page).

Which Goes Where?

RGB color model
By SharkD (Own work) [GFDL or CC BY-SA 4.0-3.0-2.5-2.0-1.0], via Wikimedia Commons
RGB stands for “red, green, blue” and is considered an additive color space. Additive color involves a light or projection source – as in a television screen or computer monitor – to make the color visible. RGB color is reserved for rendering color that will be viewed on a screen, from the smart phone to the movie theater. Color value (light to dark) is governed by how much light, or chroma, is added to the color mix. Each letter in the RGB model carries a range of numerical value that, when combined, render color within the spectrum in the photo shown here. A color such as a grassy green would be expressed as rgb (120,176,15) when used to style web pages with CSS.

HEX stands for “hexadecimal” or “hex triplet” in that HEX color is a series of 6 numbers. Closely related to RGB, HEX color is used exclusively in web application (HTML, CSS, and SVG). HEX color is divided into three sections of two digits and is always preceded by the “#” sign, like so: #nnnnnn. The grassy green we made with RGB above is expressed as #78b00f in HEX color.