Nov 18, 2010

Quick Color Guide

Ever wondered what your designer or printer is talking about when they start talking about color?  Here is a quick guide to color models and working with branded colors, to help you navigate those conversations.

RGB – The Additive System

RGB Color Model

RGB Color Model

RGB is the acronym for Red, Green and Blue, the three primary colors from which all others are created. RGB is an additive color models, meaning White is the “additive” combination of all three primary colored hues found in the light spectrum. Conversely, Black is the absence of light. Think of a blank computer monitor: it starts as black and the different colors are created from hues being “on”. Computer monitors, TV screens, and other electronic media rely on the RGB color model to translate color. RGB colors are described in intensity value ranging from 0 (none) to 256 (full).

Hexadecimal Color Codes

Hexadecimal Color Model

Hexadecimal Color Model

On the internet, RGB colors are described and interpreted by browsers as Hexadecimal color codes which begin with a hash (#) mark. Basically, Hexadecimal is a three byte conversion of RGB values using sixteen characters. The characters used are the ten numeric symbols (0-9) and the first six letters of the alphabet ( A-F) which shorthand characters 10-16. The three bytes of Hexadecimal are the values of Red, Green, and Blue respectively – #RRGGBB.

Converting RGB to HEX

Red = 256 Red + 0 Green + 0 Blue (Red in RGB values)
Red= 16 x 16 Red + 0x0 Green + 0x0 Blue (RGB values converted to 3 Bytes)
Red= FF 00 00 (Shorthand letters replace decimals)
Red = #FF0000

CMYK – The Subtractive System

CMYK Color Model

CMYK Color Model

CMYK is shorthand for the main ink colors used to create printed material – Cyan, Magenta, Yellow, and Black (also known as Key). The CMYK model works by masking colors on a lighter (think white paper) background. The ink reduces the light (paper) that would otherwise be reflected, or “subtracting” brightness from White. CMYK values are measured in percentages of 100, thus ranging from 0% (none) to 100% (full).

Rich Black

Process Black versus Rich Black

Process Black versus Rich Black

Theoretically mixing full intensities of Cyan, Magenta and Yellow ink together would create Black. However in reality this combination simply makes a dark brownish color called Process Black. Process Black wastes a lot of ink and creates areas that do not dry fast. Thus a solid ink color of Black is added to the mix, making printing large areas of Black cheaper and easier to produce. To make the solid Black ink more intense, different percentages of CMY are also added to the area creating Rich Black – usually 40% Cyan, 40% Magenta, 40% Yellow and of course 100% Black.

PMS – Pantone Matching System

Pantone Color Guide and Pantone Swatch

Pantone Color Guide and Pantone Swatch

Trying to keep colors consistent through the RGB (electronic) and CMYK (print) models can be difficult to say the least. Also throw into the mix that people, monitors, and operating systems all translate color differently and chaos ensues when trying to pick “the color”. Thus, third party services have been created that try to accurately match and describe colors reliably. The best known system is called the Pantone Matching System, or PMS for short.

PMS colors have a unique identifying name like in the above example PANTONE 1767C or PMS number 1767C for Coated paper. Pantone’s proprietary color guides give printers the exact mix of CMYK along with accurate conversion for RGB and HEX color models for designers. Most design applications like Photoshop, Illustrator, and InDesign have Pantone color books built into them so that colors can stay consistent through different projects, no matter what agency or location.

Want to Learn More About NetSource’s Team and Qualifications?

Read about the NetSource Difference
Learn about our award-winning websites
Meet Our Web Developers

2 thoughts on “Quick Color Guide”

  1. Youu really make it appear so easy together with your presentation but I in finding this matter
    to be acually something that I think I might by no means understand.
    It sort of feels too complex and very large for me. I’m having a look ahead in your subsequent put up, I
    will attempt to gget the grasp of it!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>