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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.