1. Color Theory and 2D Graphics Theory ST Nandasara/ADMTC
July 21, 2019
Color Theory
ST Nandasara/ADMTC
by S T Nandasara

2. Color Theory and 2D Graphics Theory
July 21, 2019
Contents
Color Theory
2D Bitmap Image Theory
2D Bitmap Image Processing
2D Vector Image Theory
by S T Nandasara

3. Color Theory and 2D Graphics Theory How to manipulate color digitally?
July 21, 2019
Color Theory
How to manipulate color digitally?
by S T Nandasara

4. Color Theory and 2D Graphics Theory
July 21, 2019
What is color?
Color = Mixture of various frequency of light
Perceptive colors for human eyes = around 400nm ~ 700nm (wavelength)
The number of colors in real world = Infinite
But human eyes cannot distinguish every color
A color =
400
500
600
700
by S T Nandasara

5. Color Theory and 2D Graphics Theory
July 21, 2019
Visible spectrum
Progressive Rainbow
"visible" light can be broken down into a spectrum that ranges from blue to red in a progressive rainbow
The visible spectrum of light
Continuous optical spectrum (designed for monitors with gamma 1.5).
by S T Nandasara

6. Wheel of Color – Visible spectrum
Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color – Visible spectrum
Progressive Rainbow
Beam of sunlight
A Prism separates the beam of light
The visible spectrum of light
Infra red
Ultra violet
Red Orange Yellow Green Blue Indigo Violet
by S T Nandasara

7. Color Theory and 2D Graphics Theory
July 21, 2019
Visible spectrum
Progressive Rainbow
nm is the most common unit to describe the wavelength of light, with visible light falling in the region of 400–700 nm. The data in compact discs is stored as indentations (known as pits) that are approximately 100 nm deep by 500 nm wide. Reading an optical disk requires a laser with a wavelength 4 times the pit depth -- a CD requires a 780 nm wavelength (near infrared) laser, while the shallower pits of a DVD requires a shorter 650 nm wavelength (red) laser, and the even shallower pits of a Blu-ray Disc require a shorter 405 nm wavelength (blue) laser.
by S T Nandasara

8. Color Theory and 2D Graphics Theory
July 21, 2019
Color in the eye
Progressive Rainbow
The ability of the human eye to distinguish colors is based upon the varying sensitivity of different cells in the retina to light of different wavelengths. The retina contains three types of color receptor cells, or cones. One type, relatively distinct from the other two, is most responsive to light that we perceive as violet, with wavelengths around 420 nm. (Cones of this type are sometimes called short-wavelength cones, S cones, blue cones.) The other two types are closely related genetically and chemically. One of them (sometimes called long-wavelength cones, L cones, red cones) is most sensitive to light we perceive as yellowish-green, with wavelengths around 564 nm; the other type (sometimes called middle-wavelength cones, M cones, green cones) is most sensitive to light perceived as green, with wavelengths around 534 nm.
by S T Nandasara

9. Color Theory and 2D Graphics Theory
July 21, 2019
Visible spectrum
This image contains
1 million pixels, each
of a different color.
The human eye can
distinguish
about 10 million
different colors.
by S T Nandasara

10. Color Theory and 2D Graphics Theory
July 21, 2019
Color Model
Math model for color information
RGB
Red, Green, Blue
CMY / CMYK
Cyan, Magenta, Yellow, blacK (or Key)
HSL / HSB / HSV / HVC
Hue , Saturation , Lightness (Brightness/Value)
YUV / YCbCr (YCC)
Luminance + 2 Chrominance (Color differences)
Other color models
Other color models: Lab
by S T Nandasara

11. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
The Color Wheel
A color wheel usually include 12 distinct colors. The color wheel is essentially the linear progression of color as seen in the color spectrum, connecting the two ends together.
by S T Nandasara

12. Wheel of Color (RGB Color Model)
Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color (RGB Color Model)
The Primary Colors (Additive colors)
Most of us now use color display, for which the primary colors will be Red, Green and Blue.
by S T Nandasara

13. Wheel of Color (RGB Color Model)
Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color (RGB Color Model)
The Primary Colors (Additive colors)
Most of us now use color display, for which the primary colors will be Red, Green and Blue.
Red
Green
Blue W Y C M
by S T Nandasara

14. Color Theory and 2D Graphics Theory
July 21, 2019
RGB Color Model
Red
Blue
Green
Cubic coordinate based on primary additive colors
Start from Black (darkness)
Sum of all = White (light)
Widely used in PC hardware
CRT, LCD / Image Scanner
Easy to implement
Not efficient/intuitive for processing
Difficult to achieve / adjust to desired color for human
Additive Color (= mixing light)
RGB: Subtractive Color / CMYK: Additive Color
HSL: Also called as HSV (Hue, Saturation, Value)
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink B
White
Black G R
by S T Nandasara

15. Wheel of Color (CMY Color Model)
Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color (CMY Color Model)
The Secondary Colors (Subtractive Colors)
Secondary color wheel: the three colors that are obtained by combining any two adjacent primary colors. These will be the secondary colors: cyan, magenta, and yellow.
by S T Nandasara

16. Wheel of Color (CMY Color Model)
Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color (CMY Color Model)
The Secondary Colors (Subtractive Colors)
Secondary color wheel: the three colors that are obtained by combining any two adjacent primary colors. These will be the secondary colors: cyan, magenta, and yellow.
Magenta
Yellow
Cyan R B G
by S T Nandasara

17. Color Theory and 2D Graphics Theory
July 21, 2019
CMY / CMYK Color Model
Cyan
Yellow
Subtractive version of RGB
Start from White (paper)
Sum of all = Black (ink)
Widely used in Publishing Industry
Printer / Color publishing uses 4 inks (CMYK)
Why K (Black) ?
For pure black / black letter
Magenta
Subtractive Color (= mixing ink) C M
White
Black Y
by S T Nandasara

18. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
The Tertiary Colors
Tertiary colors are the same for both the additive and subtractive worlds.
by S T Nandasara

19. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
Analogous Colors
Analogous colors directly beside a given color. If you start with Orange and you want its two analogous colors, select Red and Yellow.
by S T Nandasara

20. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
The Complementary Colors
Complementary colors are directly opposite each other on the color wheel. Selecting contrasting colors is useful when you want to make the colors stand out more vibrantly.
by S T Nandasara

21. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
Split Complementary Colors
Split complementary colors can be made up of two or three colors. You select a color, find its complementary color or colors on the either side of the color wheel.
by S T Nandasara

22. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
Warm Colors
Warm colors are made up of the Red hues, such as Red, Orange and Yellow. They lend a sense of warmth, comfort, and energy to the color selection. They also produce visual result.
by S T Nandasara

23. Color Theory and 2D Graphics Theory
July 21, 2019
Wheel of Color
Cool Colors
Cool colors come from the Blue hues, such as Blue, Cyan, and Green. These colors will stabilize and cool the color scheme. These are good to use for page background.
by S T Nandasara

24. Dimension of Color (HSL/HSV/HVC)
Color Theory and 2D Graphics Theory
July 21, 2019
Dimension of Color (HSL/HSV/HVC)
Hue = Color name (red, blue, green, etc.)
Saturation = Density (purity) of the color
Value = Lightness & Darkness
RGB: Subtractive Color / CMYK: Additive Color
HSL: Also called as HSV (Hue, Saturation, Value)
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
by S T Nandasara

25. HSL / HSV / HVC Color Model
Color Theory and 2D Graphics Theory
July 21, 2019
HSL / HSV / HVC Color Model
Cylindrical coordinates based on logical aspect of color
Hue = Color name (red, blue, green, etc.)
Saturation = Density (purity) of the color
Lightness
Used in image editing software
Very easy to achieve / adjust to desired color for human
RGB: Subtractive Color / CMYK: Additive Color
HSL: Also called as HSV (Hue, Saturation, Value)
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
White
Black
by S T Nandasara

26. Color Theory and 2D Graphics Theory
July 21, 2019
Color Matching
Color Gamut
The range of color that can be reproduced on any imaging device
Color Matching
Adjustment / Compensation of the difference of color gamut among multiple image devices
Eye
CRT
Scanner
Printer
Offset
by S T Nandasara

27. Color Theory and 2D Graphics Theory
July 21, 2019
Color Depth
How many colors are needed?
Black & White
= 1 bit 1
RGB: Full Color = 8 bit for each = 24 bit
HSL: Needs floating point calculation
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
by S T Nandasara

28. Color Theory and 2D Graphics Theory
July 21, 2019
Color Depth
How many colors are needed?
Gray Scale
= 8 bit (256 shadows)
RGB: Full Color = 8 bit for each = 24 bit
HSL: Needs floating point calculation
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
by S T Nandasara

29. Color Theory and 2D Graphics Theory
July 21, 2019
Palette and Dithering
Indexed Color (Palette) F1 C3 4A 01 83 9B FC 45 1D 3E 47 20 80 56 5B 40 FA E4 5A 33 0F D0 7A 00 12 E2 C4 79 ED 1C 02 03 04 FE FF 2C 53 D8 32
Image Data
Palette
Picture
256-color image
by S T Nandasara

30. Color Theory and 2D Graphics Theory
July 21, 2019
Color Depth
How many colors are needed?
Full Color
= 8 bits for each R, G and B
= 24 bits (16.7 million colors)
Red
RGB: Full Color = 8 bit for each = 24 bit
HSL: Needs floating point calculation
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
Green
Blue
by S T Nandasara

31. Color Theory and 2D Graphics Theory
July 21, 2019
Color Depth
How many colors are needed?
Black & White
= 1 bit
Gray Scale
= 8 bit (256 shadows)
Indexed Color
= 8 bit (217~256 color pallet)
Full Color
= 8 bit each for RGB
= 24 bit (16.7 million colors)
Medical / Professional photography
= 30~48 bit (10~16 bit/RGB)
(Preserve detail / accuracy in editing)
RGB: Full Color = 8 bit for each = 24 bit
HSL: Needs floating point calculation
CMYK: CMY are complementary color of RGB: CMYK Correspond to Ink
by S T Nandasara

32. Interesting, right?
This is just a sneak preview of the full presentation. We hope you like it! To see the rest of it, just click here to view it in full on PowerShow.com. Then, if you’d like, you can also log in to PowerShow.com to download the entire presentation for free.