<color>

  • Revision slug: Web/CSS/color_value
  • Revision title: color (CSS data type)
  • Revision id: 439485
  • Created:
  • Creator: mkupper
  • Is current revision? No
  • Comment The color #deb887 in the HTML for burlywood is correct. The '87' in the color is 135 decimal, not 35

Revision Content

{{ CSSRef() }}

Summary

The <color> CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:

Note that the list of accepted color values have been extended as the specification has evolved, culminating with the latest CSS3 colors.

Associated with the color in the sRGB space, a <color> value also consists of an alpha-channel coordinate, transparency value, indicating how the color should composite with its background color.

Though CSS color values are precisely defined, they may appear differently on different output devices. Most of them are not calibrated, and some browsers do not support output devices' color profile. Without these, color rendering may vary a lot.

Note:  The WCAG 2.0 recommendation from the W3C strongly advises web authors not to use color as the only mean to convey a specific information, action or result. Some users have problem to distinguish colors and the conveyed information may not be grasped. Of course, this doesn't prevent the usage of color, only its usage as the only mean to describe some information.

Interpolation

Values of the <color> CSS data type can be interpolated in order to perform animations or for creating <gradient> values. In that case they are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear. In animations, the speed of the interpolation is determined by the timing function associated with the animation.

Values

There are several ways to describe a <color> value.

Color keywords

Color keywords are case-insensitive identifiers which represent a specific color, e.g. red, blue, brown, lightseagreen. The name describes the color, though it is mostly artificial. The list of accepted values varied a lot through the different specification:

  • CSS Level 1 only accepted 16 basic colors, named the VGA colors as they were taken from the set of displayable colors on VGA graphic cards.
  • CSS Level 2 added the orange keyword.
  • From the beginning, browsers accepted other colors, mostly the X11 named colors list as some early browsers were X11 applications, though with a few differences. SVG 1.0 was the first standard to formally define these keywords; CSS Colors Level 3 also formally defined these keywords. They are often referred as the extended color keywords, the X11 colors, the SVG colors.

There are a few caveats to consider when using keywords:

  • Except the 16 basic colors which are common with HTML, the others cannot be used in HTML. HTML will convert these unknown values with a specific algorithm which will lead to completely different colors. These keywords should only be used in SVG & CSS.
  • Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.
  • No keyword-defined colors in CSS have any transparency, they are plain, solid colors.
  • Several keywords denote the same colors:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategray
  • Though the names of the keywords have been taken by the usual X11 color names, the color may diverge from the corresponding system color on X11 system as these are tailored for the specific hardware by the manufacturer .
Specifications Color Keyword RGB cubic coordinates Live Example
CSS3 CSS2 CSS1   black =rgb(  0,   0,   0)

 

  silver =rgb(192, 192, 192)  
  gray[*] =rgb(128, 128, 128)  
  white =rgb(255, 255, 255)  
  maroon =rgb(128,   0,   0)  
  red =rgb(255,   0,   0)  
  purple =rgb(128,   0, 128)  
  fuchsia =rgb(255,   0, 255)  
  green =rgb(  0, 128,   0)  
  lime =rgb(  0, 255,   0)  
  olive =rgb(128, 128,   0)  
  yellow =rgb(255, 255,   0)  
  navy =rgb(  0,   0, 128)  
  blue =rgb(  0,   0, 255)  
  teal =rgb(  0, 128, 128)  
  aqua =rgb(  0, 255, 255)  
    orange =rgb(255, 165,   0)  
    aliceblue =rgb(240, 248, 245)  
  antiquewhite =rgb(250, 235, 215)  
  aquamarine =rgb(127, 255, 212)  
  azure =rgb(240, 255, 255)  
  beige =rgb(245, 245, 220)  
  bisque =rgb(255, 228, 196)  
  blanchedalmond =rgb(255, 235, 205)  
  blueviolet =rgb(138,  43, 226)  
  brown =rgb(165,  42,  42)  
  burlywood =rgb(222, 184, 135)  
  cadetblue =rgb( 95, 158, 160)  
  chartreuse =rgb(127, 255,   0)  
  chocolate =rgb(210, 105,  30)  
  coral =rgb(255, 127,  80)  
  cornflowerblue =rgb(100, 149, 237)  
  cornsilk =rgb(255, 248, 220)  
  crimson =rgb(220,  20,  60)  
  darkblue =rgb(  0,   0, 139)  
  darkcyan =rgb(  0, 139, 139)  
  darkgoldenrod =rgb(184, 134,  11)  
  darkgray[*] =rgb(169, 169, 169)  
  darkgreen =rgb(  0, 100,   0)  
  darkgrey[*] =rgb(169, 169, 169)  
  darkkhaki =rgb(189, 183, 107)  
  darkmagenta =rgb(139,   0, 139)  
  darkolivegreen =rgb( 85, 107,  47)  
  darkorange =rgb(255, 140,   0)  
  darkorchid =rgb(153,  50, 204)  
  darkred =rgb(139,   0,   0)  
  darksalmon =rgb(233, 150, 122)  
  darkseagreen =rgb(143, 188, 143)  
  darkslateblue =rgb( 72,  61, 139)  
  darkslategray[*] =rgb( 47,  79,  79)  
  darkslategrey[*] =rgb( 47,  79,  79)  
  darkturquoise =rgb(  0, 206, 209)  
  darkviolet =rgb(148,   0, 211)  
  deeppink =rgb(255,  20, 147)  
  deepskyblue =rgb(  0, 191, 255)  
  dimgray[*] =rgb(105, 105, 105)  
  dimgrey[*] =rgb(105, 105, 105)  
  dodgerblue =rgb( 30, 144, 255)  
  firebrick =rgb(178,  34,  34)  
  floralwhite =rgb(255, 250, 240)  
  forestgreen =rgb( 34, 139,  34)  
  gainsboro =rgb(220, 220, 220)  
  ghostwhite =rgb(248, 248, 255)  
  gold =rgb(255, 215,   0)  
  goldenrod =rgb(218, 165,  32)  
  greenyellow =rgb(173, 255,  47)  
  grey =rgb(128, 128, 128)  
  honeydew =rgb(240, 255, 240)  
  hotpink =rgb(255, 105, 180)  
  indianred =rgb(205,  92,  92)  
  indigo =rgb( 75,  0, 130)  
  ivory =rgb(255, 255, 240)  
  khaki =rgb(240, 230, 140)  
  lavender =rgb(230, 230, 250)  
  lavenderblush =rgb(255, 240, 245)  
  lawngreen =rgb(124, 252, 0)  
  lemonchiffon =rgb(255, 250, 205)  
  lightblue =rgb(173, 216, 230)  
  lightcoral =rgb(240, 128, 128)  
  lightcyan =rgb(224, 255, 255)  
  lightgoldenrodyellow =rgb(250, 250, 210)  
  lightgray[*] =rgb(211, 211, 211)  
  lightgreen =rgb(144, 238, 144)  
  lightgrey[*] =rgb(211, 211, 211)  
  lightpink =rgb(255, 182, 193)  
  lightsalmon =rgb(255, 160, 122)  
  lightseagreen =rgb( 32, 178, 170)  
  lightskyblue =rgb(135, 206, 250)  
  lightslategray[*] =rgb(119, 136, 153)  
  lightslategrey[*] =rgb(119, 136, 153)  
  lightsteelblue =rgb(176, 196, 222)  
  lightyellow =rgb(255, 255, 224)  
  limegreen =rgb( 50, 205,  50)  
  linen =rgb(250, 240, 230)  
  mediumaquamarine =rgb(102, 205, 170)  
  mediumblue =rgb(  0,   0, 205)  
  mediumorchid =rgb(186,  85, 211)  
  mediumpurple =rgb(147, 112, 219)  
  mediumseagreen =rgb( 60, 179, 113)  
  mediumslateblue =rgb(123, 104, 238)  
  mediumspringgreen =rgb(  0, 250, 154)  
  mediumturquoise =rgb( 72, 209, 204)  
  mediumvioletred =rgb(199,  21, 133)  
  midnightblue =rgb( 25,  25, 112)  
  mintcream =rgb(245, 255, 250)  
  mistyrose =rgb(255, 228, 225)  
  moccasin =rgb(255, 228, 181)  
  navajowhite =rgb(255, 222, 173)  
  oldlace =rgb(253, 245, 230)  
  olivedrab =rgb(107, 142,  35)  
  orangered =rgb(255,  69,   0)  
  orchid =rgb(218, 112, 214)  
  palegoldenrod =rgb(238, 232, 170)  
  palegreen =rgb(152, 251, 152)  
  paleturquoise =rgb(175, 238, 238)  
  palevioletred =rgb(219, 112, 147)  
  papayawhip =rgb(255, 239, 213)  
  peachpuff =rgb(255, 218, 185)  
  peru =rgb(205, 133,  63)  
  pink =rgb(255, 192, 203)  
  plum =rgb(221, 160, 221)  
  powderblue =rgb(176, 224, 230)  
  rosybrown =rgb(188, 143, 143)  
  royalblue =rgb( 65, 105, 225)  
  saddlebrown =rgb(139,  69,  19)  
  salmon =rgb(250, 128, 114)  
  sandybrown =rgb(244, 164,  96)  
  seagreen =rgb( 46, 139,  87)  
  seashell =rgb(255, 245, 238)  
  sienna =rgb(160,  82,  45)  
  skyblue =rgb(135, 206, 235)  
  slateblue =rgb(106,  90, 205)  
  slategray[*] =rgb(112, 128, 144)  
  slategrey[*] =rgb(112, 128, 144)  
  snow =rgb(255, 250, 250)  
  springgreen =rgb(  0, 255, 127)  
  steelblue =rgb( 70, 130, 180)  
  tan =rgb(210, 180, 140)  
  thistle =rgb(216, 191, 216)  
  tomato =rgb(255,  99,  71)  
  turquoise =rgb( 64, 224, 208)  
  violet =rgb(238, 130, 238)  
  wheat =rgb(245, 222, 179)  
  whitesmoke =rgb(245, 245, 245)  
  yellowgreen =rgb(154, 205,  50)  

transparent keyword

The transparent keyword represents a fully transparent color, i.e. the color seen will be the background color. Technically, it is a black with alpha channel at its maximum and is a shortcut for rgba(0,0,0,0).

Historical Note
The transparent keyword wasn't a true color in CSS Level 2 (Revision 1). It was a specific keyword that could be used in place of a regular <color> value on two CSS properties: {{ Cssxref("background") }} and {{ Cssxref("border") }}. It was essentially added to allow to override an inherited solid colors.

With the support of opacity through alpha channels, transparent was redefined as a true color in CSS Colors Level 3 allowing its use in any place where a <color> value is required, like the {{ Cssxref("color") }} property.[**]

currentColor keyword

The currentColor keyword represents the calculated value of the element's {{ Cssxref("color") }} property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

It can also be used on properties that inherit the calculated value of the element's {{ Cssxref("color") }} property and will be equivalent to the inherit keyword on these elements, if any.

Live example

The color of the line (a color-filled div) adapts to the color of its {{ Cssxref("color") }} property, inherited from its parent

<div style="color:darkred">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div> 
The color of this text is the same as the one of the line:
.
Some more text.
<div style="color:blue">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div> 
The color of this text is the same as the one of the line:
.
Some more text.

rgb()

{{cssanchor("rgb")}}Colors can be defined using the red-green-blue (RGB) model in two ways:

Hexadecimal notation #RRGGBB and #RGB
  • "#", followed by six hexadecimal characters (0-9, A-F).
  • "#", followed by three hexadecimal characters (0-9, A-F).
The three-digit RGB notation (#RGB) and the six-digit form (#RRGGBB) are equal.
For example, #f03 and #ff0033represent the same color.
Functional Notation rgb(R,G,B)
"rgb", followed by three {{ Xref_cssinteger() }} or three {{ Xref_csspercentage() }} values.
The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.
/* These examples all specify the same RGB color: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

hsl()

{{cssanchor("hsl")}}Colors also can be defined the Hue-saturation-lightness model (HSL) using the hsl() functional notation.  The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless {{ Xref_cssnumber() }}. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.

Saturation and lightness are represented as percentages.
100% is full saturation, and0% is a shade of grey.
100% lightness is white, 0% lightness is black, and 50% lightness is "normal".

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

rgba()

{{cssanchor("rgba")}}Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

hsla()

{{cssanchor("hsla")}}Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the hsla() functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 

System Colors

Not all system colors are supported on all systems. {{ deprecated_inline() }} for use on public web pages.

ActiveBorder
Active window border.
ActiveCaption
Active window caption.  Should be used with CaptionText foreground color.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face background color for 3-D elements that appear 3-D due to one layer of surrounding border.  Should be used with ButtonText foreground color.
ButtonHighlight
The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow
The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText
Text on push buttons.  Should be used with ButtonFace or ThreeDFace background color.
CaptionText
Text in caption, size box, and scrollbar arrow box.  Should be used with ActiveCaption background color.
GrayText
Grayed (disabled) text.
Highlight
Item(s) selected in a control.  Should be used with HighlightText foreground color.
HighlightText
Text of item(s) selected in a control.  Should be used with Highlight background color.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.  Should be used with InactiveCaptionText foreground color.
InactiveCaptionText
Color of text in an inactive caption.  Should be used with InactiveCaption background color.
InfoBackground
Background color for tooltip controls.  Should be used with InfoText foreground color.
InfoText
Text color for tooltip controls.  Should be used with InfoBackground background color.
Menu
Menu background.  Should be used with MenuText or -moz-MenuBarText foreground color.
MenuText
Text in menus.  Should be used with Menu background color.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDFace
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.  Should be used with ButtonText foreground color.
ThreeDHighlight
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDLightShadow
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
Window
Window background.  Should be used with WindowText foreground color.
WindowFrame
Window frame.
WindowText
Text in windows.  Should be used with Window background color.

Mozilla System Color Extensions

-moz-ButtonDefault
The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget.  Should be used with -moz-CellHighlightText foreground color.  See also -moz-html-CellHighlight.
-moz-CellHighlightText
Text color for a selected item in a tree.  Should be used with -moz-CellHighlight background color.  See also -moz-html-CellHighlightText.
-moz-Combobox
{{ Gecko_minversion_inline("1.9.2") }} Background color for comboboxes.  Should be used with -moz-ComboboxText foreground color.  In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
{{ Gecko_minversion_inline("1.9.2") }} Background Text color for comboboxes.  Should be used with -moz-ComboboxText foreground color.  In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Background color for dialog boxes.  Should be used with -moz-DialogText foreground color.
-moz-DialogText
Text color for dialog boxes.  Should be used with -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
{{ gecko_minversion_inline("1.9") }} Background color for even-numbered rows in a tree.  Should be used with -moz-FieldText foreground color.  In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.
-moz-Field
textfield background color.  Should be used with -moz-FieldText foreground color.
-moz-FieldText
textfield foreground color.  Should be used with -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background colors.
-moz-html-CellHighlight
{{ gecko_minversion_inline("1.9") }} Background color for highlighted item in HTML select.  Should be used with -moz-html-CellHighlightText foreground color.  Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText
{{ gecko_minversion_inline("1.9") }} Background color for highlighted item in HTML select.  Should be used with -moz-html-CellHighlight background color.  Prior to Gecko 1.9, use -moz-CellHighlightText.
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
{{ Gecko_minversion_inline("1.9.1") }}
-moz-mac-chrome-inactive
{{ Gecko_minversion_inline("1.9.1") }}
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover
Background color for hovered menu item.  Often similar to Highlight.  Should be used with -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText
Foreground color for hovered menu item.  Often similar to HighlightText.  Should be used with -moz-MenuHover background color.
-moz-MenuBarText
{{ Gecko_minversion_inline("1.9.2") }} Foreground color for text in menu bars.  Often similar to MenuText.  Should be used on top of Menu background.
-moz-MenuBarHoverText
Foreground color for hovered text in menu bars.  Often similar to -moz-MenuHoverText.  Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext
{{ Gecko_minversion_inline("1.9.1") }} default platform hyperlink color
-moz-OddTreeRow
{{ gecko_minversion_inline("1.9") }} Background color for odd-numbered rows in a tree.  Should be used with -moz-FieldText foreground color.  In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-EvenTreeRow.
-moz-win-communicationstext
{{ gecko_minversion_inline("1.9") }} Should be used for text in objects with appearance:-moz-win-communications-toolbox.
-moz-win-mediatext
{{ gecko_minversion_inline("1.9") }} Should be used for text in objects with appearance:-moz-win-media-toolbox.

Mozilla Color Preference Extensions

-moz-activehyperlinktext
User's preference for text color of active links.  Should be used against default document background.
 
-moz-default-background-color
{{ Gecko_minversion_inline("5.0") }} User's preference for document background-color.
 
-moz-default-color
{{ Gecko_minversion_inline("5.0") }} User's preference for text color.
-moz-hyperlinktext
User's preference for text color of unvisited links.  Should be used against default document background.
-moz-visitedhyperlinktext
User's preference for text color of visited links.  Should be used against default document background.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Colors', '#colorunits', '<color>') }} {{ Spec2('CSS3 Colors') }} Deprecated system-colors; added SVG colors; added rgba(), hsl(), hsla() functional notation.
{{ SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>') }} {{ Spec2('CSS2.1') }} Added the orange color and the system-colors.
{{ SpecName('CSS1', '#color-units', '<color>') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
keywords colors 1.0 1.0 (1.0) 3.0 [*] 3.5 1.0 (85)
#RRGGBB | #RGB 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
rgb (R,G,B) 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
hsl (H,S,L) 1.0 1.0 (1.5) 9.0 9.5 3.1 (525)
rgba (R,G,B,a) 1.0 3.0 (1.9) 9.0 # 10.0 3.1 (525)
hsla (H,S,L,a) 1.0 3.0 (1.9) 9.0 # 10.0 3.1 (525)
currentColor 1.0 1.5 (1.8) 9.0 9.5 4.0 (528)
transparent 1.0 3.0 (1.9) 9.0 [**] 10.0 3.1 (525)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[*] The 'e'-grey colors (with an e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) are only supported since IE 8.0. IE 3 to IE 6 only support the 'a' variants: gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[**]  IE 7-8 supports transparent only for {{ Cssxref("background") }} and {{ Cssxref("border") }}. color:transparent is drawn black in IE.

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>&lt;color&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type denotes a color in the <a class="external" href="http://en.wikipedia.org/wiki/SRGB" title="http://en.wikipedia.org/wiki/SRGB">sRGB color space</a>. A color can be described in any of these ways:</p>
<ul>
  <li>using a <em>keyword</em></li>
  <li>using the <a class="external" href="http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation" title="http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">RGB cubic-coordinate</a> system (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)</li>
  <li>using the <a class="external" href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="http://en.wikipedia.org/wiki/HSL_and_HSV">HSL cylindrical-coordinate</a> system (via the <code>hsl()</code> and <code>hsla()</code> functional notations)</li>
</ul>
<p>Note that the list of accepted color values have been extended as the specification has evolved, culminating with the latest CSS3 colors.</p>
<p>Associated with the color in the sRGB space, a <code>&lt;color&gt;</code> value also consists of an <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing" title="http://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a> coordinate, <em>transparency</em> value, indicating how the color should <a class="external" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">composite</a> with its background color.</p>
<p>Though CSS color values are precisely defined, they may appear differently on different output devices. Most of them are not calibrated, and some browsers do not support output devices' <a class="external" href="http://en.wikipedia.org/wiki/ICC_profile" title="http://en.wikipedia.org/wiki/ICC_profile">color profile</a>. Without these, color rendering may vary a lot.</p>
<div class="note">
  <strong>Note:&nbsp;</strong> The <a class="external" href="http://www.w3.org/TR/WCAG/#visual-audio-contrast" title="http://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> recommendation from the W3C strongly advises web authors not to use <em>color</em> as the only mean to convey a specific information, action or result. Some users have problem to distinguish colors and the conveyed information may not be grasped. Of course, this doesn't prevent the usage of color, only its usage as the only mean to describe some information.</div>
<h2 id="Interpolation">Interpolation</h2>
<p>Values of the <code>&lt;color&gt;</code> CSS data type can be interpolated in order to perform animations or for creating <code>&lt;gradient&gt;</code> values. In that case they are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the <a class="external" href="http://www.gimp.org/docs/plug-in/appendix-alpha.html" title="http://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-premultiplied sRGBA color space</a> to prevent unexpected grey colors to appear. In animations, the speed of the interpolation is determined by the <a href="/en/CSS/timing-function" title="timing-function">timing function</a> associated with the animation.</p>
<h2 id="Values">Values</h2>
<p>There are several ways to describe a <code>&lt;color&gt;</code> value.</p>
<h3 id="Color_keywords">Color keywords</h3>
<p>Color keywords are case-insensitive identifiers which represent a specific color, e.g. <code>red, blue, brown, lightseagreen</code>. The name describes the color, though it is mostly artificial. The list of accepted values varied a lot through the different specification:</p>
<ul>
  <li>CSS Level 1 only accepted 16 basic colors, named the <em>VGA colors</em> as they were taken from the set of displayable colors on <a class="external" href="http://en.wikipedia.org/wiki/VGA" title="http://en.wikipedia.org/wiki/VGA">VGA</a> graphic cards.</li>
  <li>CSS Level 2 added the <code>orange</code> keyword.</li>
  <li>From the beginning, browsers accepted other colors, mostly the X11 named colors list as some early browsers were X11 applications, though with a few differences. SVG 1.0 was the first standard to formally define these keywords; CSS Colors Level 3 also formally defined these keywords. They are often referred as the <em>extended color keywords</em>, the <em>X11 colors</em>, the <em>SVG colors</em>.</li>
</ul>
<p>There are a few caveats to consider when using keywords:</p>
<ul>
  <li>Except the 16 basic colors which are common with HTML, the others cannot be used in HTML. HTML will convert these unknown values with a specific algorithm which will lead to completely different colors. These keywords should only be used in SVG &amp; CSS.</li>
  <li>Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.</li>
  <li>No keyword-defined colors in CSS have any transparency, they are plain, solid colors.</li>
  <li>Several keywords denote the same colors:
    <ul>
      <li><code>darkgray</code> / <code>darkgrey</code></li>
      <li><code>darkslategray</code> / <code>darkslategrey</code></li>
      <li><code>dimgray</code> / <code>dimgrey</code></li>
      <li><code>lightgray</code> / <code>lightgrey</code></li>
      <li><code>lightslategray</code> / <code>lightslategrey</code></li>
      <li><code>gray</code> / <code>grey</code></li>
      <li><code>slategray</code> / <code>slategray</code></li>
    </ul>
  </li>
  <li>Though the names of the keywords have been taken by the usual X11 color names, the color may diverge from the corresponding system color on X11 system as these are tailored for the specific hardware by the manufacturer .</li>
</ul>
<table border="1" cellpadding="1" cellspacing="1">
  <thead>
    <tr>
      <th colspan="3" rowspan="1" scope="col" style="width:3em;">Specifications</th>
      <th scope="col" style="width:6em;">Color</th>
      <th scope="col">Keyword</th>
      <th scope="col">RGB cubic coordinates</th>
      <th scope="col" style="width:6em;">Live Example</th>
    </tr>
  </thead>
  <tbody>
    <tr style="position:relative;">
      <td class="column verticalText" rowspan="17">CSS3</td>
      <td class="column verticalText" rowspan="16">CSS2</td>
      <td class="verticalText" rowspan="16">CSS1</td>
      <td style="background:#000">&nbsp;</td>
      <td style="text-align: center;"><code>black</code></td>
      <td><code>=rgb(&nbsp; 0,&nbsp;&nbsp; 0,&nbsp;&nbsp; 0)</code></td>
      <td style="background:black">
        <div class="warning">
          <p>&nbsp;</p>
        </div>
      </td>
    </tr>
    <tr>
      <td style="background:#C0C0C0">&nbsp;</td>
      <td style="text-align: center;"><code>silver</code></td>
      <td><code>=rgb(192, 192, 192)</code></td>
      <td style="background:silver">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#808080">&nbsp;</td>
      <td style="text-align: center;"><code>gray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(128, 128, 128)</code></td>
      <td style="background:gray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#FFF">&nbsp;</td>
      <td style="text-align: center;"><code>white</code></td>
      <td><code>=rgb(255, 255, 255)</code></td>
      <td style="background:white">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#800000">&nbsp;</td>
      <td style="text-align: center;"><code>maroon</code></td>
      <td><code>=rgb(128,&nbsp;&nbsp; 0,&nbsp;&nbsp; 0)</code></td>
      <td style="background:maroon">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#F00">&nbsp;</td>
      <td style="text-align: center;"><code>red</code></td>
      <td><code>=rgb(255,&nbsp;&nbsp; 0,&nbsp;&nbsp; 0)</code></td>
      <td style="background:red">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#800080">&nbsp;</td>
      <td style="text-align: center;"><code>purple</code></td>
      <td><code>=rgb(128,&nbsp;&nbsp; 0, 128)</code></td>
      <td style="background:purple">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#F0F">&nbsp;</td>
      <td style="text-align: center;"><code>fuchsia</code></td>
      <td><code>=rgb(255,&nbsp;&nbsp; 0, 255)</code></td>
      <td style="background:fuchsia">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#008000">&nbsp;</td>
      <td style="text-align: center;"><code>green</code></td>
      <td><code>=rgb(&nbsp; 0, 128,&nbsp;&nbsp; 0)</code></td>
      <td style="background:green">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#0F0">&nbsp;</td>
      <td style="text-align: center;"><code>lime</code></td>
      <td><code>=rgb(&nbsp; 0, 255,&nbsp;&nbsp; 0)</code></td>
      <td style="background:lime">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#808000">&nbsp;</td>
      <td style="text-align: center;"><code>olive</code></td>
      <td><code>=rgb(128, 128,&nbsp;&nbsp; 0)</code></td>
      <td style="background:olive">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#FF0">&nbsp;</td>
      <td style="text-align: center;"><code>yellow</code></td>
      <td><code>=rgb(255, 255,&nbsp;&nbsp; 0)</code></td>
      <td style="background:yellow">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#000080">&nbsp;</td>
      <td style="text-align: center;"><code>navy</code></td>
      <td><code>=rgb(&nbsp; 0,&nbsp;&nbsp; 0, 128)</code></td>
      <td style="background:navy">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00F">&nbsp;</td>
      <td style="text-align: center;"><code>blue</code></td>
      <td><code>=rgb(&nbsp; 0,&nbsp;&nbsp; 0, 255)</code></td>
      <td style="background:blue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#008080">&nbsp;</td>
      <td style="text-align: center;"><code>teal</code></td>
      <td><code>=rgb(&nbsp; 0, 128, 128)</code></td>
      <td style="background:teal">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#0FF">&nbsp;</td>
      <td style="text-align: center;"><code>aqua</code></td>
      <td><code>=rgb(&nbsp; 0, 255, 255)</code></td>
      <td style="background:aqua">&nbsp;</td>
    </tr>
    <tr>
      <td class="bottomPart" colspan="2">&nbsp;</td>
      <td style="background:#FFA500">&nbsp;</td>
      <td style="text-align: center;"><code>orange</code></td>
      <td><code>=rgb(255, 165,&nbsp;&nbsp; 0)</code></td>
      <td style="background:orange">&nbsp;</td>
    </tr>
    <tr>
      <td class="bottomPart" colspan="3" rowspan="128">&nbsp;</td>
      <td style="background:#f0f8ff">&nbsp;</td>
      <td style="text-align: center;"><code>aliceblue</code></td>
      <td><code>=rgb(240, 248, 245)</code></td>
      <td style="background:aliceblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#faebd7">&nbsp;</td>
      <td style="text-align: center;"><code>antiquewhite</code></td>
      <td><code>=rgb(250, 235, 215)</code></td>
      <td style="background:antiquewhite">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#7fffd4">&nbsp;</td>
      <td style="text-align: center;"><code>aquamarine</code></td>
      <td><code>=rgb(127, 255, 212)</code></td>
      <td style="background:aquamarine">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f0ffff">&nbsp;</td>
      <td style="text-align: center;"><code>azure</code></td>
      <td><code>=rgb(240, 255, 255)</code></td>
      <td style="background:azure">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f5f5dc">&nbsp;</td>
      <td style="text-align: center;"><code>beige</code></td>
      <td><code>=rgb(245, 245, 220)</code></td>
      <td style="background:beige">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffe4c4">&nbsp;</td>
      <td style="text-align: center;"><code>bisque</code></td>
      <td><code>=rgb(255, 228, 196)</code></td>
      <td style="background:bisque">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffebcd">&nbsp;</td>
      <td style="text-align: center;"><code>blanchedalmond</code></td>
      <td><code>=rgb(255, 235, 205)</code></td>
      <td style="background:blanchedalmond">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#8a2be2">&nbsp;</td>
      <td style="text-align: center;"><code>blueviolet</code></td>
      <td><code>=rgb(138,&nbsp; 43, 226)</code></td>
      <td style="background:blueviolet">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#a52a2a">&nbsp;</td>
      <td style="text-align: center;"><code>brown</code></td>
      <td><code>=rgb(165,&nbsp; 42,&nbsp; 42)</code></td>
      <td style="background:brown">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#deb887">&nbsp;</td>
      <td style="text-align: center;"><code>burlywood</code></td>
      <td><code>=rgb(222, 184, 135)</code></td>
      <td style="background:burlywood">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#5f9ea0">&nbsp;</td>
      <td style="text-align: center;"><code>cadetblue</code></td>
      <td><code>=rgb( 95, 158, 160)</code></td>
      <td style="background:cadetblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#7fff00">&nbsp;</td>
      <td style="text-align: center;"><code>chartreuse</code></td>
      <td><code>=rgb(127, 255,&nbsp;&nbsp; 0)</code></td>
      <td style="background:chartreuse">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#d2691e">&nbsp;</td>
      <td style="text-align: center;"><code>chocolate</code></td>
      <td><code>=rgb(210, 105,&nbsp; 30)</code></td>
      <td style="background:chocolate">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff7f50">&nbsp;</td>
      <td style="text-align: center;"><code>coral</code></td>
      <td><code>=rgb(255, 127,&nbsp; 80)</code></td>
      <td style="background:coral">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#6495ed">&nbsp;</td>
      <td style="text-align: center;"><code>cornflowerblue</code></td>
      <td><code>=rgb(100, 149, 237)</code></td>
      <td style="background:cornflowerblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fff8dc">&nbsp;</td>
      <td style="text-align: center;"><code>cornsilk</code></td>
      <td><code>=rgb(255, 248, 220)</code></td>
      <td style="background:cornsilk">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#dc143c">&nbsp;</td>
      <td style="text-align: center;"><code>crimson</code></td>
      <td><code>=rgb(220,&nbsp; 20,&nbsp; 60)</code></td>
      <td style="background:crimson">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00008b">&nbsp;</td>
      <td style="text-align: center;"><code>darkblue</code></td>
      <td><code>=rgb(&nbsp; 0, &nbsp; 0, 139)</code></td>
      <td style="background:darkblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#008b8b">&nbsp;</td>
      <td style="text-align: center;"><code>darkcyan</code></td>
      <td><code>=rgb(&nbsp; 0, 139, 139)</code></td>
      <td style="background:darkcyan">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#b8860b">&nbsp;</td>
      <td style="text-align: center;"><code>darkgoldenrod</code></td>
      <td><code>=rgb(184, 134,&nbsp; 11)</code></td>
      <td style="background:darkgoldenrod">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#a9a9a9">&nbsp;</td>
      <td style="text-align: center;"><code>darkgray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(169, 169, 169)</code></td>
      <td style="background:darkgray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#006400">&nbsp;</td>
      <td style="text-align: center;"><code>darkgreen</code></td>
      <td><code>=rgb(&nbsp; 0, 100, &nbsp; 0)</code></td>
      <td style="background:darkgreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#a9a9a9">&nbsp;</td>
      <td style="text-align: center;"><code>darkgrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(169, 169, 169)</code></td>
      <td style="background:darkgrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#bdb76b">&nbsp;</td>
      <td style="text-align: center;"><code>darkkhaki</code></td>
      <td><code>=rgb(189, 183, 107)</code></td>
      <td style="background:darkkhaki">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#8b008b">&nbsp;</td>
      <td style="text-align: center;"><code>darkmagenta</code></td>
      <td><code>=rgb(139, &nbsp; 0, 139)</code></td>
      <td style="background:darkmagenta">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#556b2f">&nbsp;</td>
      <td style="text-align: center;"><code>darkolivegreen</code></td>
      <td><code>=rgb( 85, 107,&nbsp; 47)</code></td>
      <td style="background:darkolivegreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff8c00">&nbsp;</td>
      <td style="text-align: center;"><code>darkorange</code></td>
      <td><code>=rgb(255, 140, &nbsp; 0)</code></td>
      <td style="background:darkorange">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#9932cc">&nbsp;</td>
      <td style="text-align: center;"><code>darkorchid</code></td>
      <td><code>=rgb(153,&nbsp; 50, 204)</code></td>
      <td style="background:darkorchid">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#8b0000">&nbsp;</td>
      <td style="text-align: center;"><code>darkred</code></td>
      <td><code>=rgb(139, &nbsp; 0, &nbsp; 0)</code></td>
      <td style="background:darkred">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#e9967a">&nbsp;</td>
      <td style="text-align: center;"><code>darksalmon</code></td>
      <td><code>=rgb(233, 150, 122)</code></td>
      <td style="background:darksalmon">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#8fbc8f">&nbsp;</td>
      <td style="text-align: center;"><code>darkseagreen</code></td>
      <td><code>=rgb(143, 188, 143)</code></td>
      <td style="background:darkseagreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#483d8b">&nbsp;</td>
      <td style="text-align: center;"><code>darkslateblue</code></td>
      <td><code>=rgb( 72,&nbsp; 61, 139)</code></td>
      <td style="background:darkslateblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#2f4f4f">&nbsp;</td>
      <td style="text-align: center;"><code>darkslategray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb( 47,&nbsp; 79,&nbsp; 79)</code></td>
      <td style="background:darkslategray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#2f4f4f">&nbsp;</td>
      <td style="text-align: center;"><code>darkslategrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb( 47,&nbsp; 79,&nbsp; 79)</code></td>
      <td style="background:darkslategrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00ced1">&nbsp;</td>
      <td style="text-align: center;"><code>darkturquoise</code></td>
      <td><code>=rgb(&nbsp; 0, 206, 209)</code></td>
      <td style="background:darkturquoise">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#9400d3">&nbsp;</td>
      <td style="text-align: center;"><code>darkviolet</code></td>
      <td><code>=rgb(148, &nbsp; 0, 211)</code></td>
      <td style="background:darkviolet">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff1493">&nbsp;</td>
      <td style="text-align: center;"><code>deeppink</code></td>
      <td><code>=rgb(255,&nbsp; 20, 147)</code></td>
      <td style="background:deeppink">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00bfff">&nbsp;</td>
      <td style="text-align: center;"><code>deepskyblue</code></td>
      <td><code>=rgb(&nbsp; 0, 191, 255)</code></td>
      <td style="background:deepskyblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#696969">&nbsp;</td>
      <td style="text-align: center;"><code>dimgray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(105, 105, 105)</code></td>
      <td style="background:dimgray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#696969">&nbsp;</td>
      <td style="text-align: center;"><code>dimgrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(105, 105, 105)</code></td>
      <td style="background:dimgrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#1e90ff">&nbsp;</td>
      <td style="text-align: center;"><code>dodgerblue</code></td>
      <td><code>=rgb( 30, 144, 255)</code></td>
      <td style="background:dodgerblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#b22222">&nbsp;</td>
      <td style="text-align: center;"><code>firebrick</code></td>
      <td><code>=rgb(178,&nbsp; 34,&nbsp; 34)</code></td>
      <td style="background:firebrick">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fffaf0">&nbsp;</td>
      <td style="text-align: center;"><code>floralwhite</code></td>
      <td><code>=rgb(255, 250, 240)</code></td>
      <td style="background:floralwhite">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#228b22">&nbsp;</td>
      <td style="text-align: center;"><code>forestgreen</code></td>
      <td><code>=rgb( 34, 139,&nbsp; 34)</code></td>
      <td style="background:forestgreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#dcdcdc">&nbsp;</td>
      <td style="text-align: center;"><code>gainsboro</code></td>
      <td><code>=rgb(220, 220, 220)</code></td>
      <td style="background:gainsboro">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f8f8ff">&nbsp;</td>
      <td style="text-align: center;"><code>ghostwhite</code></td>
      <td><code>=rgb(248, 248, 255)</code></td>
      <td style="background:ghostwhite">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffd700">&nbsp;</td>
      <td style="text-align: center;"><code>gold</code></td>
      <td><code>=rgb(255, 215,&nbsp;&nbsp; 0)</code></td>
      <td style="background:gold">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#daa520">&nbsp;</td>
      <td style="text-align: center;"><code>goldenrod</code></td>
      <td><code>=rgb(218, 165,&nbsp; 32)</code></td>
      <td style="background:goldenrod">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#adff2f">&nbsp;</td>
      <td style="text-align: center;"><code>greenyellow</code></td>
      <td><code>=rgb(173, 255,&nbsp; 47)</code></td>
      <td style="background:greenyellow ">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#808080">&nbsp;</td>
      <td style="text-align: center;"><code>grey</code></td>
      <td><code>=rgb(128, 128, 128)</code></td>
      <td style="background:grey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f0fff0">&nbsp;</td>
      <td style="text-align: center;"><code>honeydew</code></td>
      <td><code>=rgb(240, 255, 240)</code></td>
      <td style="background:honeydew">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff69b4">&nbsp;</td>
      <td style="text-align: center;"><code>hotpink</code></td>
      <td><code>=rgb(255, 105, 180)</code></td>
      <td style="background:hotpink">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#cd5c5c">&nbsp;</td>
      <td style="text-align: center;"><code>indianred</code></td>
      <td><code>=rgb(205,&nbsp; 92,&nbsp; 92)</code></td>
      <td style="background:indianred">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#4b0082">&nbsp;</td>
      <td style="text-align: center;"><code>indigo</code></td>
      <td><code>=rgb( 75,&nbsp; 0, 130)</code></td>
      <td style="background:indigo">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fffff0">&nbsp;</td>
      <td style="text-align: center;"><code>ivory</code></td>
      <td><code>=rgb(255, 255, 240)</code></td>
      <td style="background:ivory">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f0e68c">&nbsp;</td>
      <td style="text-align: center;"><code>khaki</code></td>
      <td><code>=rgb(240, 230, 140)</code></td>
      <td style="background:khaki">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#e6e6fa">&nbsp;</td>
      <td style="text-align: center;"><code>lavender</code></td>
      <td><code>=rgb(230, 230, 250)</code></td>
      <td style="background:lavender">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fff0f5">&nbsp;</td>
      <td style="text-align: center;"><code>lavenderblush</code></td>
      <td><code>=rgb(255, 240, 245)</code></td>
      <td style="background:lavenderblush ">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#7cfc00">&nbsp;</td>
      <td style="text-align: center;"><code>lawngreen</code></td>
      <td><code>=rgb(124, 252, 0)</code></td>
      <td style="background:lawngreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fffacd">&nbsp;</td>
      <td style="text-align: center;"><code>lemonchiffon</code></td>
      <td><code>=rgb(255, 250, 205)</code></td>
      <td style="background:lemonchiffon">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#add8e6">&nbsp;</td>
      <td style="text-align: center;"><code>lightblue</code></td>
      <td><code>=rgb(173, 216, 230)</code></td>
      <td style="background:lightblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f08080">&nbsp;</td>
      <td style="text-align: center;"><code>lightcoral</code></td>
      <td><code>=rgb(240, 128, 128)</code></td>
      <td style="background:lightcoral">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#e0ffff">&nbsp;</td>
      <td style="text-align: center;"><code>lightcyan</code></td>
      <td><code>=rgb(224, 255, 255)</code></td>
      <td style="background:lightcyan">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fafad2">&nbsp;</td>
      <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
      <td><code>=rgb(250, 250, 210)</code></td>
      <td style="background:lightgoldenrodyellow ">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#d3d3d3">&nbsp;</td>
      <td style="text-align: center;"><code>lightgray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(211, 211, 211)</code></td>
      <td style="background:lightgray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#7cfc00">&nbsp;</td>
      <td style="text-align: center;"><code>lightgreen</code></td>
      <td><code>=rgb(144, 238, 144)</code></td>
      <td style="background:lightgreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#d3d3d3">&nbsp;</td>
      <td style="text-align: center;"><code>lightgrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(211, 211, 211)</code></td>
      <td style="background:lightgrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffb6c1">&nbsp;</td>
      <td style="text-align: center;"><code>lightpink</code></td>
      <td><code>=rgb(255, 182, 193)</code></td>
      <td style="background:lightpink">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffa07a">&nbsp;</td>
      <td style="text-align: center;"><code>lightsalmon</code></td>
      <td><code>=rgb(255, 160, 122)</code></td>
      <td style="background:lightsalmon">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#20b2aa">&nbsp;</td>
      <td style="text-align: center;"><code>lightseagreen</code></td>
      <td><code>=rgb( 32, 178, 170)</code></td>
      <td style="background:lightseagreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#87cefa">&nbsp;</td>
      <td style="text-align: center;"><code>lightskyblue</code></td>
      <td><code>=rgb(135, 206, 250)</code></td>
      <td style="background:lightskyblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#778899">&nbsp;</td>
      <td style="text-align: center;"><code>lightslategray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(119, 136, 153)</code></td>
      <td style="background:lightslategray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#778899">&nbsp;</td>
      <td style="text-align: center;"><code>lightslategrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(119, 136, 153)</code></td>
      <td style="background:lightslategrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#b0c4de">&nbsp;</td>
      <td style="text-align: center;"><code>lightsteelblue</code></td>
      <td><code>=rgb(176, 196, 222)</code></td>
      <td style="background:lightsteelblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffffe0">&nbsp;</td>
      <td style="text-align: center;"><code>lightyellow</code></td>
      <td><code>=rgb(255, 255, 224)</code></td>
      <td style="background:lightyellow">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#32cd32">&nbsp;</td>
      <td style="text-align: center;"><code>limegreen</code></td>
      <td><code>=rgb( 50, 205,&nbsp; 50)</code></td>
      <td style="background:limegreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#faf0e6">&nbsp;</td>
      <td style="text-align: center;"><code>linen</code></td>
      <td><code>=rgb(250, 240, 230)</code></td>
      <td style="background:linen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#66cdaa">&nbsp;</td>
      <td style="text-align: center;"><code>mediumaquamarine</code></td>
      <td><code>=rgb(102, 205, 170)</code></td>
      <td style="background:mediumaquamarine">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#0000cd">&nbsp;</td>
      <td style="text-align: center;"><code>mediumblue</code></td>
      <td><code>=rgb(&nbsp; 0,&nbsp;&nbsp; 0, 205)</code></td>
      <td style="background:mediumblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ba55d3">&nbsp;</td>
      <td style="text-align: center;"><code>mediumorchid</code></td>
      <td><code>=rgb(186,&nbsp; 85, 211)</code></td>
      <td style="background:mediumorchid">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#9370db">&nbsp;</td>
      <td style="text-align: center;"><code>mediumpurple</code></td>
      <td><code>=rgb(147, 112, 219)</code></td>
      <td style="background:mediumpurple">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#3cb371">&nbsp;</td>
      <td style="text-align: center;"><code>mediumseagreen</code></td>
      <td><code>=rgb( 60, 179, 113)</code></td>
      <td style="background:mediumseagreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#7b68ee">&nbsp;</td>
      <td style="text-align: center;"><code>mediumslateblue</code></td>
      <td><code>=rgb(123, 104, 238)</code></td>
      <td style="background:mediumslateblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00fa9a">&nbsp;</td>
      <td style="text-align: center;"><code>mediumspringgreen</code></td>
      <td><code>=rgb(&nbsp; 0, 250, 154)</code></td>
      <td style="background:mediumspringgreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#48d1cc">&nbsp;</td>
      <td style="text-align: center;"><code>mediumturquoise</code></td>
      <td><code>=rgb( 72, 209, 204)</code></td>
      <td style="background:mediumturquoise">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#c71585">&nbsp;</td>
      <td style="text-align: center;"><code>mediumvioletred</code></td>
      <td><code>=rgb(199,&nbsp; 21, 133)</code></td>
      <td style="background:mediumvioletred">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#191970">&nbsp;</td>
      <td style="text-align: center;"><code>midnightblue</code></td>
      <td><code>=rgb( 25,&nbsp; 25, 112)</code></td>
      <td style="background:midnightblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f5fffa">&nbsp;</td>
      <td style="text-align: center;"><code>mintcream</code></td>
      <td><code>=rgb(245, 255, 250)</code></td>
      <td style="background:mintcream">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffe4e1">&nbsp;</td>
      <td style="text-align: center;"><code>mistyrose</code></td>
      <td><code>=rgb(255, 228, 225)</code></td>
      <td style="background:mistyrose">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffe4b5">&nbsp;</td>
      <td style="text-align: center;"><code>moccasin</code></td>
      <td><code>=rgb(255, 228, 181)</code></td>
      <td style="background:moccasin">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffdead">&nbsp;</td>
      <td style="text-align: center;"><code>navajowhite</code></td>
      <td><code>=rgb(255, 222, 173)</code></td>
      <td style="background:navajowhite">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fdf5e6">&nbsp;</td>
      <td style="text-align: center;"><code>oldlace</code></td>
      <td><code>=rgb(253, 245, 230)</code></td>
      <td style="background:oldlace">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#6b8e23">&nbsp;</td>
      <td style="text-align: center;"><code>olivedrab</code></td>
      <td><code>=rgb(107, 142,&nbsp; 35)</code></td>
      <td style="background:olivedrab">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff4500">&nbsp;</td>
      <td style="text-align: center;"><code>orangered</code></td>
      <td><code>=rgb(255,&nbsp; 69,&nbsp;&nbsp; 0)</code></td>
      <td style="background:orangered">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#da70d6">&nbsp;</td>
      <td style="text-align: center;"><code>orchid</code></td>
      <td><code>=rgb(218, 112, 214)</code></td>
      <td style="background:orchid">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#eee8aa">&nbsp;</td>
      <td style="text-align: center;"><code>palegoldenrod</code></td>
      <td><code>=rgb(238, 232, 170)</code></td>
      <td style="background:palegoldenrod">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#98fb98">&nbsp;</td>
      <td style="text-align: center;"><code>palegreen</code></td>
      <td><code>=rgb(152, 251, 152)</code></td>
      <td style="background:palegreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#afeeee">&nbsp;</td>
      <td style="text-align: center;"><code>paleturquoise</code></td>
      <td><code>=rgb(175, 238, 238)</code></td>
      <td style="background:paleturquoise">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#db7093">&nbsp;</td>
      <td style="text-align: center;"><code>palevioletred</code></td>
      <td><code>=rgb(219, 112, 147)</code></td>
      <td style="background:palevioletred">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffefd5">&nbsp;</td>
      <td style="text-align: center;"><code>papayawhip</code></td>
      <td><code>=rgb(255, 239, 213)</code></td>
      <td style="background:papayawhip">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffdab9">&nbsp;</td>
      <td style="text-align: center;"><code>peachpuff</code></td>
      <td><code>=rgb(255, 218, 185)</code></td>
      <td style="background:peachpuff">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#cd853f">&nbsp;</td>
      <td style="text-align: center;"><code>peru</code></td>
      <td><code>=rgb(205, 133,&nbsp; 63)</code></td>
      <td style="background:peru">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ffc0cb">&nbsp;</td>
      <td style="text-align: center;"><code>pink</code></td>
      <td><code>=rgb(255, 192, 203)</code></td>
      <td style="background:pink">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#dda0dd">&nbsp;</td>
      <td style="text-align: center;"><code>plum</code></td>
      <td><code>=rgb(221, 160, 221)</code></td>
      <td style="background:plum">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#b0e0e6">&nbsp;</td>
      <td style="text-align: center;"><code>powderblue</code></td>
      <td><code>=rgb(176, 224, 230)</code></td>
      <td style="background:powderblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#bc8f8f">&nbsp;</td>
      <td style="text-align: center;"><code>rosybrown</code></td>
      <td><code>=rgb(188, 143, 143)</code></td>
      <td style="background:rosybrown">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#4169e1">&nbsp;</td>
      <td style="text-align: center;"><code>royalblue</code></td>
      <td><code>=rgb( 65, 105, 225)</code></td>
      <td style="background:royalblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#8b4513">&nbsp;</td>
      <td style="text-align: center;"><code>saddlebrown</code></td>
      <td><code>=rgb(139,&nbsp; 69,&nbsp; 19)</code></td>
      <td style="background:saddlebrown">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fa8072">&nbsp;</td>
      <td style="text-align: center;"><code>salmon</code></td>
      <td><code>=rgb(250, 128, 114)</code></td>
      <td style="background:salmon">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f4a460">&nbsp;</td>
      <td style="text-align: center;"><code>sandybrown</code></td>
      <td><code>=rgb(244, 164,&nbsp; 96)</code></td>
      <td style="background:sandybrown">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#2e8b57">&nbsp;</td>
      <td style="text-align: center;"><code>seagreen</code></td>
      <td><code>=rgb( 46, 139,&nbsp; 87)</code></td>
      <td style="background:seagreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fff5ee">&nbsp;</td>
      <td style="text-align: center;"><code>seashell</code></td>
      <td><code>=rgb(255, 245, 238)</code></td>
      <td style="background:seashell">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#a0522d">&nbsp;</td>
      <td style="text-align: center;"><code>sienna</code></td>
      <td><code>=rgb(160,&nbsp; 82,&nbsp; 45)</code></td>
      <td style="background:sienna">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#87ceeb">&nbsp;</td>
      <td style="text-align: center;"><code>skyblue</code></td>
      <td><code>=rgb(135, 206, 235)</code></td>
      <td style="background:skyblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#6a5acd">&nbsp;</td>
      <td style="text-align: center;"><code>slateblue</code></td>
      <td><code>=rgb(106,&nbsp; 90, 205)</code></td>
      <td style="background:slateblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#708090">&nbsp;</td>
      <td style="text-align: center;"><code>slategray</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(112, 128, 144)</code></td>
      <td style="background:slategray">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#708090">&nbsp;</td>
      <td style="text-align: center;"><code>slategrey</code><sup><a href="#1" title="color_value#1">[*]</a></sup></td>
      <td><code>=rgb(112, 128, 144)</code></td>
      <td style="background:slategrey">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#fffafa">&nbsp;</td>
      <td style="text-align: center;"><code>snow</code></td>
      <td><code>=rgb(255, 250, 250)</code></td>
      <td style="background:snow">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#00ff7f">&nbsp;</td>
      <td style="text-align: center;"><code>springgreen</code></td>
      <td><code>=rgb(&nbsp; 0, 255, 127)</code></td>
      <td style="background:springgreen">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#4682b4">&nbsp;</td>
      <td style="text-align: center;"><code>steelblue</code></td>
      <td><code>=rgb( 70, 130, 180)</code></td>
      <td style="background:steelblue">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#d2b48c">&nbsp;</td>
      <td style="text-align: center;"><code>tan</code></td>
      <td><code>=rgb(210, 180, 140)</code></td>
      <td style="background:tan">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#d8bfd8">&nbsp;</td>
      <td style="text-align: center;"><code>thistle</code></td>
      <td><code>=rgb(216, 191, 216)</code></td>
      <td style="background:thistle">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ff6347">&nbsp;</td>
      <td style="text-align: center;"><code>tomato</code></td>
      <td><code>=rgb(255,&nbsp; 99,&nbsp; 71)</code></td>
      <td style="background:tomato">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#40e0d0">&nbsp;</td>
      <td style="text-align: center;"><code>turquoise</code></td>
      <td><code>=rgb( 64, 224, 208)</code></td>
      <td style="background:turquoise">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#ee82ee">&nbsp;</td>
      <td style="text-align: center;"><code>violet</code></td>
      <td><code>=rgb(238, 130, 238)</code></td>
      <td style="background:violet">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f5deb3">&nbsp;</td>
      <td style="text-align: center;"><code>wheat</code></td>
      <td><code>=rgb(245, 222, 179)</code></td>
      <td style="background:wheat">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#f5f5f5">&nbsp;</td>
      <td style="text-align: center;"><code>whitesmoke</code></td>
      <td><code>=rgb(245, 245, 245)</code></td>
      <td style="background:whitesmoke">&nbsp;</td>
    </tr>
    <tr>
      <td style="background:#9acd32">&nbsp;</td>
      <td style="text-align: center;"><code>yellowgreen</code></td>
      <td><code>=rgb(154, 205,&nbsp; 50)</code></td>
      <td style="background:yellowgreen">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="transparent_keyword"><code>transparent</code> keyword</h3>
<p>The <code>transparent</code> keyword represents a fully transparent color, i.e. the color seen will be the background color. Technically, it is a black with alpha channel at its maximum and is a shortcut for <code>rgba(0,0,0,0)</code>.</p>
<div class="note">
  <strong>Historical Note</strong><br />
  The <code>transparent</code> keyword wasn't a true color in CSS Level 2 (Revision 1). It was a specific keyword that could be used in place of a regular <code>&lt;color&gt;</code> value on two CSS properties: {{ Cssxref("background") }} and {{ Cssxref("border") }}. It was essentially added to allow to override an inherited solid colors.<br />
  <br />
  With the support of opacity through <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing" title="http://en.wikipedia.org/wiki/Alpha_compositing">alpha channels</a>, <code>transparent</code> was redefined as a true color in CSS Colors Level 3 allowing its use in any place where a <code>&lt;color&gt;</code> value is required, like the {{ Cssxref("color") }} property.<sup><a href="#2">[**]</a></sup></div>
<h3 id="currentColor_keyword"><code>currentColor</code> keyword</h3>
<p>The <code>currentColor</code> keyword represents the calculated value of the element's {{ Cssxref("color") }} property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.</p>
<p>It can also be used on properties that inherit the calculated value of the element's {{ Cssxref("color") }} property and will be equivalent to the <code>inherit</code> keyword on these elements, if any.</p>
<h4 id="Live_example">Live example</h4>
<p>The color of the line (a color-filled div) adapts to the color of its {{ Cssxref("color") }} property, inherited from its parent</p>
<div style="width:50%">
  <pre>
&lt;div style="color:darkred"&gt;
 The color of this text is the same as the one of the line:
  &lt;div style="background:currentcolor; height:1px"&gt;&lt;/div&gt;
 Some more text.
&lt;/div&gt; 
</pre>
  <div style="color:darkred">
    The color of this text is the same as the one of the line:<br />
    <div style="background:currentcolor;height:1px">
      <span style="width:50%">.</span></div>
    <span style="width:50%">Some more text.</span></div>
</div>
<div style="width:50%">
  <pre>
&lt;div style="color:blue"&gt;
 The color of this text is the same as the one of the line:
  &lt;div style="background:currentcolor; height:1px"&gt;&lt;/div&gt;
 Some more text.
&lt;/div&gt; 
</pre>
  <div style="color:blue">
    The color of this text is the same as the one of the line:<br />
    <div style="background:currentcolor;height:1px">
      <span style="width:50%">.</span></div>
    <span style="width:50%">Some more text.</span></div>
</div>
<h3 id="rgb()">rgb()</h3>
<p>{{cssanchor("rgb")}}Colors can be defined using the red-green-blue (RGB) model in two ways:</p>
<dl>
  <dt>
    Hexadecimal notation <code>#RRGGBB</code> and <code>#RGB</code></dt>
  <dd>
    <ul style="margin-bottom:0">
      <li>"<code>#</code>", followed by six hexadecimal characters (0-9, A-F).</li>
      <li>"<code>#</code>", followed by three hexadecimal characters (0-9, A-F).</li>
    </ul>
    The three-digit RGB notation (<code>#RGB</code>) and the six-digit form (<code>#RRGGBB</code>) are equal.<br />
    For example, <code>#f03</code> and <code>#ff0033</code>represent the same color.</dd>
  <dt>
    Functional Notation <code>rgb(R,G,B)</code></dt>
  <dd>
    "<code>rgb</code>", followed by three {{ Xref_cssinteger() }} or three {{ Xref_csspercentage() }} values.<br />
    The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.</dd>
</dl>
<pre>
/* These examples all specify the same RGB color: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 <strike>rgb(255, 0, 51.2)</strike> /* ERROR! Don't use fractions, use integers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 <strike>rgb(100%, 0, 20%)</strike> /* ERROR! Don't mix up integer and percentage notation */
</pre>
<h3 id="hsl()"><code>hsl()</code></h3>
<p>{{cssanchor("hsl")}}Colors also can be defined the Hue-saturation-lightness model (HSL) using the <code>hsl()</code> functional notation.&nbsp; The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).</p>
<p><strong>Hue </strong>is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless {{ Xref_cssnumber() }}. By definition <strong>red=0=360</strong>, and the other colors are spread around the circle, so <strong>green=120</strong>, <strong>blue=240</strong>, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.</p>
<p>Saturation and lightness are represented as percentages.<br />
  <code>100%</code> is full <strong>saturation</strong>, and<code>0%</code> is a shade of grey.<br />
  <code>100%</code> <strong>lightness</strong> is white, <code>0%</code> lightness is black, and <code>50%</code> lightness is "normal".</p>
<pre style="text-shadow:rgba(255,255,255,0.4) -1px -1px">
hsl(0,  100%,50%)   <span style="background-color:hsl(0,100%,50%)"> /* red */   </span>
hsl(30, 100%,50%)   <span style="background:hsl(30,100%,50%)">&nbsp;            </span> 
hsl(60, 100%,50%)   <span style="background:hsl(60,100%,50%)">&nbsp;            </span>
hsl(90, 100%,50%)   <span style="background:hsl(90,100%,50%)">&nbsp;            </span>
hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */ </span>
hsl(150,100%,50%)   <span style="background:hsl(150,100%,50%)">&nbsp;            </span>
hsl(180,100%,50%)   <span style="background:hsl(180,100%,50%)">&nbsp;            </span>
hsl(210,100%,50%)   <span style="background:hsl(210,100%,50%)">&nbsp;            </span>
hsl(240,100%,50%)   <span style="background:hsl(240,100%,50%)"> /* blue */  </span>
hsl(270,100%,50%)   <span style="background:hsl(270,100%,50%)">&nbsp;            </span>
hsl(300,100%,50%)   <span style="background:hsl(300,100%,50%)">&nbsp;            </span>
hsl(330,100%,50%)   <span style="background:hsl(330,100%,50%)">&nbsp;            </span>
hsl(360,100%,50%)   <span style="background:hsl(360,100%,50%)"> /* red */   </span>

hsl(120,100%,25%)   <span style="background:hsl(120,100%,25%)"> /* dark green */  </span>
hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */       </span>
hsl(120,100%,75%)   <span style="background:hsl(120,100%,75%)"> /* light green */ </span>

hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */  </span>
hsl(120, 67%,50%)   <span style="background:hsl(120,67%,50%)">&nbsp;             </span>
hsl(120, 33%,50%)   <span style="background:hsl(120,33%,50%)">&nbsp;             </span>
hsl(120,  0%,50%)   <span style="background:hsl(120,0%,50%)">&nbsp;             </span>

hsl(120, 60%,70%)   <span style="background:hsl(120,60%,70%)"> /* pastel green */ </span>
</pre>
<h3 id="rgba()"><code>rgba()</code></h3>
<p>{{cssanchor("rgba")}}Colors can be defined in the Red-green-blue-alpha model (RGBa) using the <code>rgba()</code> functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.<br />
  <strong>a</strong> means opacity: 0=transparent; 1=opaque;</p>
<pre>
rgba(255,0,0,0.1)   <span style="background:rgba(255,0,0,0.1)"> /* 10% opaque red */  </span>
rgba(255,0,0,0.4)   <span style="background:rgba(255,0,0,0.4)"> /* 40% opaque red */  </span>
rgba(255,0,0,0.7)   <span style="background:rgba(255,0,0,0.7)"> /* 70% opaque red */  </span>
rgba(255,0,0,  1)   <span style="background:rgba(255,0,0,1)"> /* full opaque red */ </span>
</pre>
<h3 id="hsla()"><code>hsla()</code></h3>
<p>{{cssanchor("hsla")}}Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the <code>hsla()</code> functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.<br />
  <strong>a</strong> means opacity: 0=transparent; 1=opaque;</p>
<pre style="text-shadow:rgba(255,255,255,0.4) -1px -1px">
hsla(240,100%,50%,0.05)  <span style="background:hsla(240,100%,50%,0.05)"> /* 5% opaque blue */   </span>
hsla(240,100%,50%, 0.4)  <span style="background:hsla(240,100%,50%,0.4)"> /* 40% opaque blue */  </span>
hsla(240,100%,50%, 0.7)  <span style="background:hsla(240,100%,50%,0.7)"> /* 70% opaque blue */  </span>
hsla(240,100%,50%,   1)  <span style="background:hsla(240,100%,50%,1)"> /* full opaque blue */ </span>
</pre>
<h3 id="System_Colors">System Colors</h3>
<p>Not all system colors are supported on all systems. {{ deprecated_inline() }} for use on public web pages.</p>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0pt 0.5em 0.5em; -moz-column-rule:1px solid powderblue; -moz-column-width:15em; background:#eee; -webkit-columns:15em; -webkit-column-rule:1px solid powderblue; columns:17em; column-rule:1px solid powderblue">
  <dt>
    ActiveBorder</dt>
  <dd>
    Active window border.</dd>
  <dt>
    ActiveCaption</dt>
  <dd>
    Active window caption.&nbsp; Should be used with CaptionText foreground color.</dd>
  <dt>
    AppWorkspace</dt>
  <dd>
    Background color of multiple document interface.</dd>
  <dt>
    Background</dt>
  <dd>
    Desktop background.</dd>
  <dt>
    ButtonFace</dt>
  <dd>
    Face background color for 3-D elements that appear 3-D due to one layer of surrounding border.&nbsp; Should be used with ButtonText foreground color.</dd>
  <dt>
    ButtonHighlight</dt>
  <dd>
    The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.</dd>
  <dt>
    ButtonShadow</dt>
  <dd>
    The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.</dd>
  <dt>
    ButtonText</dt>
  <dd>
    Text on push buttons.&nbsp; Should be used with ButtonFace or ThreeDFace background color.</dd>
  <dt>
    CaptionText</dt>
  <dd>
    Text in caption, size box, and scrollbar arrow box.&nbsp; Should be used with ActiveCaption background color.</dd>
  <dt>
    GrayText</dt>
  <dd>
    Grayed (disabled) text.</dd>
  <dt>
    Highlight</dt>
  <dd>
    Item(s) selected in a control.&nbsp; Should be used with HighlightText foreground color.</dd>
  <dt>
    HighlightText</dt>
  <dd>
    Text of item(s) selected in a control.&nbsp; Should be used with Highlight background color.</dd>
  <dt>
    InactiveBorder</dt>
  <dd>
    Inactive window border.</dd>
  <dt>
    InactiveCaption</dt>
  <dd>
    Inactive window caption.&nbsp; Should be used with InactiveCaptionText foreground color.</dd>
  <dt>
    InactiveCaptionText</dt>
  <dd>
    Color of text in an inactive caption.&nbsp; Should be used with InactiveCaption background color.</dd>
  <dt>
    InfoBackground</dt>
  <dd>
    Background color for tooltip controls.&nbsp; Should be used with InfoText foreground color.</dd>
  <dt>
    InfoText</dt>
  <dd>
    Text color for tooltip controls.&nbsp; Should be used with InfoBackground background color.</dd>
  <dt>
    Menu</dt>
  <dd>
    Menu background.&nbsp; Should be used with MenuText or -moz-MenuBarText foreground color.</dd>
  <dt>
    MenuText</dt>
  <dd>
    Text in menus.&nbsp; Should be used with Menu background color.</dd>
  <dt>
    Scrollbar</dt>
  <dd>
    Scroll bar gray area.</dd>
  <dt>
    ThreeDDarkShadow</dt>
  <dd>
    The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two<br />
    concentric layers of surrounding border.</dd>
  <dt>
    ThreeDFace</dt>
  <dd>
    The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.&nbsp; Should be used with ButtonText foreground color.</dd>
  <dt>
    ThreeDHighlight</dt>
  <dd>
    The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br />
    concentric layers of surrounding border.</dd>
  <dt>
    ThreeDLightShadow</dt>
  <dd>
    The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two<br />
    concentric layers of surrounding border.</dd>
  <dt>
    ThreeDShadow</dt>
  <dd>
    The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two<br />
    concentric layers of surrounding border.</dd>
  <dt>
    Window</dt>
  <dd>
    Window background.&nbsp; Should be used with WindowText foreground color.</dd>
  <dt>
    WindowFrame</dt>
  <dd>
    Window frame.</dd>
  <dt>
    WindowText</dt>
  <dd>
    Text in windows.&nbsp; Should be used with Window background color.</dd>
</dl>
<h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0 0.5em 0.5em; -moz-column-rule:1px solid powderblue; -moz-column-width:17em; background:#eee; -webkit-columns:17em; -webkit-column-rule:1px solid powderblue; columns:17em; column-rule:1px solid powderblue">
  <dt>
    -moz-ButtonDefault</dt>
  <dd>
    The border color that goes around buttons that represent the default action for a dialog box.</dd>
  <dt>
    -moz-ButtonHoverFace</dt>
  <dd>
    The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it).&nbsp; Should be used with the -moz-ButtonHoverText foreground color.</dd>
  <dt>
    -moz-ButtonHoverText</dt>
  <dd>
    The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).&nbsp; Should be used with the -moz-ButtonHoverFace background color.</dd>
  <dt>
    -moz-CellHighlight</dt>
  <dd>
    Background color for selected item in a tree widget.&nbsp; Should be used with -moz-CellHighlightText foreground color.&nbsp; See also -moz-html-CellHighlight.</dd>
  <dt>
    -moz-CellHighlightText</dt>
  <dd>
    Text color for a selected item in a tree.&nbsp; Should be used with -moz-CellHighlight background color.&nbsp; See also -moz-html-CellHighlightText.</dd>
  <dt>
    -moz-Combobox</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.2") }} Background color for comboboxes.&nbsp; Should be used with -moz-ComboboxText foreground color.&nbsp; In versions prior to 1.9.2, use -moz-Field instead.</dd>
  <dt>
    -moz-ComboboxText</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.2") }} Background Text color for comboboxes.&nbsp; Should be used with -moz-ComboboxText foreground color.&nbsp; In versions prior to 1.9.2, use -moz-FieldText instead.</dd>
  <dt>
    -moz-Dialog</dt>
  <dd>
    Background color for dialog boxes.&nbsp; Should be used with -moz-DialogText foreground color.</dd>
  <dt>
    -moz-DialogText</dt>
  <dd>
    Text color for dialog boxes.&nbsp; Should be used with -moz-Dialog background color.</dd>
  <dt>
    -moz-dragtargetzone</dt>
  <dt>
    -moz-EvenTreeRow</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Background color for even-numbered rows in a tree.&nbsp; Should be used with -moz-FieldText foreground color.&nbsp; In Gecko versions prior to 1.9, use -moz-Field.&nbsp; See also -moz-OddTreeRow.</dd>
  <dt>
    -moz-Field</dt>
  <dd>
    textfield background color.&nbsp; Should be used with -moz-FieldText foreground color.</dd>
  <dt>
    -moz-FieldText</dt>
  <dd>
    textfield foreground color.&nbsp; Should be used with -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background colors.</dd>
  <dt>
    -moz-html-CellHighlight</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Background color for highlighted item in HTML&nbsp;select.&nbsp; Should be used with -moz-html-CellHighlightText foreground color.&nbsp; Prior to Gecko 1.9, use -moz-CellHighlight.</dd>
  <dt>
    -moz-html-CellHighlightText</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Background color for highlighted item in HTML&nbsp;select.&nbsp; Should be used with -moz-html-CellHighlight background color.&nbsp; Prior to Gecko 1.9, use -moz-CellHighlightText.</dd>
  <dt>
    -moz-mac-accentdarkestshadow</dt>
  <dt>
    -moz-mac-accentdarkshadow</dt>
  <dt>
    -moz-mac-accentface</dt>
  <dt>
    -moz-mac-accentlightesthighlight</dt>
  <dt>
    -moz-mac-accentlightshadow</dt>
  <dt>
    -moz-mac-accentregularhighlight</dt>
  <dt>
    -moz-mac-accentregularshadow</dt>
  <dt>
    -moz-mac-chrome-active</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.1") }}</dd>
  <dt>
    -moz-mac-chrome-inactive</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.1") }}</dd>
  <dt>
    -moz-mac-focusring</dt>
  <dt>
    -moz-mac-menuselect</dt>
  <dt>
    -moz-mac-menushadow</dt>
  <dt>
    -moz-mac-menutextselect</dt>
  <dt>
    -moz-MenuHover</dt>
  <dd>
    Background color for hovered menu item.&nbsp; Often similar to Highlight.&nbsp; Should be used with -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.</dd>
  <dt>
    -moz-MenuHoverText</dt>
  <dd>
    Foreground color for hovered menu item.&nbsp; Often similar to HighlightText.&nbsp; Should be used with -moz-MenuHover background color.</dd>
  <dt>
    -moz-MenuBarText</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.2") }} Foreground color for text in menu bars.&nbsp; Often similar to MenuText.&nbsp; Should be used on top of Menu background.</dd>
  <dt>
    -moz-MenuBarHoverText</dt>
  <dd>
    Foreground color for hovered text in menu bars.&nbsp; Often similar to -moz-MenuHoverText.&nbsp; Should be used on top of -moz-MenuHover background.</dd>
  <dt>
    -moz-nativehyperlinktext</dt>
  <dd>
    {{ Gecko_minversion_inline("1.9.1") }} default platform hyperlink color</dd>
  <dt>
    -moz-OddTreeRow</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Background color for odd-numbered rows in a tree.&nbsp; Should be used with -moz-FieldText foreground color.&nbsp; In Gecko versions prior to 1.9, use -moz-Field.&nbsp; See also -moz-EvenTreeRow.</dd>
  <dt>
    -moz-win-communicationstext</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Should be used for text in objects with appearance:-moz-win-communications-toolbox.</dd>
  <dt>
    -moz-win-mediatext</dt>
  <dd>
    {{ gecko_minversion_inline("1.9") }} Should be used for text in objects with appearance:-moz-win-media-toolbox.</dd>
</dl>
<h3 id="Mozilla_Color_Preference_Extensions">Mozilla Color Preference Extensions</h3>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0 0.5em 0.5em; background:#eee;">
  <dt>
    -moz-activehyperlinktext</dt>
  <dd>
    User's preference for text color of active links.&nbsp; Should be used against default document background.</dd>
  <dt>
    &nbsp;</dt>
  <dt>
    -moz-default-background-color</dt>
  <dd>
    {{ Gecko_minversion_inline("5.0") }} User's preference for document background-color.</dd>
  <dt>
    &nbsp;</dt>
  <dt>
    -moz-default-color</dt>
  <dd>
    {{ Gecko_minversion_inline("5.0") }} User's preference for text color.</dd>
  <dt>
    -moz-hyperlinktext</dt>
  <dd>
    User's preference for text color of unvisited links.&nbsp; Should be used against default document background.</dd>
  <dt>
    -moz-visitedhyperlinktext</dt>
  <dd>
    User's preference for text color of visited links.&nbsp; Should be used against default document background.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;') }}</td>
      <td>{{ Spec2('CSS3 Colors') }}</td>
      <td>Deprecated system-colors; added SVG colors; added <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> functional notation.</td>
    </tr>
    <tr style="vertical-align: top;">
      <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
      <td style="vertical-align: top;">Added the orange color and the system-colors.</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{ SpecName('CSS1', '#color-units', '&lt;color&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td>
      <td style="vertical-align: top;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>keywords colors</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>3.0 <sup><a href="#1">[*]</a></sup></td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>#RRGGBB | #RGB</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>3.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>rgb (R,G,B)</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>hsl (H,S,L)</td>
        <td>1.0</td>
        <td>1.0 (1.5)</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>3.1 (525)</td>
      </tr>
      <tr>
        <td>rgba (R,G,B,a)</td>
        <td>1.0</td>
        <td>3.0 (1.9)</td>
        <td>9.0<a class="external" href="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_Colors" title="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_Colors"> #</a></td>
        <td>10.0</td>
        <td>3.1 (525)</td>
      </tr>
      <tr>
        <td>hsla (H,S,L,a)</td>
        <td>1.0</td>
        <td>3.0 (1.9)</td>
        <td>9.0<a class="external" href="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_Colors" title="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_Colors"> #</a></td>
        <td>10.0</td>
        <td>3.1 (525)</td>
      </tr>
      <tr>
        <td>currentColor</td>
        <td>1.0</td>
        <td>1.5 (1.8)</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>4.0 (528)</td>
      </tr>
      <tr>
        <td>transparent</td>
        <td>1.0</td>
        <td>3.0 (1.9)</td>
        <td>9.0 <sup><a href="#2">[**]</a></sup></td>
        <td>10.0</td>
        <td>3.1 (525)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p><a name="1">[*] The 'e'-grey colors (with an e) (<code>grey</code>, <code>darkgrey</code>, <code>darkslategrey</code>, <code>dimgrey</code>, <code>lightgrey</code>, <code>lightslategrey</code>) are only supported since IE 8.0. IE 3 to IE 6 only support the 'a' variants: <code>gray</code>, <code>darkgray</code>, <code>darkslategray</code>, <code>dimgray</code>, <code>lightgray</code>, <code>lightslategray</code>.</a></p>
<p><a name="1"> </a></p>
<p><a name="1"></a><a name="2">[**]&nbsp; IE 7-8 supports transparent only for {{ Cssxref("background") }} and {{ Cssxref("border") }}. <code>color:transparent</code> is drawn black in IE.</a></p>
<p><a name="2"> </a></p>
<h2 id="See_also"><a name="2">See also</a></h2>
<p><a name="2"> </a></p>
<ul>
  <li><a name="2">The {{ Cssxref("opacity") }} property, allowing to define the transparency of color at the element level.</a></li>
  <li><a name="2">The {{ Cssxref("color") }}, {{ Cssxref("background-color") }}, {{ Cssxref("border-color") }}, {{ Cssxref("outline-color") }}, {{ Cssxref("text-shadow") }}, {{ Cssxref("box-shadow") }} properties.</a></li>
  <li><a name="2"></a><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
  <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision