Css colors are defined using a combination of Red, Green, and Blue color values (RGB).
The combination of red, green and blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
Specifying color in css can be done in one of the following methods:
1. Predefined/cross-browser color names
2. RGB colors
3. Hexadecimal colors
Predefined/cross-browser color names:
147 color names are predefined in the html and css color specification.
For reference, see here.
RGB colors:
RGB color values are supported in all major browsers.
RGB color value is specified with: rgb (red, green, blue).
Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
Eg:
rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
Also, above can be defined as: rgb(0%,0%,100%).
Eg2: red
p
{
background-color:rgb(255,0,0);
}
Hexadecimal colors:
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF.
Eg: #0000ff value is blue, because the blue component is set to its highest value (ff) and the others are set to 0.
p
{
background-color:#0000ff;
}
Converting hex to rgb using javascript:
Eg: converting hex to rgb using rgba():
function convertHex(hex, opacity) {
var hex = hex.replace('#','');
var r = parseInt(hex.substring(0,2), 16);
var g = parseInt(hex.substring(2,4), 16);
var b = parseInt(hex.substring(4,6), 16);
return 'rgba(' + r + ', ' + g + ', ' + b + ', '
+ opacity / 100 + ')';
}
Common colors:
| HEX: | RGB: |
| #000000 |
rgb(0,0,0) |
| #FFFFFF |
rgb(255,255,255) |
| #FF0000 |
rgb(255,0,0) |
| #00FF00 |
rgb(0,255,0) |
| #0000FF |
rgb(0,0,255) |
| #FFFF00 |
rgb(255,255,0) |
| #00FFFF |
rgb(0,255,255) |
| #FF00FF |
rgb(255,0,255) |
| #C0C0C0 |
rgb(192,192,192) |
For more information on color values, see here.
Useful colors:
Error message: #aa0000
www.andrewsin.com website colors:
#C8E06F = green, #7DCF00= nice green
#21007F = menu bar blue
#1E1A4B = text dark blue
#3399FF = sky blue
#
