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 tells you all 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 |
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.
Browser Safe Colors:
Here is the list of 216 colors which are supposed to be most safe and
computer independent colors. These colors very from hexa code 000000 to
FFFFFF. These color 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
Note: Only a member of this blog may post a comment.