Embed Size (px)
Citation preview
Web Colors
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!
Red, Green, Blue (RGB):
Web colors are a function of how much is included of each of the primary colors: Red,
Green, and Blue.
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.
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
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)
RGB Hex Codes:
#12AF30
The pound sign (#) always precedes a Hex code.
How much RED? How much GREEN? How much BLUE?
Some Common Hex Codes: #000000 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.
Colorpicker.com:
Click on any spot in the color picker area to produce the
codes.
Hex Codes are automatically generated.
RGB numbers are also generated.
Slide sliders up and down to browse the color spectrum.
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.
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>
