Computer graphics color models

1
COMPUTER GRAPHICS: COLOR
MODELS
By
Prof A. Balasubramanian
(Former Director- Educational Multimedia
Research Centre)
Centre for Advanced Studies in Earth Science,
University of Mysore, Mysore

2
Introduction:
Computer graphics is an emerging field of
professional work. The topic of discussion under
computer graphics is the use of colors and color
models.
All of you may be aware that Computer graphics
attracts people while watching the
TV programmes, movies, advertisements,
internet, working with Computer games,
Simulation, Medical imaging, Cartography,
Engineering Design, Architecture and in so many
fields.

3
The credit fully goes to efficient use of colors and
colored objects in all these applications.
In a traffic circle, when we see the red light, we
stop our vehicles. Throughout the world, the
color code used in traffic lights and their
meanings are well known to people. Similarly,
Black badges are used to denote sorrow, red is
used for danger, white is used for peace and green
is used for prospect. Every color is used as an
indicator also.

4
Color is an important part of the visual media. It
has the power to give new and new experiences in
visual communication.
In this episode, the following aspects are
discussed:
1. Basics of Color
2. Kinds of Color models
3. Effective Use of Color
4. Color Management
5. Color Design Tools.

5
1. BASICS OF COLOR
Whenever we see a rainbow, we realize the role of
the color spectrum and the concept of VIBGYOR.
Our understanding leads to the sets of primary
colours which we see in a prism dispersing the
spectrum of colors.
Many sets of primary colour exist.
They all come under two major categories as
additive and subtractive colors.

6
The colors like red, green, and blue when
projected together as beams in computer
monitors or television screens, will mix and
overlap to produce the other colours.
Hence they are called as additive primary colors.
This leads to four additive colors and hence, the
total number of colors obtained are 7.

7
The Additive Primaries
The colors like cyan, magenta, and yellow are
used to create colour separations for photography
and printing. These do not have additive effects
but subtractive effects.
In subtractive colour mixing, pigments such as ink
or paint absorb or subtract all the colours of the
spectrum except the colour that the pigment
reflects to the eye.

8
Hence they are called as subtractive primaries.
Here also we get 7 colors in toto.
The Subtractive Primaries
These additive and subtractive primary colour sets
form the basis of all colour models.

9
The color wheel:
In the arts of painting, graphic design, and
photography, color theory is a body of practical
guidance to color mixing and the visual impact of
specific color combinations.
Understanding of the color schemes becomes
very simple by looking into a color wheel.

10
A color wheel (also referred to as a color circle) is
a visual representation of colors arranged
according to their chromatic relationship.
Begin a color wheel by positioning primary hues
equidistant from one another, then create a bridge
between primaries using secondary and tertiary
colors.
The color wheel can be divided into ranges that
are visually active or passive.
Active colors will appear to advance when placed
against passive hues.

11
Passive colors appear to recede when positioned
against active hues.
One can use the color wheel to predict how a
change in one color component affects other
colors and also how changes translate between
RGB and CMYK color models.
The Hue/Saturation options allow to adjust the
hue, saturation, and lightness of an image or of
individual color components in an image.
Adjusting the hue, or color, represents a move
around the color wheel.

12
Adjusting the saturation, or purity of the color,
represents a move across its radius.
The next aspect is the use of color Gamut.
A gamut is the range of colors that a color system
can display or print.
The spectrum of colors seen by the human eye is
wider than the gamut available in any color
model.

13
2. KINDS OF COLOR MODELS:
Colour models, colour spaces, or colour order
systems, are methods of organizing the set of
possible human colour perceptions in a systematic
way. With these methods, colours or their
attributes are expressed numerically.
A colour space is a 3-D geometric representation
of the colours that can be produced using a certain
colour model.

14
Colour models can be divided into two main
categories:
a) perceptually-based color model and
b) display-based (device-dependent) color
model.
Perceptually-based models includes two sets as
HSB or HLS model. The abbreviation HSB
means hue, saturation and brightness). The
abbreviation HLS means hue, lightness and
saturation.

15
They are organized in a way similar to how
humans perceive colour in everyday experience.
Hue is the name of the colour, e.g., orange or
green.
Saturation or chroma, is the relative purity of the
colour on a scale from grey to its most vibrant
tone.

16
Brightness or lightness refers to the amount of
light energy used to create the colour.
In computer, drawing or painting applications
use HSB and HLS tools in the form of
percentages.
The Device-dependent models are display-based
models.
It includes the RGB model which denotes the
use of red, green and blue colors.

17
These are used to create millions of colours on a
computer monitor or a television screen by
combining different values of red, green, and
blue.
RGB is an example of a device-dependent colour
model. In computers, the appearance of colour
depends on the settings of the display device.
Each device, whether it is a computer monitor or a
television screen, emits a slightly different shade
and intensity of red, green and blue light.

18
In the RGB system, each colour component of a
pixel (picture element) is measured by a number
ranging from 0 to 255, for a total of 256 (as "0" is
a valid number).
The RGB model is used in scanners and in colour
photography.
However, this model does not work well in the
printing process.
The next model is the CMY model.
It refers to cyan, magenta and yellow colors.

19
This model is a subtractive colour model that
complements the RGB additive model.
CMY model is used in printing. It is possible to
separate these colors very easily.
But the only problem in this model is the
reproduction of pure black colour.
It needs black to be used exclusively.
Therefore, black must be added to the separations,
resulting in the CMYK colour model, where “K”
refers to black.

20
The letter “K” is used instead of the letter “B” to
represent black to avoid confusion with the colour
blue.
Also, “K” may also refer to “key”, as black often
forms the keyline to which other colours are
registered.
Hence, the CMYK model forms the basis for all
printing process.
Also used in printing are spot colours which are
custom, premixed inks of a particular colour, for
special requirements.

21
The CMYK Model .
3. EFFECTIVE USE OF COLOUR:
It is also necessary to establish meanings for
colours in the graphic works.
There is an order to use the colour.

22
When viewing these colours, red tends to focus in
the foreground, yellow and green focus in the
middle, and blue focuses in the background.
Consequently, if you really want to emphasize a
feature use the colour red. Blue is good for
backgrounds.
There is a language to colour, based on the culture
and experience of people.
Colours can be very symbolic. This fact should be
kept in mind when designing Web graphics.

23
Some obvious examples of this are: the colour red
implies importance or danger; yellow refers to
caution; in mapping, green often represents
vegetation.
In North America black is a funeral colour
whereas, in India white is the funeral colour.
Colour has physical and emotional effects on the
viewer.
For example, red is exciting, green restful, and
blue is cheerful.

24
Avoid the simultaneous display of highly
saturated or pure colours.
Using the wrong combination of colours for
backgrounds and foregrounds can create effects
that can cause eye strain.
If several highly saturated or pure colours are
used in combination, the human eye must
constantly refocus which will cause the eye-
fatigue.
Yellow color causes the greatest fatigue, while
blue color produces the least.

25
Avoid using blue colour for small text, thin lines,
and small shapes.
The edges of these objects will tend to blur and
blend into a white background.
The choice of surrounding colours can have
significant impact on the perception of an
individual colour. A light colour next to a dark
one will cause the lighter colour to appear lighter
than it actually is, while the darker colour will
appear darker.

26
While choosing a colour sequence or a legend in a
map, it is necessary to keep it very simple.
Limit the number of colours to seven, plus or
minus two. The reason being the optimum number
for short term memory. If there are too colours
used in the graphic, the viewer will not develop an
effective mental model of the data inter-
relationships.

27
Colour Palettes and Progressions:
Use of Colour palettes is often helpful in deciding
what color to be used in which place of drawings
and images.
A number of palette types are available for
converting an image to indexed color. They
possess Perceptual, Selective, and Adaptive
options. They help in color management.

28
Hardware and Software Basics:
Four components work together to create the
colours in computers.
a) computer hardware platform,
b) video card,
c) monitor, and the
d) software or web browser.
The hardware components and their settings
determine the accuracy of colour display.

29
A monitor’s gamma setting is an important factor
in Web graphics. Gamma is a measurement that
describes the relationship between the computer
monitor’s voltage input and the brightness of a
displayed image.
The gamma setting will primarily affect the
degree of contrast between mid-level grey values
of an image. If gamma is left uncorrected the
design of colour images and how they look to the
Web audience will be totally unpredictable.

30
Therefore, graphic design on a PC should be done
inside an application that contains a gamma
control panel. Within the application environment,
a local gamma of 2.2 can be set for a better
output.
While developing a computer graphics
application, it is essential to test the monitor's
gamma setting:
If any of the first three rectangles looks almost
black, the computer colour is not accurate.

31
It is necessary to change the monitor's gamma
setting.
With the corrected gamma setting, the
first colour is a deep rich green,
the second is a burgundy, and
the third is a medium dark blue.
The fourth rectangle should display as a pastel
blue-green.
If this last rectangle looks very pale, almost white,
your gamma needs correction.

32
In this greyscale test, one should be able to
distinguish each of the nine different shades of
grey.
If the greys blend together, then the monitor
gamma or brightness needs adjustment.
Any Internet browser allows the user to read
hypertext and hypermedia graphics simply.
In the design of Web graphics, it is important to
understand how browsers display the colours.
Ideally, all computers would have 24-bit
Truecolour display capability.

33
If this were the case, Web browsers could display
GIF or JPEG images looking very similar to their
original design. This would be true even if the
originals were designed using custom colour
palettes containing any of the 16.7 million
possible colours.
In other words, a Web browser running on a 24-
bit colour depth computer system can correctly
display all 16.7 million possible colours.

34
However, most Web users have computer systems
with 8-bit colour depth and therefore, can only
display a total of 256 different colours on their
monitors.
The 256 Colour Palette will look like this.
What happens when a Web browser running on a
computer system with 8-bit (256 colour) video
resolution encounters an inline GIF or JPEG
image containing more than 256 colours?

35
The browser solves this problem by using its own
CLUT (colour look-up table) and the 256 colour
palette of the computer’s operating system.
The browser forces, or re-maps, the range of
colours in the adaptive palette of the image to
conform to one of the colours in the system
palette.
The browser does this either by matching to the
nearest colour or by dithering.

36
Dithering distorts images on the Web and should
be avoided.
To avoid dithering, colours used in the design of
Web graphics should conform to the browser-safe
216 colour palette that incorporates the colours
common to both major computer platforms.
While designing Web graphics, one should follow
these aspects:
It is said that on the World Wide Web that all
computers are colour blind.

37
The Web distributes images to many different
types of computers and monitors, an image that
looks good on one system may appear completely
different on another computer.
This is due to several reasons.
The following suggestions may help to minimize
cross-platform differences.
1. Before creating any Web graphics, the
monitor settings are to be checked. Adjust the
brightness and intensity controls on the
monitor, and set the gamma setting of 2.2.

38
2. While designing web graphics, try to use the
216 colour browser-safe palette for colour
selection. This will maximize the chances of
having
Web graphics look the same on different
computer platforms and monitors. This will
also avoid unwanted dithering in the images.
Dithering can reduce the quality and legibility
of an image.

39
3. The computer’s colour depth is to be set for
either 256 (8-bit), or millions of colours (24-
bit) and not thousands of colours (16-bit).
Graphics created on a 16-bit system when
viewed in a 256 colour environment will be
dithered.
4. Always try to keep the image file size small.
The physical size of an image on the screen
does not have anything to do with the
download speed.

40
It has more to do with how efficiently an image
file has been compressed.
5. Always try to keep the image resolution low,
to about 72 PPI. Web browsers will display the
graphics at 72 PPI, consequently, there is no
advantage to designing, creating, or scanning a
graphic at a higher resolution. This will only
increase the file size.
6. Use the GIF graphic file format for maps,
diagrams, and any graphic that contains text.
Similarly, Use JPEG format for complex
graphics and photographic images without text.

41
7. Try to use HTML height and width tags with
the graphics. This will tell the browser as how
much page space is to be allocated for the
graphic.
8. It is necessary to use anti-aliasing. Aliasing
is the undesirable effect produced when a
graphics is displayed on a monitor at a low
resolution.
Straight lines when drawn on a computer
screen horizontally, vertically, or at 45 degrees

42
pose no problem. But, at any other angle, these
lines appear jagged or like stair-case-steps.
These are some of the examples.
Un-anti-aliased Graphics
Anti-aliased Graphics
Some good Computer programs can
effectively handle the anti-aliasing option
automatically to graphics and create the
illusion of smoothness. This process adds some
more pixels of an intermediate tone and colour
to fill in the steps along the edge or line.

43
5. COLOUR DESIGN TOOLS
A color mode determines the color model used to
display and print images.
Some of the popular software tools, like
Photoshop, bases their color modes on established
models for describing and reproducing color.
Common models include HSB (hue, saturation,
brightness); RGB (red, green, blue); and CMYK
(cyan, magenta, yellow, black).

44
It is also possible to include some specialized
color modes such as Indexed Color mode and
Duotone.
Duotone mode creates an image in duotone ie.
two-color , tritone ie. three-color, and quadtone
using four-color grayscale images using two to
four custom inks.
While designing, the software tools will also
display an information about color adjustment
through a dialog box which can indicate the color
palettes used.

45
It is called as an Info palette.
It displays two sets of color values for the pixels
under the pointer. The value in the left column is
the original color value.
The value in the right column is the color value
after the adjustment is made.
Sampling of colors can be attempted using
eyedropper tools.
One can view the color of a single location using
the eyedropper tool, or one can use up to four
color samplers to display the color information for
one or more locations in an image as shown here.

46
These samplers are saved in the image.
Color samplers and Info palette.
Use the color mode carefully:
Even though one can perform all color and tonal
corrections in either CMYK or RGB mode, it is
necessary to choose only one mode carefully.

47
Whenever possible, avoid multiple conversions
between modes, because color values are rounded
and lost with each conversion.
If an RGB image is to be used on-screen, you
needn't convert it to CMYK mode. Conversely, if
a CMYK scan is to be separated and printed, you
needn't perform corrections in RGB mode.
If an image is converted from one mode to
another, it makes sense to perform most of the
tonal and color corrections in RGB mode and use
CMYK mode for fine-tuning.

48
The advantages of working in RGB mode include
the following:
a) One can save memory and improve
performance because of working with fewer
channels.
b) One can have more device independence.
This is because of the fact that RGB color
spaces are not dependent on inks.
Corrections made to the image are preserved
regardless of the monitor, computer, or output
device used.

49
c) The gamut of RGB spaces is much larger
than that of CMYK spaces, so more colors are
likely to be preserved after adjustments.
It is also possible to check the tonal ranges and
color balance of an image using graphic tools.
They help in correcting the tonal range and color
balance of an image by adjusting the intensity
levels of the image's shadows, midtones, and
highlights.

50
The Levels histogram is generated to serve as a
visual guide for adjusting the image's key tones.
It is also possible to making color adjustments in
compute graphics.
There are two ways to adjust the colors in an
image.
The first method is permanently altering the
pixels in the active layer.

51
The second method is to use an adjustment layer,
temporariliy and work with it. Adjustment layers
let you experiment with color and tonal
adjustments without permanently modifying the
pixels in the image.
The color and tonal changes reside within the
adjustment layer, which acts as a buffer through
which the underlying image layers appear.
When identifying the lightest and darkest areas of
an image, it's important to identify representative
highlights and shadows.

52
A color management system (CMS) compares the
color space in which a color was created to the
color space in which the same color will be
output, and makes the necessary adjustments to
represent the color among different devices.
Color management differs from color adjustment
or color correction in image processing.
There are several ways to use color profiles in
computer graphics.

Computer graphics color models

More Related Content

What's hot

Viewers also liked

Similar to Computer graphics color models

More from Prof. A.Balasubramanian

Recently uploaded

In this document

Computer graphics color models