CSS uses color values to specify a color. Typically, these are used
to set a color either for the foreground of an element (i.e., its text)
or else for the background of the element. They can also be used to
affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the possible formats −
Format |
Syntax |
Example |
Hex Code |
#RRGGBB |
p{color:#FF0000;} |
Short Hex Code |
#RGB |
p{color:#6A7;} |
RGB % |
rgb(rrr%,ggg%,bbb%) |
p{color:rgb(50%,50%,50%);} |
RGB Absolute |
rgb(rrr,ggg,bbb) |
p{color:rgb(0,0,255);} |
keyword |
aqua, black, etc. |
p{color:teal;} |
These formats are explained in more detail in the following sections −
CSS Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two
digits(RR) represent a red value, the next two are a green value(GG),
and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like
Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
Color |
Color HEX |
|
#000000 |
|
#FF0000 |
|
#00FF00 |
|
#0000FF |
|
#FFFF00 |
|
#00FFFF |
|
#FF00FF |
|
#C0C0C0 |
|
#FFFFFF |
To Become more comfortable -
Do Online Practice
CSS Colors - Short Hex Codes
This is a shorter form of the six-digit notation. In this format,
each digit is replicated to arrive at an equivalent six-digit value. For
example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like
Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
Color |
Color HEX |
|
#000 |
|
#F00 |
|
#0F0 |
|
#0FF |
|
#FF0 |
|
#0FF |
|
#F0F |
|
#FFF |
CSS Colors - RGB Values
This color value is specified using the
rgb( ) property. This
property takes three values, one each for red, green, and blue. The
value can be an integer between 0 and 255 or a percentage.
NOTE: All the browsers does not support rgb() property of color so it is recommended not to use it.
Following is the example to show few colors using RGB values.
Color |
Color RGB |
|
rgb(0,0,0) |
|
rgb(255,0,0) |
|
rgb(0,255,0) |
|
rgb(0,0,255) |
|
rgb(255,255,0) |
|
rgb(0,255,255) |
|
rgb(255,0,255) |
|
rgb(192,192,192) |
|
rgb(255,255,255) |
Building Color Codes
You can build millions of color codes using our Color Code Builder. Check our
HTML Color Code Builder. To use this tool you would need a Java Enabled Browser.
Browser Safe Colors
Here is the list of 216 colors which are supposed to be most safe and
computer independent colors. These colors vary from hexa code 000000 to
FFFFFF. These colors are safe to use because they ensure that all
computers would display the colors correctly when running a 256 color
palette −
000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
No comments:
Post a Comment