Color Space

In-Depth
The comprehensive study of color spaces composed by Zain Wirasat
Color Spaces
Our designs can appear anywhere. Mobile screens, laptops, printed
newspaper, glossy business cards or metal signs. The challenge with this is
our chosen color palettes may look different in all of those different
places.
This section will review the different ways to represent color in both the
digital and print space. Knowing how each color mode works will help you
to understand how best to tweak color to make it consistent across all
channels.
RGB
ADDITIVE COLOR SYSTEM
Used commonly for digital design projects such as social media, website images, All light mixed together
at full brightness produces
mobile apps etc. If you are seeing this on a digital device in the form of a pdf white light.

your computer is determining the color of the document by reading the RGB
numbers and adjusting the light on your computer screen to put together those
colors.

Computer screens consist of thousands of tiny

lights that can show blue, green or red light in
any given space. It can adjust the brightness of
each pixel along with
mixing the one of three color light options to
give you a very huge array of color.

GREEN LIGHT
(Phosphor)
REPRESENTS ONE PIXEL
ON YOUR SCREEN
GREEN LIGHT
This is called an additive color system because you add (Phosphor)

colors together to form other color combinations. For

example, if a screen wanted to produce a pixel that is
white, it would have all three of its phosphors (lights) on
red, green and blue at full brightness. If it wanted to
remain black it would have no light emission and all
three light phosphors switched to off. For gray it can BLUE LIGHT
have all three lights on but only at half brightness. (Phosphor)
Color Gamut
RGB is used in all digital devices that use light to produce color. It does a great
job of representing the total visible colors to the human eye, but it cannot
show all visible colors.

A color gamut is the breadth and reach of how many colors can be represented
on any given device. If a color is outside of the gamut of that device it will be
shown as the nearest available color in that gamut. This is why having a high
quality screen and device with a wide color gamut can improve the range of
colors that can be represented on your screen.

sRGB and Adobe RGB are popular color spaces you can use in modern design
software. sRGB covers only 35.9% of the total visible gamut while Adobe RGB is
slightly better at 52.1%. As screen technology gets better, we are able to push
those numbers higher and higher giving us wider color gamuts.

There is a consistency problem with RGB as your design will be shown on

possibly hundreds of different screens, monitors and phones. The color of red
may look different on my husband’s old Dell laptop compared to the latest
iPhone. Constantly test your design on multiple screens and sources to help
tweak some of the bigger discrepancies. Fortunately, as technology improves
we will see less and less difference between screen color representation.
HEX
USED FOR WEB DESIGN
Hex codes are standard when creating stylesheets for web
and mobile applications. Being able to produce these Hex
codes for developers and for online use is vital in making
sure your color can be displayed consistently online.
#000000
Hex codes consist of 6 alphanumeric characters that
produce a wide range of colors using a browser. There
are three sets of numbers in a hex code. The first two digits
represent the color Red, the second, Green and the third
Blue. The combination of these colors is the Hex code,
producing a final mixed color. The scale moves from 0 (the
darkest) to F (lightest) so a hex code number of #000000
#FFFFFF
would be black and #FFFFFF would be pure white.

#0071BC
All Modern deisgn software gives you a chance to select a
RGB color and see its comparable Hex Code number.
CMYK All inks placed on a white
paper absorbs light to
show up as black

SUBTRACTIVE COLOR SYSTEM

We covered digital devices but what about printed items? Most professional
printers print using four main ink colors represented by CMYK or (Cyan,
Magenta, Yellow, and K for Black). The K stands for Key and black ink is used to
add a more rich darkness to the other three inks. Without using a pure black
ink you could get brown muddy colors trying to produce black by mixing all of
the remaining three colors.
RGB is an additive color system, meaning we add colors together with light. It
starts off with a darkened black pixel and has light and color added to it. Light
forms colors differently than inks do. With reflected light a pure white piece of paper
reflects the most light and black absorbs the most light. CMYK is a subtractive color
system in that adding all of the colors together produces black and in RGB or additive color
mode we add all of the colors and brightness to form a pure white.

Because the RGB color mode uses light and the additive color system, it can produce the
most colors in the visible spectrum. CYMK only consists of inks and the reflective quality of
light. CMYK has a much more limited color range and this is a big problem in design.
MANUAL
COLOR CORRECTION
To help with this, you can manually select the closest
matching colors to try to maintain the vibrancy. You
will not be able to match it to RGB perfectly but you can
get a little bit closer than what the automatic RGB to CYMK
conversion algorithm can get at times.

One thing we can do is switch into the CMYK color space to see how our colors convert from RGB to
CMYK. This will give us an idea of how it might change in appearance when we get our item printed
compared to how it looks as a social media post. There is one way to increase the possible colors
displayed using printed ink and that is by using what are called Pantone colors.
Pantone Color
Pantones are special color inks that have special formulas that show the
color the same way each time it is printed. So Classic Blue and Living Coral
will look the same each time. In the printing process we use the four
metal ink plates to overlay each color together. When you use a Pantone
color a new metal plate is created for where that particular color we be
used. With each new Pantone color that is used a new metal ink plate is
created.
This also makes Pantone colors a bit expensive to use as it costs
additional money to add each new ink plate. Some companies may save
on costs by producing a large annual report using only one or two of their
branded colors using Pantone inks. With only two ink plates needed for
the entire project it saves money. Pantone colors are not just one solid
color either. You can take this classic blue color and reduce the
percentage of ink coverage to produce many different shades of that
color.

100 percent 80 percent 60 percent 40 percent 20 percent

ink coverage ink coverage ink coverage ink coverage ink coverage