Understanding color and being able to craft an aesthetic
palette is fundamental for of any good designer. Whether you’re
designing for the web, mobile or doing more general branding work, color
plays an integral role in communicating your ideas.
Color theory, in terms of visual communication, is a complex subject,
comprising of an enormous amount of both information and science. With
such a multifaceted subject, searching the web for information can be a
little overwhelming at times, especially as you may find conflicting
ideas, information and theory from various sources.
Which brings us to the essence of this article: The Designer’s Guide
to Color Theory. In this 3-part series, we will be taking an in-depth
study of both the theory and practice of color design.
In Part 1 we will look at the history, theory and principles of
color, including explanations on key vocabulary. Part 2 will focus on
the considerations and logic behind different color choices for
designers. Finally, in Part 3 we will delve into how to create color
palettes for various projects using different techniques.
Hopefully through reading this article you will gain a deeper
understanding of the complex subject of color, while at the same time
improving your design skills and knowledge.
Here is a quick over-view of what we will be looking at:
Part 1
- Understanding Color
- RGB vs CMYK
- RGB
- RGB and Pixels
- CMYK
- CMYK and Digital Displays
- HSL and HSV
- Hue And Saturation
- Pantone Colors
- Color Wheels
Part 2
- Color Considerations
- How Color Effects Your Designs
- Anatomy of Color
- Warm Colors
- Cool Colors
- Neutral Colors
Part 3
- Common Paletteing Techniques
- Using MonoChrome
- Using Contrast
- Using Retro Colors
- Flat Design Colors
- Wrapping It Up
- Essential Tools and Resources
Understanding Color
Color is a complex and often subjective topic. However, a large
amount of confusion is ironically based on science. In order to gain a
better understanding of things, let’s take a brief look at how color
works and its relationship with light.
Color, in any shape or form is in-fact just light. Different
wavelengths of light produce different colors. This narrow band of
visible light is commonly known as the color spectrum. A good way to
remember this is as the acronym
ROYGBIV – (Red, Orange, Yellow, Green, Blue, Indigo, Violet) – see below.
Color Models
Color models are perhaps one of the most commonly misunderstood
facets of color theory. However this shouldn’t be the case, a large
amount of confusion seems to be between the differences and purposes of
the various color models.
A color model is a mathematical based system which describes colors as tuples of numbers, typically as three or four values or
color components (e.g.
RGB and
CMYK).
Often, color models are reproduced as a visual representation, such as a
3D model or colored graph – this merely serves to help better
understand how a given model works in a visual fashion.
Examples of color model illustrations. Left – an RGB based color wheel. Right – a visualized representation of the HSV color space.
The important thing to understand here, is that different color
models produce colors in different ways. This is mainly due to their
purpose.
Ok let’s now take a look at the most commonly used color models and see how they work.
RGB vs CMYK
Before we look at each of these color models independently, it’s
important to understand the differences between the two. There’s a lot
of confusion between RGB and CMYK, however this shouldn’t be the case,
as clarification is really quite simple.
RGB is an additive color model based on light, produced for the
purposes of light-projected colors (e.g. televisions and monitors). CMYK
on the other-hand is a subtractive color model, based on ink or paint,
produced for the purposes of print (e.g. ink and paint). In an additive
based color model (RGB), when all colors are combined equally, white is
produced; However in a subtractive model (CMYK), black would be
produced.
The easiest way of understanding this fundamental difference is, in
RGB, if you had a red, green and blue light turned-on, all in really
close proximity, it would produce white light. On the other-hand, in
CMYK, if you mixed equal parts of cyan, magenta and yellow ink you would
produce black.
So RGB for light, CMYK for ink/paint.
RGB
The RGB color model uses Red, Green and Blue to produce its spectrum.
Each color value consists of a value or amount of each of these three
colors at different strengths. For example to produce pure magenta in
RGB equal amounts of red and blue are combined.
RGB is based on the
Young–Helmholtz theory of trichromatic
color vision and is now used most notably by digital displays to
reproduce visible color. However there is physical reasoning behind the
use of RGB.
RGB and Pixels
As discussed above, the RGB color model is based on light-projected
color. This makes it suitable for use in modern digital displays in the
form of pixels.
Generally speaking, a pixel is built by driving three small and very
close, but still separated RGB light sources. At common viewing
distance, the separate sources are indistinguishable, which tricks the
eye to see a given solid color. Different displays arrange pixels in
different arrangements and densities, however the fundamental theory for
producing color remains the same.
CMYK
As we discussed earlier the CMYK color model is based on physical ink
or paint and is used most notably for digital print production. CMYK
stands for C (cyan), M (magenta), Y (yellow) and K (Black). Colors are
produced by combining different values or amounts of each of these four
colors.
Saturation (strength of color) in CMYK print is produced using a
technique called half-toning: Tiny dots of each primary color are
printed in a pattern small enough that the eye perceives them as a solid
color. For example, Magenta printed with a 20% halftone, produces a
pink color, because the eye perceives the tiny magenta dots on white
paper as lighter and less saturated than the color of pure magenta
ink. To put this in perspective, traditional print uses approximately
1000DPI (Dots Per Inch), compared to Apple’s ‘Retina’ display which
displays around 300PPI (Pixels Per Inch).
Additionally in traditional print production, different colors are
produced by printing the same image, superimposed in layers of each
primary (CMYK), resulting in the desired color.
An example showing the different layers and sizes of half-tone
printing using each layer of CMYK. The final color on the right
shows how the human eye would observe the combined halftone pattern at a
distance (or higher DPI).
CMYK and Digital Displays
Because the CMYK color model is intended for print, reproducing
colors on an RGB color space, like a monitor has some difficulties. RGB
is a device depentant color model – meaning colors will appear
differently depending on the hardware. This is most evident when colors
look slightly different when designing for print on a digital screen,
compared to the actual physical printed result.
HSL and HSV
It’s important to understand that HSL and HSV are actually not color
models at all, but are merely re-arranged visual representations of the
RGB model in an attempt to produce a more intuitive and visually
perceptive color arrangement.
HSL stands for Hue, Saturation and lightness, whereas HSV stands for
Hue, Saturation and Value. Photoshop, along with a number of other
digital-imaging software, often have options for using HSL or HSV as a
color picker. This gives the user a more intuitive way to pick colors,
as a given color is chosen using different hue, saturation and lightness
values, rather than using RGB or CMYK percentages to form colors.
Hue
Hue is basically a fancy word for what I would describe as color or
pigment. In other words, it is the full range of RGB based colors at any
given saturation or lightness value.
Saturation
Another simple, but often confused word, color saturation simply
refers to the intensity of a given color. Because HSV and HSL are based
on the RGB color system, saturation is basically the intensity of the
light. Visually this results in what appears to be the vibrancy of
color. The best way of thinking of this is simply the amount of white in
a color.
Pantone Colors
Pantone is word that gets thrown around a lot in the design
community, often with little understanding of what it actually means.
Pantone Inc. is an American-based company best known for its
Pantone Matching System (
PMS), which has a substantial cult following amongst many artists and designers across a range of industries.
The Pantone Matching system was produced primarily for application in
print, ink, paint, fabric, plastics, textile and stationary. However in
recent times, with the development of graphic design software, PMS has
been made available in a number of digital formats.
PMS is a standardized color palette, with colors given arbitrary
numerical values (such as PMS 140). There are a number of different
Pantone color systems that are intended for different applications, such
as metallic paint and fluorescent colors. As such, many Pantone colors
are beyond the scope of CMYK and RGB reproduction. Having said that,
Pantone have released a number of color libraries for CMYK and RGB
simulation in software.
Color Wheels
We all remember learning how to use the color wheel in primary school
finger-painting class. However, in reality, things are slightly more
complicated than that. Just as there are a number of color models for
different purposes, there are different correlated color wheels.
The basic color wheel serves as a visual aid for both creating and
combining colors. However as noted, there is no one single color wheel.
For the purposes of this article we will focus on 3: the RGB, RYB, and
CMYK wheels.
Although each wheel uses the exact same technique to create colors,
they all abide by the principles of the color model they represent: Thus
comprising of different primary and secondary colors but the exact same
complimentary colors.
Having said that, the RYB color wheel and model is largely obsolete.
Originally it was used for paint in art and design, however it has since
been proven that CMYK can produce a wider and more effective spectrum
of colors.
