In this tutorial you will learn about the CSS Colors and its application with practical example.
CSS Colors allows us to set a color for HTML Elements and for various attributes of these HTML Entities. For example we can set color for text color, Border, Background etc.
CSS Color values can be assigned in following three format :
Hex or Hexadecimal Code Notation
The Hex or Hexadecimal Code Notation is most preferable method for defining color values.Hex color code starts with the hash (#
) character, followed by three or six hexadecimal digits in RGB format. For example, the hexadecimal color value for white is #FFFFFF
, or #FFF
in shorthand. Hexadecimal code notation supports a more range of colors than the keyword system.
Format | Syntax | Example |
---|---|---|
Hex Code | #RRGGBB or #RGB | p{color:#FFFFFF;} or p{color:#FFF;} |
RGB Notation
Tough hex codes are more popular in CSS but many designers prefers to use RGB color model. A color is defined by the amount of Red, Green and Blue, RGB color values supported by the all major browsers.In RGB a color value can be defined using 0 to 255 integer value for the intensity of red, green and blue values that comprise our RGB colors (or using percentages instead).
Format | Syntax | Example |
---|---|---|
RGB% or RGB Absolute | rgb(rrr%,ggg%,bbb%) or rgb(rrr,ggg,bbb) | p{color:rgb(50%,50%,50%);} or p{color:rgb(0,0,255);} |
Color Keywords or Color Name
Basic color keyword or color name notation is simplest method to define a color value and has been around for a long time,but the color names are limited to 16 values but, but can be expanded using an extended palette.
Format | Syntax | Example |
---|---|---|
keyword or name | red, blue etc. | p{color:green;} |
List of 17 official CSS color names with their hex RGB value and their decimal RGB value.
Color Name | Hex Code RGB | Decimal Code RGB |
---|---|---|
Maroon | 800000 | 128,0,0 |
Red | FF0000 | 255,0,0 |
Orange | FFA500 | 255,165,0 |
Yellow | FFFF00 | 255,255,0 |
Olive | 808000 | 128,128,0 |
Green | 008000 | 0,128,0 |
Purple | 800080 | 128,0,128 |
Fuchsia | FF00FF | 255,0,255 |
Lime | 00FF00 | 0,255,0 |
Teal | 008080 | 0,128,128 |
Aqua | 00FFFF | 0,255,255 |
Blue | 0000FF | 0,0,255 |
Navy | 000080 | 0,0,128 |
Black | 000000 | 0,0,0 |
Gray | 808080 | 128,128,128 |
Silver | C0C0C0 | 192,192,192 |
White | FFFFFF | 255,255,255 |
Browser Safe Colors
List of 216 browser safe colors for a 256 color palette system –
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 |