Css style colors names
The CSS data type is the name of a color, such as red , blue , black , or lightseagreen . Syntactically, a is an .
A value can be used anywhere a can be used.
Syntax
color: red; color: orange; color: tan; color: rebeccapurple; color: transparent;
Value
Named colors consists of standard colors, the transparent and currentcolor keywords.
Standard colors
Basic colors have standard, easy-to-remember names:
| Keyword | RGB hex value | Sample |
|---|---|---|
| black | #000000 | |
| silver | #c0c0c0 | |
| gray | #808080 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fuchsia | #ff00ff | |
| green | #008000 | |
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #00ffff |
In addition to these 16 colors, about 150 other colors have a keyword associated to them:
| Keyword | RGB hex value | Sample |
|---|---|---|
| aliceblue | #f0f8ff | |
| antiquewhite | #faebd7 | |
| aqua | #00ffff | |
| aquamarine | #7fffd4 | |
| azure | #f0ffff | |
| beige | #f5f5dc | |
| bisque | #ffe4c4 | |
| black | #000000 | |
| blanchedalmond | #ffebcd | |
| blue | #0000ff | |
| blueviolet | #8a2be2 | |
| brown | #a52a2a | |
| burlywood | #deb887 | |
| cadetblue | #5f9ea0 | |
| chartreuse | #7fff00 | |
| chocolate | #d2691e | |
| coral | #ff7f50 | |
| cornflowerblue | #6495ed | |
| cornsilk | #fff8dc | |
| crimson | #dc143c | |
| cyan | #00ffff (synonym of aqua ) | |
| darkblue | #00008b | |
| darkcyan | #008b8b | |
| darkgoldenrod | #b8860b | |
| darkgray | #a9a9a9 | |
| darkgreen | #006400 | |
| darkgrey | #a9a9a9 | |
| darkkhaki | #bdb76b | |
| darkmagenta | #8b008b | |
| darkolivegreen | #556b2f | |
| darkorange | #ff8c00 | |
| darkorchid | #9932cc | |
| darkred | #8b0000 | |
| darksalmon | #e9967a | |
| darkseagreen | #8fbc8f | |
| darkslateblue | #483d8b | |
| darkslategray | #2f4f4f | |
| darkslategrey | #2f4f4f | |
| darkturquoise | #00ced1 | |
| darkviolet | #9400d3 | |
| deeppink | #ff1493 | |
| deepskyblue | #00bfff | |
| dimgray | #696969 | |
| dimgrey | #696969 | |
| dodgerblue | #1e90ff | |
| firebrick | #b22222 | |
| floralwhite | #fffaf0 | |
| forestgreen | #228b22 | |
| fuchsia | #ff00ff | |
| gainsboro | #dcdcdc | |
| ghostwhite | #f8f8ff | |
| gold | #ffd700 | |
| goldenrod | #daa520 | |
| gray | #808080 | |
| green | #008000 | |
| greenyellow | #adff2f | |
| grey | #808080 (synonym of gray ) | |
| honeydew | #f0fff0 | |
| hotpink | #ff69b4 | |
| indianred | #cd5c5c | |
| indigo | #4b0082 | |
| ivory | #fffff0 | |
| khaki | #f0e68c | |
| lavender | #e6e6fa | |
| lavenderblush | #fff0f5 | |
| lawngreen | #7cfc00 | |
| lemonchiffon | #fffacd | |
| lightblue | #add8e6 | |
| lightcoral | #f08080 | |
| lightcyan | #e0ffff | |
| lightgoldenrodyellow | #fafad2 | |
| lightgray | #d3d3d3 | |
| lightgreen | #90ee90 | |
| lightgrey | #d3d3d3 | |
| lightpink | #ffb6c1 | |
| lightsalmon | #ffa07a | |
| lightseagreen | #20b2aa | |
| lightskyblue | #87cefa | |
| lightslategray | #778899 | |
| lightslategrey | #778899 | |
| lightsteelblue | #b0c4de | |
| lightyellow | #ffffe0 | |
| lime | #00ff00 | |
| limegreen | #32cd32 | |
| linen | #faf0e6 | |
| magenta | #ff00ff (synonym of fuchsia ) | |
| maroon | #800000 | |
| mediumaquamarine | #66cdaa | |
| mediumblue | #0000cd | |
| mediumorchid | #ba55d3 | |
| mediumpurple | #9370db | |
| mediumseagreen | #3cb371 | |
| mediumslateblue | #7b68ee | |
| mediumspringgreen | #00fa9a | |
| mediumturquoise | #48d1cc | |
| mediumvioletred | #c71585 | |
| midnightblue | #191970 | |
| mintcream | #f5fffa | |
| mistyrose | #ffe4e1 | |
| moccasin | #ffe4b5 | |
| navajowhite | #ffdead | |
| navy | #000080 | |
| oldlace | #fdf5e6 | |
| olive | #808000 | |
| olivedrab | #6b8e23 | |
| orange | #ffa500 | |
| orangered | #ff4500 | |
| orchid | #da70d6 | |
| palegoldenrod | #eee8aa | |
| palegreen | #98fb98 | |
| paleturquoise | #afeeee | |
| palevioletred | #db7093 | |
| papayawhip | #ffefd5 | |
| peachpuff | #ffdab9 | |
| peru | #cd853f | |
| pink | #ffc0cb | |
| plum | #dda0dd | |
| powderblue | #b0e0e6 | |
| purple | #800080 | |
| rebeccapurple | #663399 | |
| red | #ff0000 | |
| rosybrown | #bc8f8f | |
| royalblue | #4169e1 | |
| saddlebrown | #8b4513 | |
| salmon | #fa8072 | |
| sandybrown | #f4a460 | |
| seagreen | #2e8b57 | |
| seashell | #fff5ee | |
| sienna | #a0522d | |
| silver | #c0c0c0 | |
| skyblue | #87ceeb | |
| slateblue | #6a5acd | |
| slategray | #708090 | |
| slategrey | #708090 | |
| snow | #fffafa | |
| springgreen | #00ff7f | |
| steelblue | #4682b4 | |
| tan | #d2b48c | |
| teal | #008080 | |
| thistle | #d8bfd8 | |
| tomato | #ff6347 | |
| transparent | See transparent. | |
| turquoise | #40e0d0 | |
| violet | #ee82ee | |
| wheat | #f5deb3 | |
| white | #ffffff | |
| whitesmoke | #f5f5f5 | |
| yellow | #ffff00 | |
| yellowgreen | #9acd32 |
Initially, in CSS Level 1, only 16 basic colors were defined, with orange added in CSS Level 2. Web designers found this list too short, and browser vendors added numerous names for colors based on the X11 color names. In SVG 1.0, then in CSS Colors Level 3, these names got standardized, formally defined, and made uniform (some had different spellings that are now aliases). They are called extended color keywords, X11 colors, or SVG colors.
In CSS Colors Level 4, an additional color, rebeccapurple was added to honor web pioneer Eric Meyer.
transparent
The transparent keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, transparent is a shortcut for rgba(0,0,0,0) .
To prevent unexpected behavior, such as in a , the current CSS spec states that transparent should be calculated in the alpha-premultiplied color space. However, be aware that older browsers may treat it as black with an alpha value of 0 .
The transparent keyword wasn’t a true color in CSS Level 2 (Revision 1). It was a special keyword that could be used instead of a regular value on two CSS properties: background and border . It was essentially added to allow developers to override an inherited solid color. With the advent of alpha channels in CSS Colors Level 3, transparent was redefined as a true color. It can now be used wherever a value can be used.
Description
All names specify a color in the sRGB color space. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the terms used.
The color keywords all represent plain, solid colors without transparency.
Several keywords are aliases for each other:
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
Though many keywords have been adapted from X11, their RGB values may differ from the corresponding color on X11 systems since manufacturers sometimes tailor X11 colors to their specific hardware.
CSS color codes
For all elements of the same type. Put code in tag in the head section:
Example
Setting paragraph text color to red:
Setting color of specific paragraph:
Setting color of all paragraphs
Setting element background color
Example
Setting paragraph background color to red:
Setting background color of specific paragraph:
Setting background color of all paragraphs:
Setting element border color
element < border-color: topcode rightcode bottomcode leftcode >
Example
Setting paragraph border color to red, green, blue and black:
Setting border color of specific paragraph:
Setting border color of all paragraphs:
Red colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| 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) |
Orange colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| 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) |
Yellow colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| lightyellow | #FFFFE0 | rgb(255,255,224) | |
| lemonchiffon | #FFFACD | rgb(255,250,205) | |
| lightgoldenrodyellow | #FAFAD2 | rgb(250,250,210) | |
| 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) |
Green colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| lawngreen | #7CFC00 | rgb(124,252,0) | |
| chartreuse | #7FFF00 | rgb(127,255,0) | |
| limegreen | #32CD32 | rgb(50,205,50) | |
| lime | #00FF00 | rgb(0.255.0) | |
| forestgreen | #228B22 | rgb(34,139,34) | |
| green | #008000 | rgb(0,128,0) | |
| darkgreen | #006400 | rgb(0,100,0) | |
| greenyellow | #ADFF2F | rgb(173,255,47) | |
| yellowgreen | #9ACD32 | rgb(154,205,50) | |
| springgreen | #00FF7F | rgb(0,255,127) | |
| mediumspringgreen | #00FA9A | rgb(0,250,154) | |
| lightgreen | #90EE90 | rgb(144,238,144) | |
| palegreen | #98FB98 | rgb(152,251,152) | |
| darkseagreen | #8FBC8F | rgb(143,188,143) | |
| mediumseagreen | #3CB371 | rgb(60,179,113) | |
| seagreen | #2E8B57 | rgb(46,139,87) | |
| olive | #808000 | rgb(128,128,0) | |
| darkolivegreen | #556B2F | rgb(85,107,47) | |
| olivedrab | #6B8E23 | rgb(107,142,35) |
Cyan colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| lightcyan | #E0FFFF | rgb(224,255,255) | |
| cyan | #00FFFF | rgb(0,255,255) | |
| aqua | #00FFFF | rgb(0,255,255) | |
| aquamarine | #7FFFD4 | rgb(127,255,212) | |
| mediumaquamarine | #66CDAA | rgb(102,205,170) | |
| paleturquoise | #AFEEEE | rgb(175,238,238) | |
| turquoise | #40E0D0 | rgb(64,224,208) | |
| mediumturquoise | #48D1CC | rgb(72,209,204) | |
| darkturquoise | #00CED1 | rgb(0,206,209) | |
| lightseagreen | #20B2AA | rgb(32,178,170) | |
| cadetblue | #5F9EA0 | rgb(95,158,160) | |
| darkcyan | #008B8B | rgb(0,139,139) | |
| teal | #008080 | rgb(0,128,128) |
Blue colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| powderblue | #B0E0E6 | rgb(176,224,230) | |
| lightblue | #ADD8E6 | rgb(173,216,230) | |
| lightskyblue | #87CEFA | rgb(135,206,250) | |
| skyblue | #87CEEB | rgb(135,206,235) | |
| deepskyblue | #00BFFF | rgb(0,191,255) | |
| lightsteelblue | #B0C4DE | rgb(176,196,222) | |
| dodgerblue | #1E90FF | rgb(30,144,255) | |
| cornflowerblue | #6495ED | rgb(100,149,237) | |
| steelblue | #4682B4 | rgb(70,130,180) | |
| royalblue | #4169E1 | rgb(65,105,225) | |
| blue | #0000FF | rgb(0,0,255) | |
| mediumblue | #0000CD | rgb(0,0,205) | |
| darkblue | #00008B | rgb(0,0,139) | |
| navy | #000080 | rgb(0,0,128) | |
| midnightblue | #191970 | rgb(25,25,112) | |
| mediumslateblue | #7B68EE | rgb(123,104,238) | |
| slateblue | #6A5ACD | rgb(106,90,205) | |
| darkslateblue | #483D8B | rgb(72,61,139) |
Purple colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| lavender | #E6E6FA | rgb(230,230,250) | |
| thistle | #D8BFD8 | rgb(216,191,216) | |
| plum | #DDA0DD | rgb(221,160,221) | |
| violet | #EE82EE | rgb(238,130,238) | |
| orchid | #DA70D6 | rgb(218,112,214) | |
| fuchsia | #FF00FF | rgb(255,0,255) | |
| magenta | #FF00FF | rgb(255,0,255) | |
| mediumorchid | #BA55D3 | rgb(186,85,211) | |
| mediumpurple | #9370DB | rgb(147,112,219) | |
| blueviolet | #8A2BE2 | rgb(138,43,226) | |
| darkviolet | #9400D3 | rgb(148,0,211) | |
| darkorchid | #9932CC | rgb(153,50,204) | |
| darkmagenta | #8B008B | rgb(139,0,139) | |
| purple | #800080 | rgb(128,0,128) | |
| indigo | #4B0082 | rgb(75,0,130) |
Pink colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| pink | #FFC0CB | rgb(255,192,203) | |
| lightpink | #FFB6C1 | rgb(255,182,193) | |
| hotpink | #FF69B4 | rgb(255,105,180) | |
| deeppink | #FF1493 | rgb(255,20,147) | |
| palevioletred | #DB7093 | rgb(219,112,147) | |
| mediumvioletred | #C71585 | rgb(199,21,133) |
White colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| white | #FFFFFF | rgb(255,255,255) | |
| snow | #FFFAFA | rgb(255,250,250) | |
| honeydew | #F0FFF0 | rgb(240,255,240) | |
| mintcream | #F5FFFA | rgb(245,255,250) | |
| azure | #F0FFFF | rgb(240,255,255) | |
| aliceblue | #F0F8FF | rgb(240,248,255) | |
| ghostwhite | #F8F8FF | rgb(248,248,255) | |
| whitesmoke | #F5F5F5 | rgb(245,245,245) | |
| seashell | #FFF5EE | rgb(255,245,238) | |
| beige | #F5F5DC | rgb(245,245,220) | |
| oldlace | #FDF5E6 | rgb(253,245,230) | |
| floralwhite | #FFFAF0 | rgb(255,250,240) | |
| ivory | #FFFFF0 | rgb(255,255,240) | |
| antiquewhite | #FAEBD7 | rgb(250,235,215) | |
| linen | #FAF0E6 | rgb(250,240,230) | |
| lavenderblush | #FFF0F5 | rgb(255,240,245) | |
| mistyrose | #FFE4E1 | rgb(255,228,225) |
Gray colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| gainsboro | #DCDCDC | rgb(220,220,220) | |
| lightgray | #D3D3D3 | rgb(211,211,211) | |
| silver | #C0C0C0 | rgb(192,192,192) | |
| darkgray | #A9A9A9 | rgb(169,169,169) | |
| gray | #808080 | rgb(128,128,128) | |
| dimgray | #696969 | rgb(105,105,105) | |
| lightslategray | #778899 | rgb(119,136,153) | |
| slategray | #708090 | rgb(112,128,144) | |
| darkslategray | #2F4F4F | rgb(47,79,79) | |
| black | #000000 | rgb(0,0,0) |
Brown colors
| Color | HTML / CSS Color Name | Hex Code #RRGGBB | Decimal Code (R,G,B) |
|---|---|---|---|
| cornsilk | #FFF8DC | rgb(255,248,220) | |
| blanchedalmond | #FFEBCD | rgb(255,235,205) | |
| bisque | #FFE4C4 | rgb(255,228,196) | |
| navajowhite | #FFDEAD | rgb(255,222,173) | |
| 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) | |
| goldenrod | #DAA520 | rgb(218,165,32) | |
| peru | #CD853F | rgb(205,133,63) | |
| chocolate | #D2691E | rgb(210,105,30) | |
| saddlebrown | #8B4513 | rgb(139,69,19) | |
| sienna | #A0522D | rgb(160,82,45) | |
| brown | #A52A2A | rgb(165,42,42) | |
| maroon | #800000 | rgb(128,0,0) |