Download presentation
Presentation is loading. Please wait.
1
Web Colors
2
Web Colors: Up until now, we have been using only pre-defined color names, such as "orange" and "lightblue". As web designers, we need the ability to define exact colors for our elements, not just a few pre-selected ones. By combining any of 256 shades each of red, green, and blue, we will have 256 * 256 * 256 = 16.7 million different colors available to use!
3
Red, Green, Blue (RGB): Web colors are a function of how much is included of each of the primary colors: Red, Green, and Blue.
4
RGB Color Codes: (Red, Green, Blue)
How much RED? How much GREEN? How much BLUE? When defining web colors, the order is always listed as Red first, then Green, and finally Blue.
5
Some Common RGB Color Codes:
(0, 0, 0) is black (255, 255, 255) is white (255, 0, 0) is red (0, 255, 0) is lime (0, 0, 255) is blue (255, 255, 0) is yellow (0, 255, 255) is cyan (255, 0, 255) is magenta
6
RGB Hex Codes: In web design, colors are more often represented in Hex codes. Hex codes are in Base 16, or hexadecimal hormat. The digits in base 10, or decimal are: 0,1,2,3,4,5,6,7,8,9 (10 digits) The digits in base 16, or hexadecimal, are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F (16 digits)
7
The pound sign (#) always precedes a Hex code.
RGB Hex Codes: #12AF30 How much RED? How much GREEN? How much BLUE? The pound sign (#) always precedes a Hex code.
8
Hex codes can be written in upper case or lower case letters.
Some Common Hex Codes: # is black #FFFFFF is white #FF0000 is red #00FF00 is lime #0000FF is blue #FFFF00 is yellow #00FFFF is aqua #ff00ff is magenta Hex codes can be written in upper case or lower case letters.
9
Colorpicker.com: Hex Codes are automatically generated.
Slide sliders up and down to browse the color spectrum. Click on any spot in the color picker area to produce the codes. RGB numbers are also generated. Many applications and website offer tools to help us choose colors and color codes. Colorpicker.com is a free website and very simple to use.
10
Using Hex Codes in a Web Page:
<head> <style type="text/css"> body { background-color:#B11BCC; } </style> </head> <body> <h1>This is my background Color</h1> </body>
Similar presentations
