HTML - SPLessons

HTML Color Names

Chapter 24

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Color Names

HTML Color Names

shape 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

Html Colors and Coding methods

shape 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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Html Hexadecimal Codes

shape 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.

<!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>

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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Html Colors

shape 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)

Summary

shape 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.