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.
0 comments:
Post a Comment