About Colour
A brief details on colours, Colour models, characteristic of colour usage of
colour in design, etc.
Prepared by
Naushad T

Content
What is Colors?
How do we see colors?
Basic Colors
Color Models
Color Characteristics
Color Combinations
Color Depth
Web & Color
Color and Emotions
What is Color Good For?
Common Mistakes in Color Usage
Color Blindness
References

What is Colors?
 How humans perceive color depends on the interplay of three elements: the
nature of light, the reflective properties of an object, and the ways in which
our retina and visual cortex process light waves
 Pure white light, such as sunlight, is composed of the visible colors. Sir
Isaac Newton discovered this in 1666 by passing a beam of light through a
prism.

What is colors?
 Newton observed that color is not inherent in objects. Rather, the
surface of an object reflects some colors and absorbs all the others. We
perceive only the reflected colors.
When light waves strike an object in nature, the object can transmit, absorb, or reflect
various individual light waves. Depending on the nature of the object and its atomic
structure.

How do We See Colors?
 The human eye and brain together translate light into color. Light receptors
within the eye transmit messages to the brain, which produces the familiar
of color.
 Retina is covered by millions of light-sensitive cells, some shaped like rods
and some like cones.

How do we see colors?
 Cones are concentrated in the middle of the retina, Six million cones in
each eye give the brain enough information to interpret colors.
 Three types of cone, each sensitive to a different wavelength-this allows color
vision
 The actual wavelength that the cone are most sensitive to are 560nm, 530nm,
430nm, commonly labelled "red" "green" "blue" respectively (better labeling
would be “short”, “medium”, and “long” wavelengths).
 Rods transmit mostly black and white information to the brain There are
over 120 million of them in each eye.
 Rods are very sensitive to light, and allow us to see under very low level of
illumination.
 They give us our night vision, in the shades of white, gray and black.
 Human eye can distinguish over 10millon different colors.

How do we see colors?
FACTS
 Birds, fish and many other mammals perceive the full spectrum.
 Bees, can see ultraviolet colors which is invisible to the human eye.
 It was thought that dogs didn't see any color at all. Recent studies now
show, however, that dogs can differentiate between red and blue
 Infants are able to distinguish hues after several weeks.

Basic Colors
 Primary (Red, Green, Blue) colors, colors at their basic essence; those
colors that cannot be created by mixing others.
Primary colors theoretically cannot be
mixed from any other colors.
Primary colors

Basic Colors
 Secondary colors combining any two adjacent primary colors. These will
be our secondary colors
Secondary colors

Basic Colors
 Tertiary Colors are middle colors between the primary and secondary
colors in color wheel.
Tertiary colors

Color Models
 RGB and its subset CMY form the most basic and well-known color model.
 Red, green and blue are the additive primary colors of the color spectrum.
Combining balanced amounts of red, green and blue lights also produces pure
white.
Additive primary colors

Color Models
 By mixing together various amounts of red, green and blue light, you can
make almost any color.
 The most common examples of this are television screens and computer
monitors.

Color models
 Cyan, magenta and yellow are the three subtractive primaries. When you
mix all three together in equal amounts, you get a near black
Subtractive colors

Color Models.
 Many computer printers and traditional "four-color" printing presses use
the CMYK model.

Color Models
 HSB/HLS, Lab, Index color, Grayscale are some of other color modes.
 HSB: Based on the human perception of color, the HSB model describes three
fundamental characteristics of color: Hue, Saturation, Brightness.
 LAB: Lightness component (L) can range from 0 to 100. The “a” component
(green-red axis) and the “b” component (blue-yellow axis) can range from +120
to –120

Color Models
 Grayscale: Uses up to 256 shades of gray. Every pixel of a grayscale
image has a brightness value ranging from 0 (black) to 255 (white).
Grayscale also called “Achromatic Colors”.
Grayscale
 Index color: Uses at most 256 colors. a color lookup table (CLUT), which
stores and indexes the colors in the image.
Index color palette

Color Characteristics
 Color consists of three properties: hue (red, green, etc), brightness/value
(light-dark) and saturation/chroma (vivid, pale, etc.)
 Saturation indicates the degree to which the hue differs from a neutral gray.

Color characteristics
 Lightness indicates the level of illumination. (Brightness) The values run as
percentages; 0% appears black (no light) while 100% is full illumination.(white).
 Shade and tint are terms that refer to a variation of a hue.
 Shade: A hue produced by the addition of black.
 Tint: A hue produced by the addition of white.

Color Characteristics
 Gamut is the range of colors that a color system can display or print.
A. Lab color gamut.
B. RGB color gamut
C. CYMK color gamut
 Human eye is wider than the gamut available in any color model.

Color Combinations
 Complementary: those colors across from each other on a color
wheel. A complementary palette gives maximum contrast.
Complementary colors

Color Combinations
 Split-Complementary: one hue and two equally spaced from its complement.
Split-Complementary colors

Color Combinations
 Triadic colors: Colors that form an equilateral triangle within the color wheel.
Triadic colors

Color Combinations
 Analogous colors are any colors directly beside a given color on the color
wheel.
Analogous colors

Color Combinations
 Warm colors are made up of the red hues, such as red, orange, yellow.
Warm colors

Color Combinations
 Cool colors came from blue hues, such as blue, cyan, and green
 Monochromatic (one color): Using tints, tones and shades of a single hue.

Color Combinations
 Placing small areas of light color on a dark background, or a small area of
dark on a light background will create an accent (stress).
 Color can add dimension to a design. Dimension can create when two are
more colors create contrast. Thereby forcing one color foreground and
another to appear in the middle and another to pushed back in space.

Color Combinations
 Hue induction (chromatic induction, color induction) refers to the change of
hue when colors are perceived in the context of other colors.
Depending of the color of the surrounding square the central neutral (gray)
square gets a slight tint in the direction of the complementary color.

Color Combinations
 Colors look lighter or darker with respect to the background color. The
change in appearance of a central area is caused by the presence of a
neighboring area.
 Color assimilation: The yellow under the red stripes appears warmer than the
same yellow under the blue stripes due to color assimilation.

Color Combinations
 Simultaneous contrast(Black and white) lets the central gray square look
differently, depending on the surrounding gray level, although all the
central squares are composed of the same gray.
 The gray under the white stripes appears lighter than the same gray under the
black stripes due to brightness assimilation.

Color Depth
 Color depth(Bit depth), determines the number of colors used to display (or
print) an image. (the number of bits of color information per pixel).
 Bit has two possible states: it can be on or off. One bit produces two possible
colors.
 A basic color monitor has 8-bit pixels and is capable of displaying 256 colors.
 RGB, grayscale, and CMYK images contain 8 bits of data per color channel.
With three channels in an RGB image, this translates to a 24-bit RGB bit depth
(8 bits x 3 channels)

Color Depth
 Here's a breakdown of bit depth and color depth. Color depth is sometimes
called color resolution
Bit Depth Color Resolution Calculation
1 bit 2 colors 21 (2)
2 bit 4 colors 22 (2x2)
3 bit 8 colors 23 (2x2X2)
4 bit 16 colors 24 (2X2X2X2)
5 bit 32 colors 25 (2X2X2X2X2)
6 bit 64 colors 26 (2X2X2X2X2X2)
7 bit 128 colors 27 (2X2X2X2X2X2X2)
8 bit 256 colors 28 (2X2X2X2X2X2X2X2)
16 bit 65,536 colors 216
32 bit 16,777,21 colors 232

Web and colors
 In General GIF(graphics Interchange Format) and JEPG(Joint Photographic
Expert Group) file format are using for web graphics.
 The JPEG format supports 24-bit color(16.7 million colors).
 The JPEG compression scheme is “Lossy” compression scheme, because of
Some loss of image quality.
 JPEG is ideal for images that are photographic, organic in nature, and
continuous in tone.
 Any JPEG file can be saved as a Progressive JPEG. This is very similar to the
interlaced GIF.
 The JPEG format should be used on photographic images, and images which
do not look as good with only 256 colors.

Web and Colors
 GIF files support only 8-bit, or 256 colors.
 GIF files support exact (Adaptive)palette.If your image contain fewer
than 256 colors, it is the best choice for producing GIFs and it
containg smallest number of colors possible.
 GIF files use LZW compression which is referred to as “lossless”
 GIF files support transparency, and interlacing. GIFs can also be
animated.
 Transparency allows a graphic designer to designate the background of the
image transparent.
 The interlacing feature in a GIF file creates the illusion of faster loading
graphics

Web and Colors
 Dithering a process(in GIF) of placing different-colored pixels next to one
another to create the illusion of additional colors.
Original image
100% Dither image
50% Dither image

Web and colors
 Anti-Aliasing a process that filters or softens the hard stair-stepped edge (and
thus removes the jaggies) in bitmapped images by creating a series of gradually
blending pixels.
Anti-Aliased text Aliased text
Anti-Aliased Aliased

Color and Emotions
 Color can also be used to convey specific meaning such as warning
(red), caution (yellow), safety (green), etc.
 Here's a quick rundown of individual colors and the moods they support.
PINK-soothes, promotes affection.
YELLOW cheers, increases energy, expands the size of a room.
ORANGE-cheers, stimulates appetite and conversation.
RED-empowering
GREEN-balances, refreshes.
BLACK-authoritative, shows discipline, encourages independence.

Color and Emotions
 Colors have different associations in different cultures.
Western Europe China Japan Middle East
& USA
Danger, Anger, Joy, Festive Danger, Anger Danger, Evil
Stop Occasions
Sexual Arousal, Youth, Growth Future, Youth, Fertility,
Safe, Sour, Go Energy Strength
Caution, Honor, Royalty Grace, Nobility, Happiness,
Cowardice Childish, Gaiety Prosperity
Purity, Virtue Mourning, Mourning, Purity,
Humility Death Mourning
Masculinity, Strength, Power Villainy
Calm, Authority
Death, Evil Evil Evil Mystery, Evil

What is color good for?
 Conveying emotion and meaning.
 Changing perception of space
 Changing apparent size
 Showing similarities and differences
 Linking spatially separated objects together
 Attracting attention
 Creating emphasis
 Smoothing to improve image quality
 Creating aesthetic and emotional appeal

Common Mistakes in Color Usage
 Using insufficient brightness contrast.
 Paying attention only to aesthetics
 Using color for colors sake without a specific plan or color scheme.
 Assigning different colors to the same type or the same color to different
types.
 Creating large fields of saturated color.
 Using too many colors.

Color Blindness
 People with normal color vision are called "trichromats". The trichromatic
eye has three cone types.
 Color blindness comes as a result of a lack of one or more of the types of
color receptors, more correctly called color deficiencies.
 About 10% of males have a color perception defect. but this is rare in
females (1% in 200).
 There are many different types and degrees of colorblindness.
FACTS
 Many color blind people cannot tell whether a woman is wearing lipstick or
not.
 Many can not tell the difference between green and ripe tomatoes or
between ketchup and chocolate syrup

Color Blindness
 Deuteranope (a form of red/green color deficit)
Normal Deuteranope Vision

Color Blindness
 Protanope (another form of red/green color deficit)
Normal Protanope Vision

Color Blindness
 Tritanope (a blue/yellow deficit- very rare)
Normal Tritanope Vision

Guidelines
 DON'T give instructions which refer to objects by Color.
 DO provide labels next to any Colored indicators.
 DON'T use [red | green | brown | grey | purple] [next to | on top of / changing
to] [red | green | brown | grey | purple].
 DO provide Alternatively text for all your images

Color Schemes
 Planning a successful color combination begins with the investigation, and
understanding, of color relationships. Using a color wheel and a template,
the relationships between colors are easy to identify
 The basic tool for combining colors, is the color wheel. It is designed so that
virtually any colors you pick from it, will look good together.

References
 http://www.colormatters.com/entercolormatters.html
 http://veerle.duoh.com/blog/comments/choosing_color_combinations/
 http://www.ficml.org/jemimap/style/color/wheel.html
 http://meyerweb.com/eric/tools/color-blend/
 http://www.colortoy.net/
 http://www.vischeck.com/vischeck/vischeckImage.php
 http://www.apple.com/pro/color/
 http://juicystudio.com/services/luminositycontrastratio.php
 http://www.worqx.com/color/index.htm
 http://www.webexhibits.org/causesofcolor/index.html