Skills: selecting colors, specifying colors in HTML Concepts: combining red, green and blue light to generate colors, combining light versus combining.

Similar presentations


Presentation on theme: "Skills: selecting colors, specifying colors in HTML Concepts: combining red, green and blue light to generate colors, combining light versus combining."— Presentation transcript:

1 Skills: selecting colors, specifying colors in HTML Concepts: combining red, green and blue light to generate colors, combining light versus combining paint, RGB color coding system This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. The RGB color model

2 Where does this topic fit? Internet concepts – Applications – Technology – Implications Internet skills – Application development – Content creation (Web) – User skills

3 Pixel – geek for “dot” Mouse over the image to play the video (37 s)

4 Cones – day vision, detect color Rods – night vision, high definition Why RGB?

5 Different wavelengths, different colors

6 Combine three primary colors for each pixel Intensities of each color can range from 0 - 255

7 Color Red GreenBlue Red25500 Green02550 Blue00255 Yellow255 0 Cyan0255 Magenta2550 White255 Black000 A few examples

8 Experiment with color codes RGB demo program: http://som.csudh.edu/fac/lpress/netapps/color.exe

9 Display sub-pixels What color would the part of the image surrounding the letter A be when viewed normally?

10 Introduction to color theory

11 http://colorschemedesigner.com/

12 Grade school finger painting Why do all the colors add up to murky black?

13 Mix lightMix pigment

14 Paint.Net color selector and picker

15 Millennium Park, Chicago A large RGB display

16

17

18

19 Summary

20 Optional stuff follows

21 Podcast on color philosophy and physiology http://www.radiolab.org/2012/may/21/ To what extent is color a physical thing in the physical world, and to what extent is it created in our minds?

22 The outer edge of the top of the cone is the color wheel, with all the pure colors. The H parameter describes the angle around the wheel. The S (saturation) is zero for any color on the axis of the cone; the center of the top circle is white. An increase in the value of S corresponds to a movement away from the axis. The V (value or lightness) is zero for black. An increase in the value of V corresponds to a movement away from black and toward the top of the cone. HSV model

23 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 24 25 …… 255FF Decimal counting Hexadecimal counting Optional: counting in hexadecimal

24 DecimalHexadecimal 6541 252FC 220DC #41FCDC RBG Optional: RGB colors in HTML

25 Self-study questions How many different colors are possible using the RGB model? What colors are the background and text on a page with this body tag: What happens if you change the values of the bgcolor and text attributes of the body tag? Hexadecimal arithmetic – what is: 2F+1, 2F+9, 19+6, 19+7, 19+8, FF-1, 3D-8?

26 Resources Cool color selector: http://www.ficml.org/jemimap/style/color/wheel.html Ten color matching tools: http://webdesignledger.com/tools/10-super-useful-tools-for-choosing- the-right-color-palette HTML built-in color names: http://www.w3schools.com/HTML/html_colornames.asp A second color model – specify hue, saturation and luminosity: http://www.labnol.org/home/hue-saturation-luminosity/20104/ Topic module on counting and number systems: http://cis275topics.blogspot.com/2010/11/counting.html


Download ppt "Skills: selecting colors, specifying colors in HTML Concepts: combining red, green and blue light to generate colors, combining light versus combining."

Similar presentations


Ads by Google