<color>
Summary
The <color>
CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:
- using a keyword
- using the RGB cubic-coordinate system (via the #-hexadecimal or the
rgb()
andrgba()
functional notations) - using the HSL cylindrical-coordinate system (via the
hsl()
andhsla()
functional notations)
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.
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, or 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
/slategrey
- 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 .
Specification | Color | Keyword | RGB hex values | Live |
---|---|---|---|---|
CSS Level 1 | 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 |
|||
CSS Level 2 (Revision 1) | orange |
#ffa500 |
||
CSS Color Module Level 3 | aliceblue |
#f0f8ff |
||
antiquewhite |
#faebd7 |
|||
aquamarine |
#7fffd4 |
|||
azure |
#f0ffff |
|||
beige |
#f5f5dc |
|||
bisque |
#ffe4c4 |
|||
blanchedalmond |
#ffebcd |
|||
blueviolet |
#8a2be2 |
|||
brown |
#a52a2a |
|||
burlywood |
#deb887 |
|||
cadetblue |
#5f9ea0 |
|||
chartreuse |
#7fff00 |
|||
chocolate |
#d2691e |
|||
coral |
#ff7f50 |
|||
cornflowerblue |
#6495ed |
|||
cornsilk |
#fff8dc |
|||
crimson |
#dc143c |
|||
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 |
|||
gainsboro |
#dcdcdc |
|||
ghostwhite |
#f8f8ff |
|||
gold |
#ffd700 |
|||
goldenrod |
#daa520 |
|||
greenyellow |
#adff2f |
|||
grey |
#808080 |
|||
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 |
|||
limegreen |
#32cd32 |
|||
linen |
#faf0e6 |
|||
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 |
|||
oldlace |
#fdf5e6 |
|||
olivedrab |
#6b8e23 |
|||
orangered |
#ff4500 |
|||
orchid |
#da70d6 |
|||
palegoldenrod |
#eee8aa |
|||
palegreen |
#98fb98 |
|||
paleturquoise |
#afeeee |
|||
palevioletred |
#db7093 |
|||
papayawhip |
#ffefd5 |
|||
peachpuff |
#ffdab9 |
|||
peru |
#cd853f |
|||
pink |
#ffc0cb |
|||
plum |
#dda0dd |
|||
powderblue |
#b0e0e6 |
|||
rosybrown |
#bc8f8f |
|||
royalblue |
#4169e1 |
|||
saddlebrown |
#8b4513 |
|||
salmon |
#fa8072 |
|||
sandybrown |
#f4a460 |
|||
seagreen |
#2e8b57 |
|||
seashell |
#fff5ee |
|||
sienna |
#a0522d |
|||
skyblue |
#87ceeb |
|||
slateblue |
#6a5acd |
|||
slategray |
#708090 |
|||
slategrey |
#708090 |
|||
snow |
#fffafa |
|||
springgreen |
#00ff7f |
|||
steelblue |
#4682b4 |
|||
tan |
#d2b48c |
|||
thistle |
#d8bfd8 |
|||
tomato |
#ff6347 |
|||
turquoise |
#40e0d0 |
|||
violet |
#ee82ee |
|||
wheat |
#f5deb3 |
|||
whitesmoke |
#f5f5f5 |
|||
yellowgreen |
#9acd32 |
|||
CSS Color Module Level 4 | rebeccapurple |
#663399 |
The color rebeccapurple
is equivalent to the color #639
, and more information about why it was introduced can be found in this Codepen blog post by Trezy "Honoring a Great Man."
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 minimum value and is a shortcut for rgba(0,0,0,0)
.
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: background
and 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 color
property.currentColor
keyword
The currentColor
keyword represents the calculated value of the element's 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 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 color
property, inherited from its parent.
Live example 1
<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>
Live example 2
<div style="color:blue; border-bottom: 1px dashed currentcolor;"> 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>
rgb()
Colors can be defined using the red-green-blue (RGB) model in two ways:
- Hexadecimal notation
#RRGGBB,
#RGB
-
- "
#
", followed by six hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part and the last two the blue part. - "
#
", followed by three hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part and the last one the blue part.
#RGB
) and the six-digit form (#RRGGBB
) are equal, for example#f03
and#ff0033
represent the same color. - "
- Functional Notation
rgb(R,G,B)
- "
rgb
", followed by three<integer>
or three<percentage>
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) <s>rgb(255, 0, 51.2)</s> /* ERROR! Don't use fractions, use integers */ rgb(100%,0%,20%) rgb(100%, 0%, 20%) <s>rgb(100%, 0, 20%)</s> /* ERROR! Don't mix up integer and percentage notation */
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 <number>
. 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()
Colors can be defined in the Red-green-blue-alpha model (RGBa) in two ways:
- Hexadecimal notation
#RRGGBBAA and #RGBA
-
- "
#
", followed by eight hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part, the third two the blue part and the last two the transparency. - "
#
", followed by four hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part, the third one the blue part and the last one the transparency.
#RGBA
) and the eight-digit form (#RRGGBBAA
) are equal, for example,#f03
and#ff0033
represent the same color. - "
- 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;
#f030 /* 0% opaque red */ #F03F /* full opaque red */ #ff003300 /* 0% opaque red */ #FF003388 /* 50% opaque red */ 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()
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. for use on public web pages.
- ActiveBorder
- Active window border.
- ActiveCaption
- Active window caption. Should be used with
CaptionText
as 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 the
ButtonText
foreground color. - ButtonHighlight
- The color of the border facing the light source for 3-D elements that appear 3-D due to that 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 that layer of surrounding border.
- ButtonText
- Text on push buttons. Should be used with the
ButtonFace
orThreeDFace
background color. - CaptionText
- Text in caption, size box, and scrollbar arrow box. Should be used with the
ActiveCaption
background color. - GrayText
- Grayed (disabled) text.
- Highlight
- Item(s) selected in a control. Should be used with the
HighlightText
foreground color. - HighlightText
- Text of item(s) selected in a control. Should be used with the
Highlight
background color. - InactiveBorder
- Inactive window border.
- InactiveCaption
- Inactive window caption. Should be used with the
InactiveCaptionText
foreground color. - InactiveCaptionText
- Color of text in an inactive caption. Should be used with the
InactiveCaption
background color. - InfoBackground
- Background color for tooltip controls. Should be used with the
InfoText
foreground color. - InfoText
- Text color for tooltip controls. Should be used with the
InfoBackground
background color. - Menu
- Menu background. Should be used with the
MenuText
or-moz-MenuBarText
foreground color. - MenuText
- Text in menus. Should be used with the
Menu
background color. - Scrollbar
- Background color of scroll bars.
- 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 the
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 the
WindowText
foreground color. - WindowFrame
- Window frame.
- WindowText
- Text in windows. Should be used with the
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
orButtonFace
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 the
-moz-CellHighlightText
foreground color. See also-moz-html-CellHighlight
. - -moz-CellHighlightText
- Text color for a selected item in a tree. Should be used with the
-moz-CellHighlight background
color. See also-moz-html-CellHighlightText
. - -moz-Combobox
- Background color for combo-boxes. Should be used with the
-moz-ComboboxText
foreground color. In versions prior to 1.9.2, use-moz-Field
instead. - -moz-ComboboxText
- Text color for combo-boxes. Should be used with the
-moz-Combobox
background color. In versions prior to 1.9.2, use-moz-FieldText
instead. - -moz-Dialog
- Background color for dialog boxes. Should be used with the
-moz-DialogText
foreground color. - -moz-DialogText
- Text color for dialog boxes. Should be used with the
-moz-Dialog
background color. - -moz-dragtargetzone
- -moz-EvenTreeRow
- Background color for even-numbered rows in a tree. Should be used with the
-moz-FieldText
foreground color. In Gecko versions prior to 1.9, use-moz-Field
. See also-moz-OddTreeRow
. - -moz-Field
- Text field background color. Should be used with the
-moz-FieldText
foreground color. - -moz-FieldText
- Text field text color. Should be used with the
-moz-Field
,-moz-EvenTreeRow
, or-moz-OddTreeRow
background color. - -moz-html-CellHighlight
- Background color for highlighted item in HTML
<select>
s. Should be used with the-moz-html-CellHighlightText
foreground color. Prior to Gecko 1.9, use-moz-CellHighlight
. - -moz-html-CellHighlightText
- Text color for highlighted items in HTML
<select>
s. Should be used with the-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
- -moz-mac-chrome-inactive
- -moz-mac-focusring
- -moz-mac-menuselect
- -moz-mac-menushadow
- -moz-mac-menutextselect
- -moz-MenuHover
- Background color for hovered menu items. Often similar to
Highlight
. Should be used with the-moz-MenuHoverText
or-moz-MenuBarHoverText
foreground color. - -moz-MenuHoverText
- Text color for hovered menu items. Often similar to
HighlightText
. Should be used with the-moz-MenuHover
background color. - -moz-MenuBarText
- Text color in menu bars. Often similar to
MenuText
. Should be used on top ofMenu
background. - -moz-MenuBarHoverText
- Color for hovered text in menu bars. Often similar to
-moz-MenuHoverText
. Should be used on top of-moz-MenuHover
background. - -moz-nativehyperlinktext
- Default platform hyperlink color.
- -moz-OddTreeRow
- Background color for odd-numbered rows in a tree. Should be used with the
-moz-FieldText
foreground color. In Gecko versions prior to 1.9, use-moz-Field
. See also-moz-EvenTreeRow
. - -moz-win-communicationstext
- Should be used for text in objects with
.-moz-appearance
: -moz-win-communications-toolbox; - -moz-win-mediatext
- Should be used for text in objects with
.-moz-appearance
: -moz-win-media-toolbox
Mozilla Color Preference Extensions
- -moz-activehyperlinktext
- User's preference for text color of active links. Should be used with the default document background color.
- -moz-default-background-color
- User's preference for the document background color.
- -moz-default-color
- User's preference for the text color.
- -moz-hyperlinktext
- User's preference for the text color of unvisited links. Should be used with the default document background color.
- -moz-visitedhyperlinktext
- User's preference for the text color of visited links. Should be used with the default document background color.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 The definition of '<color>' in that specification. |
Editor's Draft | Added rebeccapurple and four- (#RGBA ) and eight-digit (#RRGGBBAA ) hexadecimal notations. |
CSS Color Module Level 3 The definition of '<color>' in that specification. |
Recommendation | Deprecated system-colors; added SVG colors; added rgba() , hsl() , hsla() functional notation. |
CSS Level 2 (Revision 1) The definition of '<color>' in that specification. |
Recommendation | Added the orange color and the system-colors. |
CSS Level 1 The definition of '<color>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
keywords colors | 1.0 | 1.0 (1.0) | 3.0 [1] | 3.5 | 1.0 (85) |
#RRGGBB , #RGB |
1.0 | 1.0 (1.0) | 3.0 | 3.5 | 1.0 (85) |
rgb() |
1.0 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
hsl() |
1.0 | 1.0 (1.5) | 9.0 | 9.5 | 3.1 (525) |
rgba() , hsla() |
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 [2] | 10.0 | 3.1 (525) |
rebeccapurple |
38.0 | 33 (33) | 11 | 25.0 | 7.1 |
#RRGGBBAA , #RGBA |
52.0 | 49 (49) | ? | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
rgba() , hsla() |
(Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
rebeccapurple |
(Yes) | 33.0 (33) | ? | ? | 8 |
#RRGGBBAA , #RGBA |
52.0 | 49.0 (49) | No support | No support | ? |
[1] The 'e'-grey colors (with an e) (grey
, darkgrey
, darkslategrey
, dimgrey
, lightgrey
, lightslategrey
) are only supported since IE 8.0. IE 3 to IE 7 only support the 'a' variants: gray
, darkgray
, darkslategray
, dimgray
, lightgray
, lightslategray
.
[2] IE 7-8 supports the transparent
keyword only for background
and border
. color: transparent;
is drawn black in IE. IE6 renders transparent borders as black, as well.
[3] This feature is supported in Chrome Canary since version 52.0.
See also
- The
opacity
property, allowing to define the transparency of color at the element level. - The
color
,background-color
,border-color
,outline-color
,text-shadow
,box-shadow
properties.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/color_value