Color wheels
Circular color diagrams—commonly referred to as color wheels—were invented by
Newton and remain a common starting point for creative types wanting to understand the
relationship between colors and also for creating color schemes. On any standard color
wheel, the three primary colors are each placed one-third of the way around the wheel,
with secondary colors equally spaced between them—secondary colors being a mix of two
primary colors. Between secondary and primary colors are tertiary colors, the result of
mixing primary and secondary colors. Some color wheels blend the colors together,
creating a continuous shift from one color to another, while others have rather more
defined blocks of color; however, in all cases, the positioning is the same
Circular color diagrams—commonly referred to as color wheels—were invented by
Newton and remain a common starting point for creative types wanting to understand the
relationship between colors and also for creating color schemes. On any standard color
wheel, the three primary colors are each placed one-third of the way around the wheel,
with secondary colors equally spaced between them—secondary colors being a mix of two
primary colors. Between secondary and primary colors are tertiary colors, the result of
mixing primary and secondary colors. Some color wheels blend the colors together,
creating a continuous shift from one color to another, while others have rather more
defined blocks of color; however, in all cases, the positioning is the same
.
Additive and subtractive color systems
Onscreen colors use what’s referred to as an additive system, which is the color system
used by light—where black is the absence of color, and colored light is added together to
create color mixes. The additive primaries are red, green, and blue (hence the commonly
heard RGB when referring to definition of screen colors). Mix equal amounts of red, green,
and blue light and you end up with white; mix secondaries from the primaries and you end
up with magenta, yellow, and cyan.
In print, a subtractive system is used, similar to that used in the natural world. This works
by absorbing colors before they reach the eye—if an object reflects all light it appears
white, and if it absorbs all light, it appears black. Inks for print are transparent, acting as filters
to enable light to pass through, reflect off the print base (such as paper), and produce
unabsorbed light. Typically, the print process uses cyan, magenta, and yellow as primaries,
along with a key color—black—since equal combination of three print inks tends to produce
a muddy color rather than the black that it should produce in theory.
Although the technology within computers works via an additive system to display colors,
digital-based designers still tend to work with subtractive palettes when working on
designs (using red, yellow, and blue primaries), because that results in natural color combinations
and palettes.
Additive and subtractive color systems
Onscreen colors use what’s referred to as an additive system, which is the color system
used by light—where black is the absence of color, and colored light is added together to
create color mixes. The additive primaries are red, green, and blue (hence the commonly
heard RGB when referring to definition of screen colors). Mix equal amounts of red, green,
and blue light and you end up with white; mix secondaries from the primaries and you end
up with magenta, yellow, and cyan.
In print, a subtractive system is used, similar to that used in the natural world. This works
by absorbing colors before they reach the eye—if an object reflects all light it appears
white, and if it absorbs all light, it appears black. Inks for print are transparent, acting as filters
to enable light to pass through, reflect off the print base (such as paper), and produce
unabsorbed light. Typically, the print process uses cyan, magenta, and yellow as primaries,
along with a key color—black—since equal combination of three print inks tends to produce
a muddy color rather than the black that it should produce in theory.
Although the technology within computers works via an additive system to display colors,
digital-based designers still tend to work with subtractive palettes when working on
designs (using red, yellow, and blue primaries), because that results in natural color combinations
and palettes.
Creating a color scheme using a color wheel
Even if you have a great eye for color and can instinctively create great schemes for websites,
it pays to have a color wheel handy. These days, you don’t have to rely on reproductions
in books or hastily created painted paper wheels. There are now digital color wheels
that enable you to experiment with schemes, including Color Consultant Pro for the
Mac (www.code-line.com/software/colorconsultantpro.html), shown in the following
screenshot, and Color Wheel Pro (www.color-wheel-pro.com) and ColorImpact
(www.tigercolor.com/Default.htm), both for Windows.
Another scheme that offers impact—and one often favored by artists—is the triadic
scheme, which essentially works with primary colors or shifted primaries—that is, colors
equally spaced around the color wheel. The scheme provides plenty of visual contrast and,
when used with care, can result in a balanced, harmonious result.
How colors “feel” also plays a part in how someone reacts to them—for example, people
often talk of “warm” and “cool” colors. Traditionally, cooler colors are said to be passive,
blending into backgrounds, while warmer colors are cheerier and welcoming. However,
complexity is added by color intensity—a strong blue will appear more prominent than a
pale orange. A color’s temperature is also relative, largely defined by what is placed
around it. On its own, green is cool, yet it becomes warm when surrounded by blues and
purples.
Against black and white, a color’s appearance can also vary. Against white, yellow appears
warm, but against black, yellow has an aggressive brilliance. However, blue appears dark
on white, but luminescent on black.
The human condition also adds a further wrench in the works. Many colors have cultural
significance, whether from language (cowardly yellow) or advertising and branding. One
person may consider a color one thing (green equals fresh), and another may have different
ideas entirely (green equals moldy). There’s also the problem of color blindness, which
affects a significant (although primarily male) portion of the population, meaning you
should never rely entirely on color to get a message across. Ultimately, stick to the following
rules, and you’ll likely have some luck when working on color schemes:
Work with a color wheel, and be mindful of how different schemes work.
Use tints and shades of a hue, but generally avoid entirely monochromatic
schemes—inject an adjacent color for added interest.
Create contrast by adding a complementary color.
Keep saturation levels and value levels the same throughout the scheme (a color’s
value increases the closer it is to white).
Keep things simple—using too many colors results in garish schemes.
Don’t rely on color to get a message across—if in doubt about the effects of color
blindness, test your design with a color blindness simulator application such as
Color Oracle (http://colororacle.cartography.ch/).
Go with your gut reaction—feelings play an important part when creating color
schemes. What feels right is often a good starting point.When working on color schemes and creating a palette for a website, there are various
schemes available for you. The simplest is a monochromatic scheme, which involves variations
in the saturation (effectively the intensity or strength) of a single hue. Such schemes
can be soothing—notably when based on green or blue—but also have a tendency to be
bland, unless used with striking design and black and white. A slightly richer scheme can
be created by using colors adjacent on the color wheel—this is referred to as an analogous
scheme, and is also typically considered harmonious and pleasing to the eye.
For more impact, a complementary scheme can be used, which uses colors on opposite
sides of the color wheel (such as red/green, orange/blue, and yellow/purple); this scheme
is often seen in art, such as a pointillist using orange dots in areas of blue to add depth.
Complementary schemes work well due to a subconscious desire for visual harmony—an
equal mix of complementary colors results in a neutral gray. Such effects are apparent in
human color vision: if you look at a solid plane of color, you’ll see its complementary color
when you close your eyes.
A problem with a straight complementary scheme is that overuse of its colors can result in
garish, tense design. A subtler but still attention-grabbing scheme can be created by using
a color and the hues adjacent to the complementary color. This kind of scheme (which
happens to be the one shown in the previous screenshot) is referred to as splitcomplementary.
scheme, which essentially works with primary colors or shifted primaries—that is, colors
equally spaced around the color wheel. The scheme provides plenty of visual contrast and,
when used with care, can result in a balanced, harmonious result.
How colors “feel” also plays a part in how someone reacts to them—for example, people
often talk of “warm” and “cool” colors. Traditionally, cooler colors are said to be passive,
blending into backgrounds, while warmer colors are cheerier and welcoming. However,
complexity is added by color intensity—a strong blue will appear more prominent than a
pale orange. A color’s temperature is also relative, largely defined by what is placed
around it. On its own, green is cool, yet it becomes warm when surrounded by blues and
purples.
Against black and white, a color’s appearance can also vary. Against white, yellow appears
warm, but against black, yellow has an aggressive brilliance. However, blue appears dark
on white, but luminescent on black.
The human condition also adds a further wrench in the works. Many colors have cultural
significance, whether from language (cowardly yellow) or advertising and branding. One
person may consider a color one thing (green equals fresh), and another may have different
ideas entirely (green equals moldy). There’s also the problem of color blindness, which
affects a significant (although primarily male) portion of the population, meaning you
should never rely entirely on color to get a message across. Ultimately, stick to the following
rules, and you’ll likely have some luck when working on color schemes:
Work with a color wheel, and be mindful of how different schemes work.
Use tints and shades of a hue, but generally avoid entirely monochromatic
schemes—inject an adjacent color for added interest.
Create contrast by adding a complementary color.
Keep saturation levels and value levels the same throughout the scheme (a color’s
value increases the closer it is to white).
Keep things simple—using too many colors results in garish schemes.
Don’t rely on color to get a message across—if in doubt about the effects of color
blindness, test your design with a color blindness simulator application such as
Color Oracle (http://colororacle.cartography.ch/).
Go with your gut reaction—feelings play an important part when creating color
schemes. What feels right is often a good starting point.When working on color schemes and creating a palette for a website, there are various
schemes available for you. The simplest is a monochromatic scheme, which involves variations
in the saturation (effectively the intensity or strength) of a single hue. Such schemes
can be soothing—notably when based on green or blue—but also have a tendency to be
bland, unless used with striking design and black and white. A slightly richer scheme can
be created by using colors adjacent on the color wheel—this is referred to as an analogous
scheme, and is also typically considered harmonious and pleasing to the eye.
For more impact, a complementary scheme can be used, which uses colors on opposite
sides of the color wheel (such as red/green, orange/blue, and yellow/purple); this scheme
is often seen in art, such as a pointillist using orange dots in areas of blue to add depth.
Complementary schemes work well due to a subconscious desire for visual harmony—an
equal mix of complementary colors results in a neutral gray. Such effects are apparent in
human color vision: if you look at a solid plane of color, you’ll see its complementary color
when you close your eyes.
A problem with a straight complementary scheme is that overuse of its colors can result in
garish, tense design. A subtler but still attention-grabbing scheme can be created by using
a color and the hues adjacent to the complementary color. This kind of scheme (which
happens to be the one shown in the previous screenshot) is referred to as splitcomplementary.
No comments:
Post a Comment