HTML Tutorial | Basic HTML Elements | HTML Color
There are three ways to represent colors in HTML.
- Representing colors by color name
- Representing colors by RGB color value
- Representing colors by hexadecimal color value
Representing Colors by Name
The 16 standard HTML4 color names and sRGB values defined by W3C are as follows.
There are 16 basic color keywords, and color names are case-insensitive.
| Color name | Hex rgb | Decimal |
|---|---|---|
| black | #000000 | 0,0,0 |
| silver | #C0C0C0 | 192,192,192 |
| gray | #808080 | 128,128,128 |
| white | #FFFFFF | 255,255,255 |
| maroon | #800000 | 128,0,0 |
| red | #FF0000 | 255,0,0 |
| purple | #800080 | 128,0,128 |
| fuchsia | #FF00FF | 255,0,255 |
| green | #008000 | 0,128,0 |
| lime | #00FF00 | 0,255,0 |
| olive | #808000 | 128,128,0 |
| yellow | #FFFF00 | 255,255,0 |
| navy | #000080 | 0,0,128 |
| blue | #0000FF | 0,0,255 |
| teal | #008080 | 0,128,128 |
| aqua | #00FFFF | 0,255,255 |
Today, major browsers support all 147 color names.
| Color name | Hex rgb | Decimal |
|---|---|---|
| aliceblue | #F0F8FF | 240,248,255 |
| antiquewhite | #FAEBD7 | 250,235,215 |
| aqua | #00FFFF | 0,255,255 |
| aquamarine | #7FFFD4 | 127,255,212 |
| azure | #F0FFFF | 240,255,255 |
| beige | #F5F5DC | 245,245,220 |
| bisque | #FFE4C4 | 255,228,196 |
| black | #000000 | 0,0,0 |
| blanchedalmond | #FFEBCD | 255,235,205 |
| blue | #0000FF | 0,0,255 |
| blueviolet | #8A2BE2 | 138,43,226 |
| brown | #A52A2A | 165,42,42 |
| burlywood | #DEB887 | 222,184,135 |
| cadetblue | #5F9EA0 | 95,158,160 |
| chartreuse | #7FFF00 | 127,255,0 |
| chocolate | #D2691E | 210,105,30 |
| coral | #FF7F50 | 255,127,80 |
| cornflowerblue | #6495ED | 100,149,237 |
| cornsilk | #FFF8DC | 255,248,220 |
| crimson | #DC143C | 220,20,60 |
| cyan | #00FFFF | 0,255,255 |
| darkblue | #00008B | 0,0,139 |
| darkcyan | #008B8B | 0,139,139 |
| darkgoldenrod | #B8860B | 184,134,11 |
| darkgray | #A9A9A9 | 169,169,169 |
| darkgreen | #006400 | 0,100,0 |
| darkgrey | #A9A9A9 | 169,169,169 |
| darkkhaki | #BDB76B | 189,183,107 |
| darkmagenta | #8B008B | 139,0,139 |
| darkolivegreen | #556B2F | 85,107,47 |
| darkorange | #FF8C00 | 255,140,0 |
| darkorchid | #9932CC | 153,50,204 |
| darkred | #8B0000 | 139,0,0 |
| darksalmon | #E9967A | 233,150,122 |
| darkseagreen | #8FBC8F | 143,188,143 |
| darkslateblue | #483D8B | 72,61,139 |
| darkslategray | #2F4F4F | 47,79,79 |
| darkslategrey | #2F4F4F | 47,79,79 |
| darkturquoise | #00CED1 | 0,206,209 |
| darkviolet | #9400D3 | 148,0,211 |
| deeppink | #FF1493 | 255,20,147 |
| deepskyblue | #00BFFF | 0,191,255 |
| dimgray | #696969 | 105,105,105 |
| dimgrey | #696969 | 105,105,105 |
| dodgerblue | #1E90FF | 30,144,255 |
| firebrick | #B22222 | 178,34,34 |
| floralwhite | #FFFAF0 | 255,250,240 |
| forestgreen | #228B22 | 34,139,34 |
| fuchsia | #FF00FF | 255,0,255 |
| gainsboro | #DCDCDC | 220,220,220 |
| ghostwhite | #F8F8FF | 248,248,255 |
| gold | #FFD700 | 255,215,0 |
| goldenrod | #DAA520 | 218,165,32 |
| gray | #808080 | 128,128,128 |
| green | #008000 | 0,128,0 |
| greenyellow | #ADFF2F | 173,255,47 |
| grey | #808080 | 128,128,128 |
| honeydew | #F0FFF0 | 240,255,240 |
| hotpink | #FF69B4 | 255,105,180 |
| indianred | #CD5C5C | 205,92,92 |
| indigo | #4B0082 | 75,0,130 |
| ivory | #FFFFF0 | 255,255,240 |
| khaki | #F0E68C | 240,230,140 |
| lavender | #E6E6FA | 230,230,250 |
| lavenderblush | #FFF0F5 | 255,240,245 |
| lawngreen | #7CFC00 | 124,252,0 |
| lemonchiffon | #FFFACD | 255,250,205 |
| lightblue | #ADD8E6 | 173,216,230 |
| lightcoral | #F08080 | 240,128,128 |
| lightcyan | #E0FFFF | 224,255,255 |
| lightgoldenrodyellow | #FAFAD2 | 250,250,210 |
| lightgray | #D3D3D3 | 211,211,211 |
| lightgreen | #90EE90 | 144,238,144 |
| lightgrey | #D3D3D3 | 211,211,211 |
| lightpink | #FFB6C1 | 255,182,193 |
| lightsalmon | #FFA07A | 255,160,122 |
| lightseagreen | #20B2AA | 32,178,170 |
| lightskyblue | #87CEFA | 135,206,250 |
| lightslategray | #778899 | 119,136,153 |
| lightslategrey | #778899 | 119,136,153 |
| lightsteelblue | #B0C4DE | 176,196,222 |
| lightyellow | #FFFFE0 | 255,255,224 |
| lime | #00FF00 | 0,255,0 |
| limegreen | #32CD32 | 50,205,50 |
| linen | #FAF0E6 | 250,240,230 |
| magenta | #FF00FF | 255,0,255 |
| maroon | #800000 | 128,0,0 |
| mediumaquamarine | #66CDAA | 102,205,170 |
| mediumblue | #0000CD | 0,0,205 |
| mediumorchid | #BA55D3 | 186,85,211 |
| mediumpurple | #9370DB | 147,112,219 |
| mediumseagreen | #3CB371 | 60,179,113 |
| mediumslateblue | #7B68EE | 123,104,238 |
| mediumspringgreen | #00FA9A | 0,250,154 |
| mediumturquoise | #48D1CC | 72,209,204 |
| mediumvioletred | #C71585 | 199,21,133 |
| midnightblue | #191970 | 25,25,112 |
| mintcream | #F5FFFA | 245,255,250 |
| mistyrose | #FFE4E1 | 255,228,225 |
| moccasin | #FFE4B5 | 255,228,181 |
| navajowhite | #FFDEAD | 255,222,173 |
| navy | #000080 | 0,0,128 |
| oldlace | #FDF5E6 | 253,245,230 |
| olive | #808000 | 128,128,0 |
| olivedrab | #6B8E23 | 107,142,35 |
| orange | #FFA500 | 255,165,0 |
| orangered | #FF4500 | 255,69,0 |
| orchid | #DA70D6 | 218,112,214 |
| palegoldenrod | #EEE8AA | 238,232,170 |
| palegreen | #98FB98 | 152,251,152 |
| paleturquoise | #AFEEEE | 175,238,238 |
| palevioletred | #DB7093 | 219,112,147 |
| papayawhip | #FFEFD5 | 255,239,213 |
| peachpuff | #FFDAB9 | 255,218,185 |
| peru | #CD853F | 205,133,63 |
| pink | #FFC0CB | 255,192,203 |
| plum | #DDA0DD | 221,160,221 |
| powderblue | #B0E0E6 | 176,224,230 |
| purple | #800080 | 128,0,128 |
| red | #FF0000 | 255,0,0 |
| rosybrown | #BC8F8F | 188,143,143 |
| royalblue | #4169E1 | 65,105,225 |
| saddlebrown | #8B4513 | 139,69,19 |
| salmon | #FA8072 | 250,128,114 |
| sandybrown | #F4A460 | 244,164,96 |
| seagreen | #2E8B57 | 46,139,87 |
| seashell | #FFF5EE | 255,245,238 |
| sienna | #A0522D | 160,82,45 |
| silver | #C0C0C0 | 192,192,192 |
| skyblue | #87CEEB | 135,206,235 |
| slateblue | #6A5ACD | 106,90,205 |
| slategray | #708090 | 112,128,144 |
| slategrey | #708090 | 112,128,144 |
| snow | #FFFAFA | 255,250,250 |
| springgreen | #00FF7F | 0,255,127 |
| steelblue | #4682B4 | 70,130,180 |
| tan | #D2B48C | 210,180,140 |
| teal | #008080 | 0,128,128 |
| thistle | #D8BFD8 | 216,191,216 |
| tomato | #FF6347 | 255,99,71 |
| turquoise | #40E0D0 | 64,224,208 |
| violet | #EE82EE | 238,130,238 |
| wheat | #F5DEB3 | 245,222,179 |
| white | #FFFFFF | 255,255,255 |
| whitesmoke | #F5F5F5 | 245,245,245 |
| yellow | #FFFF00 | 255,255,0 |
| yellowgreen | #9ACD32 | 154,205,50 |
The following example uses the color names above.
<div style="color:blue">Blue represented by a color name (blue)</div>
<div style="color:green">Green represented by a color name (green)</div>
<div style="color:silver">Silver represented by a color name (silver)</div>
<div style="color:teal">Teal represented by a color name (teal)</div>
<div style="color:red">Red represented by a color name (red)</div>
Representing Colors by RGB Value
Monitors and screens represent colors by mixing red, green, and blue.
HTML also uses RGB colors, which represent colors with these three components.
Each RGB primary color (Red, Green, Blue) has a range from 0 to 255.
<div style="color:rgb(0,0,255)">Blue represented by an RGB color value (0,0,255)</div>
<div style="color:rgb(0,128,0)">Green represented by an RGB color value (0,128,0)</div>
<div style="color:rgb(192,192,192)">Silver represented by an RGB color value (192,192,192)</div>
<div style="color:rgb(0,128,128)">Teal represented by an RGB color value (0,128,128)</div>
<div style="color:rgb(255,0,0)">Red represented by an RGB color value (255,0,0)</div>
Representing Colors by Hex RGB (Hexadecimal) Value
A Hex RGB (hexadecimal) color value is an RGB color value converted into hexadecimal.
Therefore, each primary color (Red, Green, Blue) has a range from 00 to FF.
For example, the RGB color value for red, rgb(255,0,0), becomes #FF0000 as a hexadecimal color value.
<div style="color:#0000FF">Blue represented by a hexadecimal color value (#0000FF)</div>
<div style="color:#008000">Green represented by a hexadecimal color value (#008000)</div>
<div style="color:#C0C0C0">Silver represented by a hexadecimal color value (#C0C0C0)</div>
<div style="color:#008080">Teal represented by a hexadecimal color value (#008080)</div>
<div style="color:#FF0000">Red represented by a hexadecimal color value (#FF0000)</div>