IS502:Multimedia Design for Information System color space For Image and Video Presenter Name: Mahmood A.Moneim Supervised By: Prof. Hesham A.Hefny Winter 2013 This template can be used as a starter file for presenting training materials in a group setting. Sections Right-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors. Notes Use the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production) Coordinated colors Pay particular attention to the graphs, charts, and text boxes. Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale. Graphics, tables, and graphs Keep it simple: If possible, use consistent, non-distracting styles and colors. Label all graphs and tables.

Revision Example: A 3 Megapixel camera what are the images dimensions can produce if the aspect ratio is set to (4:3) and if is the aspect ratio is set to (3:2) Hint: Camera color bits is same image color bits. By Mahmood A.Moneim

Outline Introduction Additive Color Mixing Subtractive Color Mixing Image Color Space Video Color Space By Mahmood A.Moneim

1.Introduction Three Characteristics of Color: hue brightness: the luminance of the object saturation: the blue sky Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important. Introduce each of the major topics. To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next. By Mahmood A.Moneim

2.Additive Color Mixing The mixing of “light” Primary: Red, Green, Blue The complementary color “White” means By Mahmood A.Moneim

3.Subtractive Color Mixing The mixing of “pigment” Primary: Cyan, Magenta, Yellow The complementary color Why black? By Mahmood A.Moneim

4.Image Color Space Image Color Space: RGB CMYK HSV and HSL By Mahmood A.Moneim

4.Color Space What is color space? A 3D model used to define a specified color The difference between color spaces: The choice of axes By Mahmood A.Moneim

4.Color Space – RGB RGB: The simplest color space Axes: Red, green, blue Advantages: simple By Mahmood A.Moneim

4.Color Space – CMYK Used for: printer printing Use the subtractive color mixing Axes: Cyan Magenta Yellow K: black By Mahmood A.Moneim

CMYK from RGB C=1-(R/255) M=1-(G/255) Y=1-(B/255) K= min(C,M,Y) cyan=100*(C-K)/(1-K) magenta=100*(M-K)/(1-K) yellow=100*(Y-K)/(1-K) black=100*K By Mahmood A.Moneim

RGB From CMYK R= (1-C) *255 G=(1-M)*255 B= (1-Y)*255 By Mahmood A.Moneim

4- Color Space- HSV HSV cylindrical geometries same as HSL Axes: Hue, Saturation, Value component The components of the HSV, saturation (s) and value (v) should have values in the range [0,1], while the hue (h) should have values in the range [0,360] By Mahmood A.Moneim

RGB to HSV Transformation The conversion from a RGB to a HSV model is described by these formulas: v = max Max= max (r,g,b) min = min(r,g,b) s = c/v where: c = chroma = max (r,g,b) - min (r,g,b) h = depends on which of r,g,b is the maximum By Mahmood A.Moneim

HSV to RGB Transformation The conversion from a HSV to RGB a model is described by these formulas: By Mahmood A.Moneim

4- Color Space- HSL Axes: Hue, Saturation and Lightness Hue Same as Hue of HSV S= C/(1-|2L-1|) if C≠0 and 0 otherwise L = ½ (Max + Min) By Mahmood A.Moneim

5.Video Color Space – YCbCr &YPbPr Used for: digital video encoding, digital camera, and analog video. Axes: Y: luma Cb: blue chroma Cr: red chroma By Mahmood A.Moneim

4.Video Color Space – YCbCr &YPbPr Conversion from RGB: Y=0.299(R-G) + G + 0.114(B-G) Cb=0.564(B-Y) Cr=0.713(R-Y) The Matrix form: By Mahmood A.Moneim

4.Color Space – YUV YUV Used for: video encoding for some standard such as NTSC, PAL, SECAM Axes: Y: luma U: blue chroma V: red chroma By Mahmood A.Moneim

4.Color Space – YUV Conversion from RGB: Y=0.299R+0.587G+0.114B U=0.436(B-Y)/(1-0.114) V=0.615(R-Y)/(1-0.299) The Matrix form: By Mahmood A.Moneim

4.Color Space – YIQ YIQ Used for: video encoding for some standard such as NTSC Axes: Y: luma I: blue chroma Q: red chroma I-Q channels are rotated from the U-V channels in YUV By Mahmood A.Moneim

4.Color Space – YIQ Conversion from RGB: By Mahmood A.Moneim

4.Color Space – CMYK Conversion from YCbCr: C = 255 -Y - 1.4021(Cr-128) M = 255 - Y + 0.3441(Cb-128) + 0.7142(Cr-128) Y = 255 - Y - 1.7718(Cb -128) K = min (C, M, Y) By Mahmood A.Moneim

4.Color Space – Comparison Color mixing Primary parameters Used for Pros and cons RGB Additive Red, Green, Blue Easy but wasting bandwidth CMYK Subtractive Cyan, Magenta, Yellow, Black Printer Works in pigment mixing YCbCr YPbPr additive Y(luminance), Cb(blue chroma), Cr(red chroma) Video encoding, digital camera Bandwidth efficient YUV Y(luminance), U(blue chroma), V(red chroma) Video encoding for NTSC, PAL, SECAM YIQ I(rotated from U), Q(rotated from V) Video encoding for NTSC By Mahmood A.Moneim

Problem set When using CSS, colors are defined using a hexadecimel (hex) notation for the combination of Red, Gree, and Blue color values (RGB). The hex values are written as 3 double digit numbers, starting with a # sign. How would you represent the following colors in CSS? 1. Red 2. Blue 3. Black 4. White 5. A mixture of colors that uses 25% of Red, 75% of Green and 50% of Blue. By Mahmood A.Moneim

Problem set How can we convert from HLS color space to RGB color space? How can we convert between RGB and CMY color spaces? By Mahmood A.Moneim

Problem Set Convert the following HLS colors to RGB color space expressed in both the [0, 1] and the[0,255] ranges. By Mahmood A.Moneim

Problem Set By Mahmood A.Moneim

Problem Set By Mahmood A.Moneim

Problem Set What is the hue of the color when MAX==MIN? Convert the HSV color [110.7,0.3,0.5] to CMY color space. By Mahmood A.Moneim

Problem Set Consider the 3x3 image shown below. Draw the new image if the original image is zoomed 2 times along both rows and columns (i.e. to size 6x6) using A) Nearest Neighbor Interpolation. B) Bilinear Interpolation. 69 50 80 45 60 66 30 55 80 By Mahmood A.Moneim

Microsoft Engineering Excellence By Mahmood A.Moneim Microsoft Confidential