Introduction
This Chapter demonstrates about the CSS Colors which are used to apply colors to the elements with CSS Using various options following are the concepts are covered in this chapter.
- CSS Basic Colors
- Colors Using HEX
- Colors Using RGB
- Colors Using HSLa
Description
User can apply colors to the elements which can be applied in several ways by using the CSS user can apply colors to the elements in a following ways.
In which the most primary way to specify the color is using basic color keyword and which are the case sensitive. The code below demonstrates the CSS Color using basic color as shown.
[html]
<!DOCTYPE HTML>
<html>
<style>
div{width:450px; height:400px;
background-color:Navy;}
p{font-family:Verdana;
font-size:4em;
color:silver;}
</style>
<body>
<div>
<p>Simple Programming Lessons CSS Tutorials.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Color Keywords
- Hexadecimal Numbers
- RGB(Red, Green, Blue)
- HSL (Hue, saturation, Lightness)
- RGBA(red,green, blue, alpha )
- HSLA(hue, saturation, lightness, alpha)
Description
The most common way to apply the colors is Hexadecimal notation which is represent by the RGB(red, blue, green) Which have 256 shades for each RGB Values by usnig these user can create 16 million colors. Hex values must begin with the pound(#) symbol and the alphabets from A-F and which are the case sensitive, the code below demonstrates the CSS colors using HEX as shown.
[html]
<!DOCTYPE HTML>
<html>
<style>
div{width:450px; height:400px;
background-color:#0000FF}
p{font-family:Verdana;
font-size:4em;
color:#ccc;}
</style>
<body>
<div>
<p>Simple Programming Lessons</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
By using the rgba() user can specify the RGBA (red, green, blue, alpha) values for the colors. in which a represent the alpha which is the transparency of the color. User can also specify the function rgb() is used to represent only RGB values except alpha values. The code below demonstrates the Colors using RGB as shown.
[html]
<!DOCTYPE HTML>
<html>
<style>
div{width:450px; height:400px;
background-color:rgba(0,50,250,25.5);}
p{font-family:Verdana;
font-size:4em;
color:rgba(20,250,24,0.7);}
</style>
<body>
<div>
<p>Simple programming Lessons.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also specify the colors by using HSLA which means Hue, Saturation, Luminance, Alpha colors by using the hsla() in which HSL uses cylindrical co-ordinate system represent RGB values and all color combinations are in a cylinder around the main axis.
- Hue Which is represent by angle around the axis by the value HUE in which the value is between 0-360.
- Saturation Which is represent by the distance from the axis and the value is 0-100.
- Luminance Which represented by distance along the axis denotes the Luminance and the value is 0-100.
- Alpha Which specify the transparency of the color its value is 0-1.
Examples
The table below demonstrates some colors with Hex code, RGB, HSLa values which are shown below.
| Color | Name | Hex Code | RGB | HSLa |
|---|---|---|---|---|
| dark red | #8B0000 | (139, 0, 0) | (0, 100%, 27%, 1) | |
| brown | #A52A2A | (165, 42, 42) | (0, 59%, 41%, 1) | |
| firebrick | #B22222 | (178,34,34) | (0, 68%, 42%, 1) | |
| crimson | #DC143C | (220,20,60) | (348, 83%, 47%, 1) | |
| red | #FF0000 | (255,0,0) | (0, 100%, 50%, 1) | |
| tomato | #FF6347 | (255,99,71) | (9, 100%, 64%, 1) | |
| coral | #FF7F50 | (255,127,80) | (16, 100%, 66%, 1) | |
| Indian Red | #CD5C5C | (205,92,92) | (0, 53%, 58%, 1) | |
| Light Coral | #F08080 | (240, 128, 128) | (0, 79%, 72%, 1) | |
| dark salmon | #E9967A | (233, 150, 122) | (15, 72%, 70%, 1) | |
| salmon | #FA8072 | (250, 128, 114) | (6, 93%, 71%, 1) | |
| light salmon | #FFA07A | (255,160,122) | (17, 100%, 74%, 1) | |
| orange red | #FF4500 | (255,69,0) | (16, 100%, 50%, 1) | |
| dark orange | #FF8C00 | (255,140,0) | (33, 100%, 50%, 1) | |
| orange | #FFA500 | (255,165,0) | (39, 100%, 50%, 1) | |
| gold | #FFD700 | (255,215,0) | (51, 100%, 50%, 1) | |
| dark golden rod | #B8860B | (184,134,11) | (43, 89%, 38%, 1) | |
| golden rod | #DAA520 | (218,165,32) | (43, 74%, 49%, 1) | |
| pale golden Rod | #EEE8AA | (238,232,170) | (55, 67%, 80%, 1) | |
| dark kakhi | #BDB76B | (189,183,107) | (56, 38%, 58%, 1) | |
| kakhi | #F0E68C | (240,230,140) | (54, 77%, 75%, 1) | |
| olive | #808000 | (128,128,0) | (60, 100%, 25%, 1) | |
| yellow | #FFFF00 | (255,255,0) | (60, 100%, 50%, 1) | |
| yellow green | #9ACD32 | (154,205,50) | (80, 61%, 50%, 1) | |
| dark olive green | #556B2F | (85,107,47) | (82, 39%, 30%, 1) | |
| olive drab | #6B8E23 | (107,142,35) | (80, 60%, 35%, 1) | |
| lawn green | #7CFC00 | (124,252,0) | (90, 100%, 49%, 1) | |
| chart reuse | #7FFF00 | (127,255,0) | (90, 100%, 50%, 1) | |
| green yellow | #ADFF2F | (173,255,47) | (84, 100%, 59%, 1) | |
| dark green | #006400 | (0,100,0) | (120, 100%, 20%, 1) | |
| green | #008000 | (0,128,0) | (120, 100%, 25%, 1) | |
| forest green | #228B22 | (34,139,34) | (120, 61%, 34%, 1) | |
| lime | #00FF00 | (0,255,0) | (120, 100%, 50%, 1) | |
| lime green | #32CD32 | (50,205,50) | (120, 61%, 50%, 1) | |
| lime green | #90EE90 | (144,238,144) | (120, 73%, 75%, 1) | |
| pale green | #98FB98 | (152,215,0) | (120, 93%, 79%, 1) | |
| dark sea green | #8FBC8F | (143,188,143) | (120, 25%, 65%, 1) | |
| medium spring green | #00FA9A | (0,250,154) | (157, 100%, 49%, 1) | |
| spring green | #00FF7F | (0,255,154) | (150, 100%, 50%, 1) | |
| sea green | #2E8B57 | (46,139,87) | (146, 50%, 36%, 1) | |
| medium aqua marine | #66CDAA | (102,205,170) | (160, 51%, 60%, 1) | |
| medium sea green | #3CB371 | (60,179,113) | (147, 50%, 47%, 1) | |
| light sea green | #20B2AA | (32,178,170) | (177, 70%, 41%, 1) | |
| dark slate gray | #2F4F4F | (47,79,79) | (180, 25%, 25%, 1) | |
| teal | #008080 | (0,128,128) | (180, 100%, 25%, 1) | |
| dark cyan | #008B8B | (0,139,139) | (180, 100%, 27%, 1) | |
| aqua | #00FFFF | (0,255,255) | (180, 100%, 50%, 1) | |
| cyan | #00FFFF | (0,255,255) | (180, 100%, 50%, 1) | |
| light cyan | #E0FFFF | (224,255,255) | (180, 100%, 94%, 1) | |
| dark turquoise | #00CED1 | (0,206,209) | (181, 100%, 41%, 1) | |
| turquoise | #40E0D0 | (64,224,208) | (174, 72%, 56%, 1) | |
| medium turquoise | #48D1CC | (72,209,204) | (178, 60%, 55%, 1) | |
| pale turquoise | #AFEEEE | (175,238,238) | (180, 65%, 81%, 1) | |
| aqua marine | #7FFFD4 | (127,255,212) | (160, 100%, 75%, 1) | |
| powder blue | #B0E0E6 | (176,224,230) | (187, 52%, 80%, 1) | |
| cadet blue | #5F9EA0 | (95,158,160) | (182, 25%, 50%, 1) | |
| steel blue | #4682B4 | (70,130,180) | (207, 44%, 49%, 1) | |
| corn flower blue | #6495ED | (100,149,237) | (219, 79%, 66%, 1) | |
| deep sky blue | #00BFFF | (0,191,255) | (195, 100%, 50%, 1) | |
| dodger blue | #1E90FF | (30,144,255) | (210, 100%, 56%, 1) | |
| light blue | #ADD8E6 | (173,216,230) | (195, 53%, 79%, 1) | |
| sky blue | #87CEEB | (135,206,235) | (197, 71%, 73%, 1) | |
| light sky blue | #87CEFA | (135,206,250) | (203, 92%, 75%, 1) | |
| midnight blue | #191970 | (25,25,112) | (240, 64%, 27%, 1) | |
| navy | #000080 | (0,0,128) | (240, 100%, 25%, 1) | |
| dark blue | #00008B | (0,0,139) | (240, 100%, 27%, 1) | |
| medium blue | #0000CD | (0,0,205) | (240, 100%, 40%, 1) | |
| blue | #0000FF | (0,0,255) | (240, 100%, 50%, 1) | |
| royal blue | #4169E1 | (65,105,255) | (225, 73%, 57%, 1) | |
| blue violet | #8A2BE2 | (138,43,226) | (271, 76%, 53%, 1) | |
| indigo | #4B0082 | (75,0,130) | (275, 100%, 25%, 1) | |
| dark slate blue | #483D8B | (72,61,139) | (248, 39%, 39%, 1) | |
| state blue | #6A5ACD | (106,90,205) | (248, 53%, 58%, 1) | |
| medium slate blue | #7B68EE | (123,104,238) | (249, 80%, 67%, 1) | |
| medium purple | #9370DB | (147,112,219) | (260, 60%, 65%, 1) | |
| dark magenta | #8B008B | (139,0,139) | (300, 100%, 27%, 1) | |
| dark violet | #9400D3 | (148,0,211) | (282, 100%, 41%, 1) | |
| dark orchid | #9932CC | (153,50,204) | (280, 61%, 50%, 1) | |
| medium orchid | #BA55D3 | (186,85,211) | (288, 59%, 58%, 1) | |
| purple | #800080 | (128,0,128) | (300, 100%, 25%, 1) | |
| thistle | #D8BFD8 | (216,191,216) | (300, 24%, 80%, 1) | |
| plum | #DDA0DD | (221,160,221) | (300, 47%, 75%, 1) | |
| violet | #EE82EE | (238,130,238) | (300, 76%, 72%, 1) | |
| magenta | #FF00FF | (255,0,255) | (300, 100%, 50%, 1) | |
| orchid | #DA70D6 | (218,112,214) | (302, 59%, 65%, 1) | |
| medium violet red | #C71585 | (199,21,133) | (322, 81%, 43%, 1) | |
| pale violet red | #DB7093 | (219,112,147) | (340, 60%, 65%, 1) | |
| deep pink | #FF1493 | (255,20,147) | (328, 100%, 54%, 1) | |
| hot pink | #FF69B4 | (255,105,180) | (330, 100%, 71%, 1) | |
| light pink | #FFB6C1 | (255,182,193) | (351, 100%, 86%, 1) | |
| pink | #FFC0CB | (255,192,203) | (350, 100%, 88%, 1) | |
| antique white | #FAEBD7 | (250,235,215) | (34, 78%, 91%, 1) | |
| beige | #F5F5DC | (245,245,220) | (60, 56%, 91%, 1) | |
| bisque | #FFE4C4 | (255,228,196) | (33, 100%, 88%, 1) | |
| blanched almond | #FFEBCD | (255,235,205) | (36, 100%, 90%, 1) | |
| wheat | #F5DEB3 | (245,222,179) | (39, 77%, 83%, 1) | |
| corn silk | #FFF8DC | (255,248,220) | (48, 100%, 93%, 1) | |
| lemon chiffon | #FFFACD | (255,250,205) | (54, 100%, 90%, 1) | |
| light golden rod yellow | #FAFAD2 | (250,250,210) | (60, 80%, 90%, 1) | |
| light yellow | #FFFFE0 | (255,255,224) | (60, 100%, 94%, 1) | |
| saddle brown | #8B4513 | (139,69,19) | (25, 76%, 31%, 1) | |
| sienna | #A0522D | (160,82,45) | (19, 56%, 40%, 1) | |
| chocolate | #D2691E | (210,105,30) | (25, 75%, 47%, 1) | |
| peru | #CD853F | (205,133,63) | (30, 59%, 53%, 1) | |
| sandy brown | #F4A460 | (244,164,96) | (28, 87%, 67%, 1) | |
| burly wood | #DEB887 | (222,184,135) | (34, 57%, 70%, 1) | |
| tan | #D2B48C | (210,180,140 | (34, 44%, 69%, 1) | |
| rosy brown | #BC8F8F | (188,143,143) | (0, 25%, 65%, 1) | |
| moccasin | #FFE4B5 | (255,228,181) | (38, 100%, 85%, 1) | |
| navajo white | #FFDEAD | (255,222,173) | (36, 100%, 84%, 1) | |
| peech puff | #FFDAB9 | (255,218,185) | (28, 100%, 86%, 1) | |
| misty rose | #FFE4E1 | (255,228,225) | (6, 100%, 94%, 1) | |
| lavender blush | #FFF0F5 | (255,240,245) | (340, 100%, 97%, 1) | |
| linen | #FAF0E6 | (255,240,230) | (30, 67%, 94%, 1) | |
| old lace | #FDF5E6 | (255,245,230) | (39, 85%, 95%, 1) | |
| papaya whip | #FFEFD5 | (255,239,213) | (37, 100%, 92%, 1) | |
| sea shell | #FFF5EE | (255,245,238) | (25, 100%, 97%, 1) | |
| mint cream | #F5FFFA | (245,255,250) | (150, 100%, 98%, 1) | |
| slate grey | #708090 | (112,128,144) | (210, 13%, 50%, 1) | |
| light slate grey | #778899 | (119,136,153) | (210, 14%, 53%, 1) | |
| light steel blue | #B0C4DE | (176,196,222) | (214, 41%, 78%, 1) | |
| lavender | #E6E6FA | (230,230,250) | (240, 67%, 94%, 1) | |
| floral white | #FFFAF0 | (255,250,240) | (40, 100%, 97%, 1) | |
| alice blue | #F0F8FF | (240,248,255) | (208, 100%, 97%, 1) | |
| ghost white | #F8F8FF | (248,248,255) | (240, 100%, 99%, 1) | |
| honey dew | #F0FFF0 | (240,255,240) | (120, 100%, 97%, 1) | |
| ivory | #FFFFF0 | (255,255,240) | (60, 100%, 97%, 1) | |
| azure | #F0FFFF | (240,255,255) | (180, 100%, 97%, 1) | |
| snow | #FFFAFA | (255,250,250) | (0, 100%, 99%, 1) | |
| black | #000000 | (0,0,0) | (0, 0%, 0%, 1) | |
| dim gray | #696969 | (105,105,105) | (0, 0%, 41%, 1) | |
| grey | #808080 | (128,128,128) | (0, 0%, 50%, 1) | |
| dark grey | #A9A9A9 | (169,169,169) | (0, 0%, 66%, 1) | |
| silver | #C0C0C0 | (192,192,192) | (0, 0%, 75%, 1) | |
| light grey | #D3D3D3 | (211,211,211) | (0, 0%, 83%, 1) | |
| gainsboro | #DCDCDC | (220,220,220) | (0, 0%, 86%, 1) | |
| white smoke | #F5F5F5 | (245,245,245) | (0, 0%, 96%, 1) | |
| white | #FFFFFF | (255,255,255) | (0, 100%, 100%, 1) |
Key Points
- Hexa Values must begin with # symbol.
- Nearly 16 million colors are available.
- The Key words are the case sensitive.