Introduction
This chapter demonstrates about the HTML Color codes and Color Names. Colors are very useful to build a good looking web page, color codes are the combination of Red, Green and Blue following are the concepts covered.
- Html Colors and Coding methods
- Html Hexadecimal Codes
- Html Colors
Description
Html colors are used for better and good looking of the web page. Following are few attributes used for coloring the text or background.
Color coding methods
in order to set the coloring to the web page user need to follow few methods as listed below.
Html supported by different colors user can insert many colors to the web page. The code below used to insert the color to the web page.
[html]
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:red">
SPlessons color is red
</h2>
<h2 style="background-color:orange">
SPlessons color is orange
</h2>
<h2 style="background-color:yellow">
SPlessons color is yellow
</h2>
<h2 style="background-color:blue;color:white">
SPlessons color is blue
</h2>
<h2 style="background-color:cyan">
SPlessons color is cyan
</h2>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- text Used to set the color for the text.
- bgcolor Used to set the background color of web page.
- link Used to set the color for the linked list.
- alink Used to set the color for the selected links.
- Color names In order to get the colors into web page user can give the color names directly i.e Red, Green and Blue etc.
- Hex codes In order to get the colors into the web page user can give the Hex code which are six digit codes represents mixed colors Red, Blue and Green which gives different colors.
- Color Decimal Values Which is used to give the rgb( ) property.
Description
Combination of RGB colors can be represent by hexadecimal code which is a 6 digit code and are represented as
User can take these hexadecimal value from any of the graphic software like MS Paint, Adobe Photoshop and decimal value proceed by # or pound . The code below demonstrates giving background coloring to the web page by using the hexadecimal values.
[html]
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(255,0,0)">
splessons background color set by using rgb(255,0,0)
</h2>
<h2 style="background-color:rgb(0,255,0)">
splessons background color set by using rgb(0,255,0)
</h2>
<h2 style="background-color:rgb(0,0,255)">
splessons background color set by using rgb(0,0,255)
</h2>
<h2 style="background-color:rgb(255,255,0)">
splessons background color set by using rgb(255,255,0)
</h2>
<h2 style="background-color:rgb(255,0,255)">
splessons background color set by using rgb(255,0,255)
</h2>
<h2 style="background-color:rgb(0,255,255)">
splessons background color set by using rgb(0,255,255)
</h2>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates giving background coloring to the web page by using the hexadecimal values.
[html]
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(0,0,0);color:white">
splessons background color set by using rgb(0,0,0)
</h2>
<h2 style="background-color:rgb(128,128,128);color:white">
splessons background color set by using rgb(128,128,128)
</h2>
<h2 style="background-color:rgb(255,255,255);">
splessons background color set by using rgb(255,255,255)
</h2>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- RR- Represents first two digits
- GG- Represents second two digits
- BB- Represents remaining two digits.
Points
Html have the several colors and all the colors are supported by many browsers each and every color have different hexa value which are supported by all the computers as listed 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) | |
| coral | #FF7F50 | (255,127,80) | (16, 100%, 66%, 1) | |
| Indian Red | #CD5C5C | (205,92,92) | (0, 53%, 58%, 1) | |
| tomato | #FF6347 | (255,99,71) | (9, 100%, 64%, 1) | |
| Light Coral | #F08080 | (240, 128, 128) | (0, 79%, 72%, 1) | |
| salmon | #FA8072 | (250, 128, 114) | (6, 93%, 71%, 1) | |
| light salmon | #FFA07A | (255,160,122) | (17, 100%, 74%, 1) | |
| dark salmon | #E9967A | (233, 150, 122) | (15, 72%, 70%, 1) | |
| orange red | #FF4500 | (255,69,0) | (16, 100%, 50%, 1) | |
| dark orange | #FF8C00 | (255,140,0) | (33, 100%, 50%, 1) | |
| gold | #FFD700 | (255,215,0) | (51, 100%, 50%, 1) | |
| orange | #FFA500 | (255,165,0) | (39, 100%, 50%, 1) | |
| dark golden rod | #B8860B | (184,134,11) | (43, 89%, 38%, 1) | |
| golden rod | #DAA520 | (218,165,32) | (43, 74%, 49%, 1) | |
| dark kakhi | #BDB76B | (189,183,107) | (56, 38%, 58%, 1) | |
| kakhi | #F0E68C | (240,230,140) | (54, 77%, 75%, 1) | |
| pale golden Rod | #EEE8AA | (238,232,170) | (55, 67%, 80%, 1) | |
| olive | #808000 | (128,128,0) | (60, 100%, 25%, 1) | |
| yellow green | #9ACD32 | (154,205,50) | (80, 61%, 50%, 1) | |
| dark olive green | #556B2F | (85,107,47) | (82, 39%, 30%, 1) | |
| yellow | #FFFF00 | (255,255,0) | (60, 100%, 50%, 1) | |
| olive drab | #6B8E23 | (107,142,35) | (80, 60%, 35%, 1) | |
| lawn green | #7CFC00 | (124,252,0) | (90, 100%, 49%, 1) | |
| green yellow | #ADFF2F | (173,255,47) | (84, 100%, 59%, 1) | |
| dark green | #006400 | (0,100,0) | (120, 100%, 20%, 1) | |
| chart reuse | #7FFF00 | (127,255,0) | (90, 100%, 50%, 1) | |
| green | #008000 | (0,128,0) | (120, 100%, 25%, 1) | |
| lime | #00FF00 | (0,255,0) | (120, 100%, 50%, 1) | |
| forest green | #228B22 | (34,139,34) | (120, 61%, 34%, 1) | |
| lime green | #32CD32 | (50,205,50) | (120, 61%, 50%, 1) | |
| pale green | #98FB98 | (152,215,0) | (120, 93%, 79%, 1) | |
| dark sea green | #8FBC8F | (143,188,143) | (120, 25%, 65%, 1) | |
| lime green | #90EE90 | (144,238,144) | (120, 73%, 75%, 1) | |
| medium spring green | #00FA9A | (0,250,154) | (157, 100%, 49%, 1) | |
| sea green | #2E8B57 | (46,139,87) | (146, 50%, 36%, 1) | |
| medium aqua marine | #66CDAA | (102,205,170) | (160, 51%, 60%, 1) | |
| spring green | #00FF7F | (0,255,154) | (150, 100%, 50%, 1) | |
| medium sea green | #3CB371 | (60,179,113) | (147, 50%, 47%, 1) | |
| light sea green | #20B2AA | (32,178,170) | (177, 70%, 41%, 1) | |
| teal | #008080 | (0,128,128) | (180, 100%, 25%, 1) | |
| dark cyan | #008B8B | (0,139,139) | (180, 100%, 27%, 1) | |
| dark slate gray | #2F4F4F | (47,79,79) | (180, 25%, 25%, 1) | |
| aqua | #00FFFF | (0,255,255) | (180, 100%, 50%, 1) | |
| cyan | #00FFFF | (0,255,255) | (180, 100%, 50%, 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) | |
| light cyan | #E0FFFF | (224,255,255) | (180, 100%, 94%, 1) | |
| pale turquoise | #AFEEEE | (175,238,238) | (180, 65%, 81%, 1) | |
| powder blue | #B0E0E6 | (176,224,230) | (187, 52%, 80%, 1) | |
| cadet blue | #5F9EA0 | (95,158,160) | (182, 25%, 50%, 1) | |
| aqua marine | #7FFFD4 | (127,255,212) | (160, 100%, 75%, 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) | |
| aqua marine | #7FFFD4 | (127,255,212) | (160, 100%, 75%, 1) | |
| dodger blue | #1E90FF | (30,144,255) | (210, 100%, 56%, 1) | |
| sky blue | #87CEEB | (135,206,235) | (197, 71%, 73%, 1) | |
| light sky blue | #87CEFA | (135,206,250) | (203, 92%, 75%, 1) | |
| light blue | #ADD8E6 | (173,216,230) | (195, 53%, 79%, 1) | |
| midnight blue | #191970 | (25,25,112) | (240, 64%, 27%, 1) | |
| dark blue | #00008B | (0,0,139) | (240, 100%, 27%, 1) | |
| navy | #000080 | (0,0,128) | (240, 100%, 25%, 1) | |
| medium blue | #0000CD | (0,0,205) | (240, 100%, 40%, 1) | |
| blue | #0000FF | (0,0,255) | (240, 100%, 50%, 1) | |
| blue violet | #8A2BE2 | (138,43,226) | (271, 76%, 53%, 1) | |
| indigo | #4B0082 | (75,0,130) | (275, 100%, 25%, 1) | |
| royal blue | #4169E1 | (65,105,255) | (225, 73%, 57%, 1) | |
| dark slate blue | #483D8B | (72,61,139) | (248, 39%, 39%, 1) | |
| state blue | #6A5ACD | (106,90,205) | (248, 53%, 58%, 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) | |
| medium slate blue | #7B68EE | (123,104,238) | (249, 80%, 67%, 1) | |
| dark orchid | #9932CC | (153,50,204) | (280, 61%, 50%, 1) | |
| purple | #800080 | (128,0,128) | (300, 100%, 25%, 1) | |
| medium orchid | #BA55D3 | (186,85,211) | (288, 59%, 58%, 1) | |
| thistle | #D8BFD8 | (216,191,216) | (300, 24%, 80%, 1) | |
| plum | #DDA0DD | (221,160,221) | (300, 47%, 75%, 1) | |
| magenta | #FF00FF | (255,0,255) | (300, 100%, 50%, 1) | |
| orchid | #DA70D6 | (218,112,214) | (302, 59%, 65%, 1) | |
| violet | #EE82EE | (238,130,238) | (300, 76%, 72%, 1) | |
| medium violet red | #C71585 | (199,21,133) | (322, 81%, 43%, 1) | |
| deep pink | #FF1493 | (255,20,147) | (328, 100%, 54%, 1) | |
| hot pink | #FF69B4 | (255,105,180) | (330, 100%, 71%, 1) | |
| pale violet red | #DB7093 | (219,112,147) | (340, 60%, 65%, 1) | |
| light pink | #FFB6C1 | (255,182,193) | (351, 100%, 86%, 1) | |
| pink | #FFC0CB | (255,192,203) | (350, 100%, 88%, 1) | |
| beige | #F5F5DC | (245,245,220) | (60, 56%, 91%, 1) | |
| bisque | #FFE4C4 | (255,228,196) | (33, 100%, 88%, 1) | |
| antique white | #FAEBD7 | (250,235,215) | (34, 78%, 91%, 1) | |
| blanched almond | #FFEBCD | (255,235,205) | (36, 100%, 90%, 1) | |
| wheat | #F5DEB3 | (245,222,179) | (39, 77%, 83%, 1) | |
| lemon chiffon | #FFFACD | (255,250,205) | (54, 100%, 90%, 1) | |
| light golden rod yellow | #FAFAD2 | (250,250,210) | (60, 80%, 90%, 1) | |
| corn silk | #FFF8DC | (255,248,220) | (48, 100%, 93%, 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) | |
| sandy brown | #F4A460 | (244,164,96) | (28, 87%, 67%, 1) | |
| burly wood | #DEB887 | (222,184,135) | (34, 57%, 70%, 1) | |
| peru | #CD853F | (205,133,63) | (30, 59%, 53%, 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) | |
| 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) | |
| navajo white | #FFDEAD | (255,222,173) | (36, 100%, 84%, 1) | |
| papaya whip | #FFEFD5 | (255,239,213) | (37, 100%, 92%, 1) | |
| sea shell | #FFF5EE | (255,245,238) | (25, 100%, 97%, 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) | mint cream | #F5FFFA | (245,255,250) | (150, 100%, 98%, 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) | |
| ivory | #FFFFF0 | (255,255,240) | (60, 100%, 97%, 1) | |
| azure | #F0FFFF | (240,255,255) | (180, 100%, 97%, 1) | |
| honey dew | #F0FFF0 | (240,255,240) | (120, 100%, 97%, 1) | |
| snow | #FFFAFA | (255,250,250) | (0, 100%, 99%, 1) | |
| black | #000000 | (0,0,0) | (0, 0%, 0%, 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) | |
| dim gray | #696969 | (105,105,105) | (0, 0%, 41%, 1) | |
| light grey | #D3D3D3 | (211,211,211) | (0, 0%, 83%, 1) | |
| gainsboro | #DCDCDC | (220,220,220) | (0, 0%, 86%, 1) | |
| white | #FFFFFF | (255,255,255) | (0, 100%, 100%, 1) | |
| white smoke | #F5F5F5 | (245,245,245) | (0, 0%, 96%, 1) |
Key Points
- Red, Blue, Green are the basic colors of html.
- Hexadecimal codes are available in any graphic software.
- RGB value should be in between 0-255.