Upcoming SlideShare
×

# Color theory and 2D graphics

2,360 views

Published on

1 Comment
7 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• can you send me abiramprince@gmail.com .. thanks in advance for u r kind help

Are you sure you want to  Yes  No
Views
Total views
2,360
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
0
1
Likes
7
Embeds 0
No embeds

No notes for slide

### Color theory and 2D graphics

1. 1. Color Theory How to manipulate color digitally?
2. 2. What is color? 2 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 = 400nm 500nm 600nm 700nm
3. 3. Visible spectrum 3 Progressive Rainbow The visible spectrum of light Continuous optical spectrum (designed for monitors with gamma 1.5). visible" light can be broken down into a spectrum that ranges from blue to red in a progressive rainbow
4. 4. Visible spectrum 4 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.
5. 5. 5 Wheel of Color – Visible spectrum  Progressive Rainbow Beam of sunlight The visible spectrum of light 700-635 635-590 590-560 560-490 490-450 450-400 400-380 A Prism separates the beam of lightInfra red Ultra violet Red Orange Yellow Green Blue Indigo Violet
6. 6. Color in the eye 6 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.
7. 7. Visible spectrum 7 This image contains 1 million pixels, each of a different color. The human eye can distinguish about 10 million different colors.
8. 8. Color Model 8 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
9. 9. Wheel of Color 9 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.
10. 10. 10Wheel 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.
11. 11. 11Wheel of Color (RGB Color Model) The Primary Colors (Additive colors) Red Y M W Green C Blue Most of us now use color display, for which the primary colors will be Red, Green and Blue.
12. 12. RGB Color Model 12 Red Blue Green Cubiccoordinate based on primary additive colors  Start from Black (darkness)  Sum of all = White (light) Widely used in PC hardware Additive Color (= mixing light)  CRT, LCD / Image Scanner  Easy to implement B Notefficient/intuitive for processing Black White  Difficult to achieve / adjust to G desired color for human R
13. 13. 13Wheel 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.
14. 14. 14Wheel of Color (CMY Color Model) The Secondary Colors (Subtractive Colors) Magenta R B B Yellow G Cyan 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.
15. 15. CMY / CMYK Color Model 15 Cyan Yellow Subtractive version of RGB  Start from White (paper)  Sum of all = Black (ink) Magenta Widelyused in Publishing Subtractive Color Industry (= mixing ink)  Printer / Color publishing uses 4 inks (CMYK) C Why K (Black) ? M White Black  For pure black / black letter Y
16. 16. Wheel of Color 16 The Tertiary Colors Tertiary colors are the same for both the additive and subtractive worlds.
17. 17. Wheel of Color 17 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.
18. 18. Wheel of Color 18 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.
19. 19. Wheel of Color 19 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.
20. 20. Wheel of Color 20 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.
21. 21. Wheel of Color 21 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.
22. 22. 22Dimension of Color (HSL/HSV/HVC)  Hue = Color name (red, blue, green, etc.)  Saturation = Density (purity) of the color  Value = Lightness & Darkness
23. 23. HSL / HSV / HVC Color Model 23 Cylindricalcoordinates based on logical aspect of color  Hue = Color name (red, blue, green, etc.)  Saturation = Density (purity) of the color  Lightness Used in image editing White software  Very easy to achieve / adjust to desired color for human Black
24. 24. Color Matching 24 Color Gamut  The range of color that can be reproduced on any imaging device Eye CRT Color Matching Scanner Printer Offset  Adjustment / Compensation of the difference of color gamut among multiple image devices
25. 25. Color Percentage 25 Color Red Other Colors
26. 26. Color Bit Depth 26Bit depth, or color depth, refers to the number of colors amonitor can display. Full RGB combines three 8-bit channels,resulting in a 24-bit color depth that adds up to over 16 millioncolors. 24-bit color is sometimes referred to as True Color. Windows Bit depth Number of colors Macintosh True color 24-bit 16,777,216 Millions of colors High color 16-bit 65,536 Thousands of colors Indexed color 8-bit 256 256 colors
27. 27. Color Depth 27 How many colors are needed?  Full Color in Adobe Photoshop
28. 28. Color Depth 28 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)
29. 29. Color Depth 29 How many colors are needed?  Black & White = 1 bit 1 0
30. 30. Color Depth 30 How many colors are needed?  Gray Scale = 8 bit (256 shadows)
31. 31. Palette and Dithering 31 Indexed Color (Palette) 03 F1 C3 4A 01 83 9B FC 00 45 1D 3E 47 20 1D 80 56 01 5B 40 FA E4 5A 33 0F D0 02 7A 00 12 E2 C4 79 ED 1C 03 03 F1 C3 4A 01 83 9B 2C 04 45 1D 3E 47 20 1D 80 53 79 40 FA E4 5A 33 0F D8 FE 5A 00 12 E2 C4 79 ED 32 FF Image Data Palette Picture 256-color image
32. 32. Color Depth 32 How many colors are needed?  Full Color = 8 bits for each R, G and B = 24 bits (16.7 million colors) Red Green Blue Colors are specified with three values, one each for red, green, and blue. The values specify the intensity of the colors, from 0 (none) to 255 (full intensity). In RGB decimal notation, red is 255,0,0 (red at full intensity, no green or blue); green is 0,255,0 (green at full intensity, no red or blue); and blue is 0,0,255 (blue at full intensity, no red or green).
33. 33. Tints, Shades, and Tones 33 Tints - adding white to a pure hue Shades - adding black to a pure hue: Tones - adding gray to a pure hue:
34. 34. Web Safe Colors 34 “Web-smart” palette of 4,096 colors.
35. 35. Web Safe Colors 35“Browser-safe” palette palette of 216 colors. The browser-safe palette was developed when most computer users had 8-bit (256-color) monitors. (There are only 216 colors in the palette because the other 40 colors were reserved for the operating system.)
36. 36. Color Palettes 36Bright Color Romantic Color Rich Color quiet ColorPalette Palette Palette Palette
37. 37. Effective Color Contrast 37Lightness differences The bottom half of this Avoid contrasting huesbetween foreground and hue circle against light from adjacent parts of thebackground colors colors from the top half of hue circle the circle
38. 38. Color Depth 38 Graphic/Image Data Structure  Pixels: picture elements in digital images  Image resolution: number of pixels in a digital image  Bit-map: a representation of the graphic/image data in the same manner as they are stored in video memory
39. 39. Color Depth 39 Graphic/Image Data Structure  Black & White = 1 bit Mono-chrome image Each pixel is stored as a single bit (0 or 1) A 640 X 480 monochrome image requires 37.5 Kbytes  Gray Scale = 8 bit (256 shadows) Gray-scale image Each pixel is usually stored as a byte (0 to 255 levels) A 640 X 480 gray-scale image requires over 300 Kbytes
40. 40. Color Depth 40 Graphic/Image Data Structure  Indexed Color = 8 bit (217~256 color pallet) One byte for each pixel Support 256 colors A 640 X 480 8-bit color image requires 307.2 KBytes  Full Color = 8 bit each for RGB = 24 bit (16.7 million colors) Three byte for each pixel Support 256X256X256 colors A 640 X 480 24-bit color image requires 921.6 KBytes
41. 41. Creations with Color 41
42. 42. Video Systems 42 Transmitter Receiver Goals: 1. Efficient use of bandwidth 2. High viewer perception of quality
43. 43. Camera Operation 43 S-Video YC Color Camera Filters Tubes Zoom Lens R Y U = R-Y Encoder Beam V = B-Y G Component Splitter R B G B Note: 1. Camera has 1, 2, or 3 tubes for sampling 2. More tubes (CCD’s) and better lens RGB produce better pictures Composite
44. 44. Camera Connectors 44
45. 45. Color Perception 45 Color is perceived lightwave  400nm to 700nm received at retina Retina (on the back wall of the eye) composed of approximately 125 million rods and 7 million cones  Cones respond to different frequencies (three types, RGB)  Rods measure brightness at low light levels (i.e., night vision)
46. 46. Color Perception (Cont…) 46 Spectral-response functions of each of the three types of cones on the human retina G > R >> B Humans more sensitive to brightness than color The processing and perception of the image takes place in the brain. Need to understand that there are also physiological and psychological aspects to the perception of color. Colors are often associated with various emotions, such as "feeling blue."
47. 47. Color Models in Video 47 YIQ color model: used in NTSC color TV Y is luminance containing brightness and the detail (monochrome TV) To create the Y signal, the red, green and blue inputs to the Y signal must be balanced to compensate for the color perception misbalance of the eye.  Y = 0.3R + 0.59G + 0.11B Chrominance  I = 0.6R – 0.28G - 0.32B (cyan-orange axis)  Q = 0.21R – 0.52G + 0.31B (purple-green axis) Human eyes are most sensitive to Y, next to I, next to Q.  In a channel (6 MHz) of NTSC TV, 4 MHz is allocated to Y, 1.5 MHz to I, and 0.5 MHz to Q.
48. 48. Color Models in Video (Cont…) 48 YUV color model: for PAL TV and CCIR 601 standard for digital video Same definition for Y as in YIQ model Chrominance is defined by U and V – the color differences  U=B–Y  V=R–Y G YCbCr color model: used in JPEG and MPEG Closely related to YUV: scaled and Y shifted YUV  Cb = ((B – Y)/2) + 0.5  Cr = ((R – Y)/1.6) + 0.5 U V Chrominance value in YCbCr are always in the range of 0 to 1 R B
49. 49. Color Models in Video (Cont…) 49 Color models based on linear transformation from RGB color space G Y U V R B
50. 50. Types of Color Video Signals 50 Component video -- each primary is sent as a separate video signal.  The primaries can either be RGB or a luminance-chrominance transformation of them (e.g., YIQ, YUV).  Best color reproduction  Requires more bandwidth and good synchronization of the three components Composite video -- color (chrominance) and luminance signals are mixed into a single carrier wave. Some interference between the two signals is inevitable. S-Video (Separated video, e.g., in S-VHS) -- a compromise between component analog video and the composite video. It uses two lines, one for luminance and another for composite chrominance signal.
51. 51. Analog Video 51 NTSC Video: 525 scan lines per frame, 30 frames per second (or be exact, 29.97 fps, 33.37 msec/frame) Interlaced, each frame is divided into 2 fields, 262.5 lines/field 20 lines reserved for control information at the beginning of each field So a maximum of 485 lines of visible data  Laserdisc and S-VHS have actual resolution of ~420 lines  Ordinary TV -- ~320 lines Each line takes 63.5 microseconds to scan. Horizontal retrace takes 10 microseconds (with 5 microseconds horizontal synch pulse embedded), so the active line time is 53.5 microseconds.
52. 52. Scanning Video 52 Chroma subsampling: human visual system is more sensitive to luminance than chrominance  We can sub-sample chrominance 4:4:4 – No sub-sampling 4:2:2 – horizontally subsample 4:1:1 – horizontally subsample 4:2:0 – horizontally and vertically
53. 53. Scanning Video 53 4:4:4 – No sub-sampling Y CR CB Y Y CR CB CR CB Line 1 Line 2 Line 3 Line 4
54. 54. Scanning Video 54 4:2:2 – horizontally subsample Y CR CB Y Y Y Y Y Y Y Y CR CB Only CR CB Only CR CB Only CR CB Only Line 1 Line 2 Line 3 Line 4
55. 55. Scanning Video 55 4:1:1 – horizontally subsample Y CR CB Y Y Y Y Y Y Y Y CR CB Only Only Only CR CB Only Only Only Line 1 Line 2 Line 3 Line 4
56. 56. Scanning Video 56 4:2:0 – horizontally and vertically Y CR CB Y CR Y Only Y CR Y Only Y CR Y Only Y CR Y Only Y CB Y Only Y CB Y Only Y CB Y Only Y CB Y Only Line 1 Line 2 Line 3 Line 4
57. 57. Color space compression 57 Typical data assignment to YUV  Y:U:V = 4:2:2 (TV) Y U V  Y:U:V = 4:1:1 (JPEG) Y U V  Y:U:V = 4:2:0 (JPEG) Y U V JPEG (1:50) Y U V
58. 58. Standards for Video 58 CCIR 601 CCIR 601 HDTV CIF QCIF NTSC PAL Luminance 1920 x 1080 720 x 486 720 x 576 352 x 288 176 x 144 ResolutionChrominance 960 x 540 360 x 486 360 x 576 176 x 144 88 x 72 Resolution Color 4:2:2 4:2:2 4:2:2 4:2:0 4:2:0Subsampling Fields/sec 60 60 50 30 30Aspect Ratio 16:9 4:3 4:3 4:3 4:3 Interlacing Yes Yes Yes No No CCIR – Consultative Committee for International Radio CIF – Common Intermediate Format (approximately VHS quality)
59. 59. Sampling 59 1 Frame is stored 720x480 pixels for NTSC 1 Frame is stored 720x576 pixels for PAL Each Pixel is processed for Y (Luminance (B&W) 4:2:2 Samples 2 of every 4 pixels for color 4:1:1 Samples 1 of every 4 pixels for color 4:2:2 has twice the color detail for 4:1:1 (shaper color edges) 4:4:4 is not necessary as humans are more sensitive to change in luminance than color
60. 60. Sampling 60 The first number refers to the 13.5 MHz sampling rate of the luminance The other two numbers refer to the sampling rates of the color difference signals R-Y and B-Y (or,more properly in the digital domain, Cr and Cb)
61. 61. Sampling 61 4:2:2 systems (D-1, D-5, DigiBeta, BetaSX, Digital-S,DVCPRO50) color sampled at half the rate of luminance, Y is 13.5 MHz R-Y and B-Y is each 6.75 MHz 360 color samples (in each of Cr and Cb) per scanline. 4:1:1 systems (NTSC DV & DVCAM, DVCPRO Color data are sampled half as frequently as in 4:2:2 Y is 13.5 MHz R-Y and B-Y is each 3.375 MHz . 180 color samples per scanline.
62. 62. Sampling 62 4:2:2 Better for  Computer Graphics  Special Effects  Chroma Keying  Compositing  Matting
63. 63. Uncompressed Sizes (NTSC) 63 For the 525 line TV standard the line data is:  720(Y) + 360(Cr) + 360(Cb) = 1,440 pixels/line  487 active lines/picture there are 1,440 x 487 = 701,280 pixels/picture  (sampling at 8-bits, a picture takes 701.3 kbytes)  1 sec takes 701.3 x 30 = 21,039 kbytes, or 21 Mbytes  1 min takes 21,039 x 60 = 1,262,340 kbytes, or 1.26 gigs
64. 64. Uncompressed Sizes (NTSC) 64 BOTTOM LINE  1 Gbyte will hold ~47 seconds  1 hour takes ~76 Gbytes  Of Active Picture (Does not include sync Blanking etc as these can be regenerated)
65. 65. Uncompressed Sizes (NTSC) 651 hour takes ~  Uncompressed 76 Gbytes  2:1 Compression 38 Gbytes  5:1 Compression 15 Gbytes
66. 66. Palette and Dithering 66 Indexed Color (Palette) 03 F1 C3 4A 01 83 9B FC 00 45 1D 3E 47 20 1D 80 56 01 5B 40 FA E4 5A 33 0F D0 02 7A 00 12 E2 C4 79 ED 1C 03 03 F1 C3 4A 01 83 9B 2C 04 45 1D 3E 47 20 1D 80 53 79 40 FA E4 5A 33 0F D8 FE 5A 00 12 E2 C4 79 ED 32 FF Image Data Palette Picture  Palette Optimization 256-color image Optimized Palette Dithering & Dithered  Better perception Banding Effect
67. 67. Gamma Correction 67 Gamma = Non-linearity of lightness in any imaging device  output output value  input value 1.0 = 1.0  = 1 : Linear > 2.0 <  < 3.0 : Typical CRT input  Any imaging device has its gamma value Importance of Gamma correction  It is very important to adjust gamma values if you use same image in different imaging device  Especially in publishing industry
68. 68. Alpha Channel 68 Transparency information of image  Important for image editing, animation Original Photo Collage Image Alpha Channel (1-bit) Transparency Image (GIF) Grayscale Alpha Channel (8-bit)
69. 69. Anti-aliasing 69 Aliasing problem  Jagged edge of digital image  Not a problem of image data itself  Problem of PCs pixel-based display screen Anti-aliasing technology Aliased image  Make edge smoother  Not a simple blur  Over sampling or other advanced algorithms required Simple Blur Anti-Aliased Image
70. 70. 2D Bitmap ImageTheory
71. 71. Bitmap image 71 R GB = A pixel (FF,B6,98) Pixel based  Group of colored dots Best for real-world image  Photography, Painted picture Large data size  Needs compression for transfer Resolution Dependent  Not suitable for resizing/zooming Full Color Windows BMP / 44KB
72. 72. Bitmap image compression 72 Loss-less Compression  Can reproduce mathematically identical original image without any data loss  Not high compression ratio (~2.0) Lossy Compression  Reduce non-sensitive information to human eyes (not mathematical, but physiological method)  Cannot reproduce original image  Can specify the amount of information loss  High compression ratio (~100)
73. 73. Compression algorithms 73 Comp. File Algorithm Basic Concept Ratio Format RLELoss-LessLoss-Less Pack repetitive data ~1.2 BMP (Run-Length Encoding) LZW Build treed dictionary ~2.0 TIFF, GIF (Lempel-Zif-Welsh) Color-space Cut non-sensitive ~2.0 JPEG, (TV) compression color informationLossyLossy DCT Transform to series ~100 JPEG, (Discrete Cosine Transformation) of Cosine functions MPEG1/2 Transform to series JPEG2000, Wavelet compression of Wavelet functions ~100 MPEG4
74. 74. Color space compression (1) 74 Uses human eye characteristics  Less sensitive to color than lightness  Less sensitive to red than green  Color information can be sparse YUV color compression  Y is the most sensitive light to human eyes  We should reserve information on this component  U/V is much less sensitive  We can reduce information from these 2 components  Typical ratio of data assignment to YUV component  Y:U:V = 4:4:4 / 4:2:2 / 4:1:1 / 4:2:0
75. 75. Color space compression (2) 75 Typical data assignment to YUV  Y:U:V = 4:2:2 (TV) Y U V  Y:U:V = 4:1:1 (JPEG) Y U V  Y:U:V = 4:2:0 (JPEG) Y U V JPEG (1:50) Y U V
76. 76. Algorithm Comparison 76 Original Image (154KB) Compress to 3 KB (1:50) Fractal DCT Wavelet
77. 77. Bitmap image file formats 77 Industry standard  TIFF - Adobe/Silicon Graphics Platform Standard  BMP - Windows  PICT - Macintosh  GIF - CompuServe International Standard  JPEG - ISO 10918  PNG - MIT/W3C  JPEG2000 - ISO 15444 http://www.dcs.ed.ac.uk/home/mxr/gfx/
78. 78. Vector image file format 78 Industry Standard  EPS - Adobe  Artistic drawing  AI - Adobe  Artistic drawing  DXF - Autodesk  2D/3D CAD Platform Standard  WMF, EMF - Windows International Standard  CGM (Computer Graphics Metafile) - ANSI/ISO  SVG - (W3C recommendation)
79. 79. EPS (Encapsulated Post Script) 79 PostScript based  PostScript = Bézier-curve based page definition language developed by Adobe  For printing complex page layout Highly expressive  Color separation, Layers, etc. For Professional Artist Used in publishing / illustration industry Not used in mechanical drawing ・ DXF
80. 80. AI (Adobe Illustrator) 80 Proprietary format for Adobe Illustrator  Based primarily on PostScript  Adds all special functionality of Illustrator Somewhat industry standard  More capability than EPS  Many applications support this format Inconsistency in versions  Each new version of Adobe Illustrator has newer version of file format  Incompatible
81. 81. WMF & EMF 81 WMF (Windows Meta File)  Straight line-based (No curve!)  Designed for Microsoft Windows 3.1  Limited feature, but widely used in office market EMF (Enhanced Meta File)  Bézier curve-based  Designed for Microsoft Windows 95  Used for exchange of vector data internally between Windows applications