HTML Hex Color Codes
Example: In this example, we simply print the different hex color codes by using the background-color style in HTML heading tag.
HTML
<!DOCTYPE html><html><head> <title>HTML Hex Color Codes</title></head><body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#808000;">#808000</h2> <h2 style="background-color:#CD5C5C;">#CD5C5C</h2> <h2 style="background-color:#FFA07A;">#FFA07A</h2> <h2 style="background-color:#DC143C;">#DC143C</h2></body></html> |
Output:
HTML Color Codes are the medium of representing the colors format that a computer could read and display. The most used Color codes are Hex codes. Hex codes are three-byte hexadecimal numbers (consist of six variables), with a pair of characters in the Hex code, representing the intensity of red, green, and blue in the color respectively.
Format of Hex Color Codes: Each Hex color code contains the symbol “#” followed by 6 alphabets or numbers. Numbers are in the hexadecimal numeric system. There are 1,67,77,216 different color possibilities. 00 value range of the code represents the lowest intensity of color on the other hand FF value range of code represents the highest intensity.
Meaning of a Hex code:
- The 1st and 2nd variable in Hex color code represents the intensity of red color.
- The 3rd and 4th variable represents the intensity of green.
- The 5th and 6th variable represents the intensity of blue.
- By combining the intensities of red, green, and blue almost any color can be made.
The white color is a mixture of the three primary colors at full intensity representing the Hex color code #FFFFFF.
The black color is a mixture of the three primary colors at the lowest intensity representing the color code #000000.
Example:
HTML
<!DOCTYPE html><html><head> <title>HTML Hex Color Codes Examples</title></head><body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#FF0000;">#FF0000</h2> <h2 style="background-color:#00FF00;">#00FF00</h2> <h2 style="background-color:#0000FF;">#0000FF</h2> <h2 style="background-color:#FFFF00;">#FFFF00</h2> <h2 style="background-color:#CCEEFF;">#CCEEFF</h2></body></html> |
Output:
#FF0000 – This HTML color code shows just red and no green and no blue.
#00FF00 – This HTML color code shows just green and no red and blue.
#0000FF – This HTML color code shows just blue and no red and green.
#FFFF00 – This HTML color code is a mixture of red and green colors defined as yellow.
#CCEEFF – This HTML color code is a mixture of more green and maximum blue provides color like the sky.
List of some common HTML color codes:
COLOR NAME | HEX COLOR CODE | RGB COLOR CODE |
|---|---|---|
SILVER | #C0C0C0 | RGB(192, 192, 192) |
GRAY | #808080 | RGB(128, 128, 128) |
MAROON | #800000 | RGB(128, 0, 0) |
OLIVE | #808000 | RGB(128, 128, 0) |
LIME | #00FF00 | RGB(0, 255, 0) |
AQUA | #00FFFF | RGB(0, 255, 255) |
TEAL | #008080 | RGB(0, 128, 128) |
NAVY | #000080 | RGB(0, 0, 128) |
FUCHSIA | #FF00FF | RGB(255, 0, 255) |
PURPLE | #800080 | RGB(128, 0, 128) |
INDIANRED | #CD5C5C | RGB(205, 92, 92) |
LIGHTCORAL | #F08080 | RGB(240, 128, 128) |
SALMON | #FA8072 | RGB(250, 128, 114) |
DARKSALMON | #E9967A | RGB(233, 150, 122) |
LIGHTSALMON | #FFA07A | RGB(255, 160, 122) |
Hex Color Codes with the saturation of basic single colors and lightness of that colors that can be used:
Shades of RED Colors:
Example:
Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
lightsalmon | #FFA07A | rgb(255,160,122) |
salmon | #FA8072 | rgb(250,128,114) |
darksalmon | #E9967A | rgb(233,150,122) |
lightcoral | #F08080 | rgb(240,128,128) |
indianred | #CD5C5C | rgb(205,92,92) |
crimson | #DC143C | rgb(220,20,60) |
firebrick | #B22222 | rgb(178,34,34) |
red | #FF0000 | rgb(255,0,0) |
darkred | #8B0000 | rgb(139,0,0) |
HTML
<!DOCTYPE html><html><head> <title>Shades of Red Colors</title></head><body> <h1>Welcome To GeeksforGeeks</h1> <h2 style="background-color:#FFA07A;">#FFA07A</h2> <h2 style="background-color:#FA8072;">#FA8072</h2> <h2 style="background-color:#FF0000;">#FF0000</h2> <h2 style="background-color:#8B0000;">#8B0000</h2></body></html> |
Output:
Similarly, We can have shades of other colors as well.
Shades of ORANGE Colors:
Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
coral | #FF7F50 | rgb(255,127,80) |
tomato | #FF6347 | rgb(255,99,71) |
orangered | #FF4500 | rgb(255,69,0) |
gold | #FFD700 | rgb(255,215,0) |
orange | #FFA500 | rgb(255,165,0) |
darkorange | #FF8C00 | rgb(255,140,0) |
Shades of YELLOW Colors:
Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
lightyellow | #FFFFE0 | rgb(255,255,224) |
lemonchiffon | #FFFACD | rgb(255,250,205) |
papayawhip | #FFEFD5 | rgb(255,239,213) |
moccasin | #FFE4B5 | rgb(255,228,181) |
peachpuff | #FFDAB9 | rgb(255,218,185) |
palegoldenrod | #EEE8AA | rgb(238,232,170) |
khaki | #F0E68C | rgb(240,230,140) |
darkkhaki | #BDB76B | rgb(189,183,107) |
yellow | #FFFF00 | rgb(255,255,0) |
Shades of GREEN Colors:
Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
lawngreen | #7CFC00 | rgb(124,252,0) |
limegreen | #32CD32 | rgb(50,205,50) |
lime | #00FF00 | rgb(0,255,0) |
forestgreen | #228B22 | rgb(34,139,34) |
darkgreen | #006400 | rgb(0,100,0) |
springgreen | #00FF7F | rgb(0,255,127) |
mediumspringgreen | #00FA9A | rgb(0,250,154) |
palegreen | #98FB98 | rgb(152,251,152) |
seagreen | #2E8B57 | rgb(46,139,87) |
Shades of BLUE Colors:
Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
powderblue | #B0E0E6 | rgb(176,224,230) |
lightskyblue | #87CEFA | rgb(135,206,250) |
skyblue | #87CEEB | rgb(135,206,235) |
deepskyblue | #00BFFF | rgb(0,191,255) |
dodgerblue | #1E90FF | rgb(30,144,255) |
cornflowerblue | #6495ED | rgb(100,149,237) |
steelblue | #4682B4 | rgb(70,130,180) |
royalblue | #4169E1 | rgb(65,105,225) |
mediumblue | #0000CD | rgb(0,0,205) |
Shades of WHITE Colors:
| Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
| snow | #FFFAFA | rgb(255,250,250) |
| honeydew | #F0FFF0 | rgb(240,255,240) |
| azure | #F0FFFF | rgb(240,255,255) |
| ghostwhite | #F8F8FF | rgb(248,248,255) |
| whitesmoke | #F5F5F5 | rgb(245,245,245) |
| mintcream | #F5FFFA | rgb(245,255,250) |
| ivory | #FFFFF0 | rgb(255,255,240) |
| floralwhite | #FFFAF0 | rgb(255,250,240) |
| antiquewhite | #FAEBD7 | rgb(250,235,215) |
Shades of BROWN Colors:
| Color Name | HTML Color Code | RGB Color Code |
|---|---|---|
| blanchedalmond | #FFEBCD | rgb(255,235,205) |
| bisque | #FFE4C4 | rgb(255,228,196) |
| wheat | #F5DEB3 | rgb(245,222,179) |
| burlywood | #DEB887 | rgb(222,184,135) |
| tan | #D2B48C | rgb(210,180,140) |
| rosybrown | #BC8F8F | rgb(188,143,143) |
| sandybrown | #F4A460 | rgb(244,164,96) |
| chocolate | #D2691E | rgb(210,105,30) |
| saddlebrown | #8B4513 | rgb(139,69,19) |
| sienna | #A0522D | rgb(160,82,45) |
| brown | #A52A2A | rgb(165,42,42) |
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Please Login to comment...