About ColourA brief details on colours, Colour models, characteristic of colour usage of

colour in design, etc.

Prepared byNaushad T

About ColourA brief details on colours, Colour models, characteristic of colour usage of

colour in design, etc.

Prepared byNaushad T

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

Content

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.

What is 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?

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.

FACTSFACTS

How do We See 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 colorsPrimary colors

Basic Colors

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

Secondary colorsSecondary colors

Basic Colors

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

Tertiary colorsTertiary colors

Basic Colors

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 colorsAdditive 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 colorsSubtractive 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

Index color: Uses at most 256 colors. a color lookup table (CLUT), which stores and indexes the colors in the image.

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”.

GrayscaleGrayscale

Index color paletteIndex color palette

Color Models

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.

Human eye is wider than the gamut available in any color model.

A. Lab color gamut.B. RGB color gamutC. CYMK color gamut

Color Characteristics

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

Complementary colorsComplementary colors

Color Combinations

Split-Complementary: one hue and two equally spaced from its complement.

Split-Complementary colorsSplit-Complementary colors

Color Combinations

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

Triadic colorsTriadic colors

Color Combinations

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

Analogous colorsAnalogous colors

Color Combinations

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

Warm colorsWarm 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.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 Combinations

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

Color Depth

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 imageOriginal image

100% Dither image100% Dither image

50% Dither image50% 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 textAnti-Aliased text Aliased textAliased text

Anti-AliasedAnti-Aliased AliasedAliased

Web and colors

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 & USA

 China Japan Middle East

Danger, Anger, Stop

Joy, Festive Occasions

Danger, Anger Danger, Evil

Sexual Arousal, Safe, Sour, Go

Youth, Growth

Caution, Cowardice

Grace, Nobility, Childish, Gaiety

Happiness, Prosperity

Purity, Virtue Mourning, Humility

Mourning, Death

Purity, Mourning

Honor, Royalty

Future, Youth, Energy

Fertility, Strength

Masculinity, Calm, Authority

Strength, Power Villainy

Death, Evil Evil Evil Mystery, Evil

Color and Emotions

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

What is Color Good For?

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.

Common Mistakes in Color Usage

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.

Color Blindness

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

FACTSFACTS

Deuteranope (a form of red/green color deficit)

NormalNormal Deuteranope VisionDeuteranope Vision

Color Blindness

Protanope (another form of red/green color deficit)

NormalNormal Protanope VisionProtanope Vision

Color Blindness

Tritanope (a blue/yellow deficit- very rare)

NormalNormal Tritanope VisionTritanope Vision

Color Blindness

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

Guidelines

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.

Color Schemes

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

References