You are here: Reference > appendix > css > colors
Colors in CSS
Colors can be specified in CSS in three different ways, by using color methods (RGB, RGBA, HSL, HSLA), hexadecimal color values and predefined color names.
You can use these colors for the value of several style properties (color, background-color, border-color, outline-color, etc.).
Color methods
RGB colors
RGB color values are supported by all commonly used browsers.
An RGB color value can be specified with the rgb method as: rgb(red, green, blue), where the red, green and blue parameters specify the red, green and blue components of the color, respectively.
Each parameter defines the intensity of the color component and may be an integer between 0 and 255 or a percentage value.
Negative integers are evaluated as 0, integers greater than 255 are evaluated as 255. Negative percentage values are evaluated as 0%, percentage values greater than 100% are evaluated as 100%.
For example, the rgb(0, 0, 255) value is rendered as blue, because the blue component is set to its highest value (255) and the others are set to 0.
Also, the following values define the same color: rgb(255, 128, 64), rgb(100%, 50%, 25%), rgb(100%, 128, 64).
Note that mixed color components are only supported in Internet Explorer. In Firefox, Opera, Google Chrome and Safari, all components must be in the same format (all of them must be integers or all of them must be percentage values).
RGBA colors
RGBA color values are an extension of RGB color values with an alpha channel that specifies the opacity of the object.
An RGBA color value can be specified with the rgba method as: rgba(red, green, blue, alpha), where the alpha parameter defines the opacity.
The possible values of the alpha parameter are floating point numbers between 0.0 (fully transparent) and 1.0 (fully opaque).
Negative values are evaluated as 0.0, values greater than 1.0 are evaluated as 1.0.
RGBA color values are supported in Google Chrome, Safari, in Firefox from version 3 and in Opera from version 10.
Internet Explorer does not support RGBA color values.
HSL colors
Hue-saturation-lightness (HSL) is a cylindrical-coordinate representation of colors.
An HSL color value can be specified with the hsl method as: hsl(hue, saturation, lightness), where hue is a floating point number that specifies an angle of the color circle in degrees, while saturation and lightness are percentage values.
0% saturation means a shade of gray, 100% means full saturation. 0% lightness is always black and 100% lightness is always white regardless of the hue and saturation.
Negative percentage values are evaluated as 0%, percentage values greater than 100% are evaluated as 100%.
HSL color values are supported in Firefox, Google Chrome, Safari and in Opera from version 10.
Internet Explorer does not support HSL color values.
HSLA colors
HSLA color values are an extension of HSL color values with an alpha channel that specifies the opacity of the object.
An HSLA color value can be specified with the hsla method as: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity.
The possible values of the alpha parameter are floating point numbers between 0.0 (fully transparent) and 1.0 (fully opaque).
Negative values are evaluated as 0.0, values greater than 1.0 are evaluated as 1.0.
HSLA color values are supported in Safari, Google Chrome, in Firefox from version 3 and in Opera from version 10.
Internet Explorer does not support HSLA color values.
Hexadecimal colors
Hexadecimal color values are supported by all commonly used browsers.
A hexadecimal color can be defined in the form #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
All values must be between 0 and FF (decimal 255), they define the intensity of the component.
For example, the #0000FF value is rendered as blue, because the blue component is set to its highest value (FF) and the others are set to 0.
Predefined color names
Cross-browser color names
The following table contains the predefined color names and their RGB and hexadecimal equivalents.
Color Name | RGB Value | Hexadecimal Value | Appearance |
---|---|---|---|
AliceBlue | rgb(240, 248, 255) | #F0F8FF | |
AntiqueWhite | rgb(250, 235, 215) | #FAEBD7 | |
Aqua | rgb(0, 255, 255) | #00FFFF | |
Aquamarine | rgb(127, 255, 212) | #7FFFD4 | |
Azure | rgb(240, 255, 255) | #F0FFFF | |
Beige | rgb(245, 245, 220) | #F5F5DC | |
Bisque | rgb(255, 228, 196) | #FFE4C4 | |
Black | rgb(0, 0, 0) | #000000 | |
BlanchedAlmond | rgb(255, 235, 205) | #FFEBCD | |
Blue | rgb(0, 0, 255) | #0000FF | |
BlueViolet | rgb(138, 43, 226) | #8A2BE2 | |
Brown | rgb(165, 42, 42) | #A52A2A | |
BurlyWood | rgb(222, 184, 135) | #DEB887 | |
CadetBlue | rgb(95, 158, 160) | #5F9EA0 | |
Chartreuse | rgb(127, 255, 0) | #7FFF00 | |
Chocolate | rgb(210, 105, 30) | #D2691E | |
Coral | rgb(255, 127, 80) | #FF7F50 | |
CornflowerBlue | rgb(100, 149, 237) | #6495ED | |
Cornsilk | rgb(255, 248, 220) | #FFF8DC | |
Crimson | rgb(220, 20, 60) | #DC143C | |
Cyan | rgb(0, 255, 255) | #00FFFF | |
DarkBlue | rgb(0, 0, 139) | #00008B | |
DarkCyan | rgb(0, 139, 139) | #008B8B | |
DarkGoldenrod | rgb(184, 134, 11) | #B8860B | |
DarkGray | rgb(169, 169, 169) | #A9A9A9 | |
DarkGreen | rgb(0, 100, 0) | #006400 | |
DarkKhaki | rgb(189, 183, 107) | #BDB76B | |
DarkMagenta | rgb(139, 0, 139) | #8B008B | |
DarkOliveGreen | rgb(85, 107, 47) | #556B2F | |
DarkOrange | rgb(255, 140, 0) | #FF8C00 | |
DarkOrchid | rgb(153, 50, 204) | #9932CC | |
DarkRed | rgb(139, 0, 0) | #8B0000 | |
DarkSalmon | rgb(233, 150, 122) | #E9967A | |
DarkSeaGreen | rgb(143, 188, 143) | #8FBC8F | |
DarkSlateBlue | rgb(72, 61, 139) | #483D8B | |
DarkSlateGray | rgb(47, 79, 79) | #2F4F4F | |
DarkTurquoise | rgb(0, 206, 209) | #00CED1 | |
DarkViolet | rgb(148, 0, 211) | #9400D3 | |
DeepPink | rgb(255, 20, 147) | #FF1493 | |
DeepSkyBlue | rgb(0, 191, 255) | #00BFFF | |
DimGray | rgb(105, 105, 105) | #696969 | |
DodgerBlue | rgb(30, 144, 255) | #1E90FF | |
FireBrick | rgb(178, 34, 34) | #B22222 | |
FloralWhite | rgb(255, 250, 240) | #FFFAF0 | |
ForestGreen | rgb(34, 139, 34) | #228B22 | |
Fuchsia | rgb(255, 0, 255) | #FF00FF | |
Gainsboro | rgb(220, 220, 220) | #DCDCDC | |
GhostWhite | rgb(248, 248, 255) | #F8F8FF | |
Gold | rgb(255, 215, 0) | #FFD700 | |
Goldenrod | rgb(218, 165, 32) | #DAA520 | |
Gray | rgb(128, 128, 128) | #808080 | |
Green | rgb(0, 128, 0) | #008000 | |
GreenYellow | rgb(173, 255, 47) | #ADFF2F | |
Honeydew | rgb(240, 255, 240) | #F0FFF0 | |
HotPink | rgb(255, 105, 180) | #FF69B4 | |
IndianRed | rgb(205, 92, 92) | #CD5C5C | |
Indigo | rgb(75, 0, 130) | #4B0082 | |
Ivory | rgb(255, 255, 240) | #FFFFF0 | |
Khaki | rgb(240, 230, 140) | #F0E68C | |
Lavender | rgb(230, 230, 250) | #E6E6FA | |
LavenderBlush | rgb(255, 240, 245) | #FFF0F5 | |
LawnGreen | rgb(124, 252, 0) | #7CFC00 | |
LemonChiffon | rgb(255, 250, 205) | #FFFACD | |
LightBlue | rgb(173, 216, 230) | #ADD8E6 | |
LightCoral | rgb(240, 128, 128) | #F08080 | |
LightCyan | rgb(224, 255, 255) | #E0FFFF | |
LightGoldenrodYellow | rgb(250, 250, 210) | #FAFAD2 | |
LightGreen | rgb(144, 238, 144) | #90EE90 | |
LightGrey | rgb(211, 211, 211) | #D3D3D3 | |
LightPink | rgb(255, 182, 193) | #FFB6C1 | |
LightSalmon | rgb(255, 160, 122) | #FFA07A | |
LightSeaGreen | rgb(32, 178, 170) | #20B2AA | |
LightSkyBlue | rgb(135, 206, 250) | #87CEFA | |
LightSlateGray | rgb(119, 136, 153) | #778899 | |
LightSteelBlue | rgb(176, 196, 222) | #B0C4DE | |
LightYellow | rgb(255, 255, 224) | #FFFFE0 | |
Lime | rgb(0, 255, 0) | #00FF00 | |
LimeGreen | rgb(50, 205, 50) | #32CD32 | |
Linen | rgb(250, 240, 230) | #FAF0E6 | |
Magenta | rgb(255, 0, 255) | #FF00FF | |
Maroon | rgb(128, 0, 0) | #800000 | |
MediumAquamarine | rgb(102, 205, 170) | #66CDAA | |
MediumBlue | rgb(0, 0, 205) | #0000CD | |
MediumOrchid | rgb(186, 85, 211) | #BA55D3 | |
MediumPurple | rgb(147, 112, 219) | #9370DB | |
MediumSeaGreen | rgb(60, 179, 113) | #3CB371 | |
MediumSlateBlue | rgb(123, 104, 238) | #7B68EE | |
MediumSpringGreen | rgb(0, 250, 154) | #00FA9A | |
MediumTurquoise | rgb(72, 209, 204) | #48D1CC | |
MediumVioletRed | rgb(199, 21, 133) | #C71585 | |
MidnightBlue | rgb(25, 25, 112) | #191970 | |
MintCream | rgb(245, 255, 250) | #F5FFFA | |
MistyRose | rgb(255, 228, 225) | #FFE4E1 | |
Moccasin | rgb(255, 228, 181) | #FFE4B5 | |
NavajoWhite | rgb(255, 222, 173) | #FFDEAD | |
Navy | rgb(0, 0, 128) | #000080 | |
OldLace | rgb(253, 245, 230) | #FDF5E6 | |
Olive | rgb(128, 128, 0) | #808000 | |
OliveDrab | rgb(107, 142, 35) | #6B8E23 | |
Orange | rgb(255, 165, 0) | #FFA500 | |
OrangeRed | rgb(255, 69, 0) | #FF4500 | |
Orchid | rgb(218, 112, 214) | #DA70D6 | |
PaleGoldenrod | rgb(238, 232, 170) | #EEE8AA | |
PaleGreen | rgb(152, 251, 152) | #98FB98 | |
PaleTurquoise | rgb(175, 238, 238) | #AFEEEE | |
PaleVioletRed | rgb(219, 112, 147) | #DB7093 | |
PapayaWhip | rgb(255, 239, 213) | #FFEFD5 | |
PeachPuff | rgb(255, 218, 185) | #FFDAB9 | |
Peru | rgb(205, 133, 63) | #CD853F | |
Pink | rgb(255, 192, 203) | #FFC0CB | |
Plum | rgb(221, 160, 221) | #DDA0DD | |
PowderBlue | rgb(176, 224, 230) | #B0E0E6 | |
Purple | rgb(128, 0, 128) | #800080 | |
Red | rgb(255, 0, 0) | #FF0000 | |
RosyBrown | rgb(188, 143, 143) | #BC8F8F | |
RoyalBlue | rgb(65, 105, 225) | #4169E1 | |
SaddleBrown | rgb(139, 69, 19) | #8B4513 | |
Salmon | rgb(250, 128, 114) | #FA8072 | |
SandyBrown | rgb(244, 164, 96) | #F4A460 | |
SeaGreen | rgb(46, 139, 87) | #2E8B57 | |
Seashell | rgb(255, 245, 238) | #FFF5EE | |
Sienna | rgb(160, 82, 45) | #A0522D | |
Silver | rgb(192, 192, 192) | #C0C0C0 | |
SkyBlue | rgb(135, 206, 235) | #87CEEB | |
SlateBlue | rgb(106, 90, 205) | #6A5ACD | |
SlateGray | rgb(112, 128, 144) | #708090 | |
Snow | rgb(255, 250, 250) | #FFFAFA | |
SpringGreen | rgb(0, 255, 127) | #00FF7F | |
SteelBlue | rgb(70, 130, 180) | #4682B4 | |
Tan | rgb(210, 180, 140) | #D2B48C | |
Teal | rgb(0, 128, 128) | #008080 | |
Thistle | rgb(216, 191, 216) | #D8BFD8 | |
Tomato | rgb(255, 99, 71) | #FF6347 | |
Turquoise | rgb(64, 224, 208) | #40E0D0 | |
Violet | rgb(238, 130, 238) | #EE82EE | |
Wheat | rgb(245, 222, 179) | #F5DEB3 | |
White | rgb(255, 255, 255) | #FFFFFF | |
WhiteSmoke | rgb(245, 245, 245) | #F5F5F5 | |
Yellow | rgb(255, 255, 0) | #FFFF00 | |
YellowGreen | rgb(154, 205, 50) | #9ACD32 |
Mozilla specific colors
Firefox supports custom color names that are references to the currently used colors of user interface elements.
Color name | Description |
---|---|
-moz-activehyperlinktext | Color of the default active hyperlink color. |
-moz-hyperlinktext | Color of the default hyperlink color. |
-moz-visitedhyperlinktext | Color of the default visited active hyperlink color. |
-moz-buttondefault | Color of the default button color. |
-moz-buttonhoverface | Color of the default buttonface color. |
-moz-buttonhovertext | Color of the default buttontext color. |
-moz-cellhighlight | Color of the default highlighted cell color. |
-moz-cellhighlighttext | Color of the default highlighted text color. |
-moz-field | Color of the default field color. |
-moz-fieldtext | Color of the default field's text color. |
-moz-dialog | Color of the default dialog color. |
-moz-dialogtext | Color of the default dialog's text color. |
-moz-dragtargetzone | Color of the default targetzone color. |
-moz-mac-accentdarkestshadow | Color of the default accentdarkestshadow color. |
-moz-mac-accentdarkshadow | Color of the default accentdarkshadow color. |
-moz-mac-accentface | Color of the default accentface color. |
-moz-mac-accentlightesthighlight | Color of the default accentlightesthighlight color. |
-moz-mac-accentlightshadow | Color of the default accentlightshadow color. |
-moz-mac-accentregularhighlight | Color of the default accentregularhighlight color. |
-moz-mac-accentregularshadow | Color of the default accentregularshadow color. |
-moz-mac-focusring | Color of the default focus color. |
-moz-mac-menuselect | Color of the default menuselect color. |
-moz-mac-menushadow | Color of the default menu's shadow color. |
-moz-mac-menutextselect | Color of the default selected menutext color. |
-moz-menuhover | Color of the default hovered menu color. |
-moz-menuhovertext | Color of the default hovered menu's text color. |
Safari and Google Chrome specific colors
Safari and Google Chrome support custom color names that are references to the currently used colors of user interface elements.
Color name | Description |
---|---|
activeborder | Color of the default active border. |
activecaption | Color of the default active caption. |
appworkspace | Color of the default application workspace. |
background | Color of the default background. |
buttonface | Color of the default button face. |
buttonhighlight | Color of the default highlighted button. |
buttonshadow | Color of the default button's shadow. |
buttontext | Color of the default button's text. |
captiontext | Color of the default caption's text. |
graytext | Color of the default gray text. |
highlight | Color of the default highlight. |
highlighttext | Color of the default highlighted text. |
inactiveborder | Color of the default inactive border. |
inactivecaption | Color of the default inactive caption. |
inactivecaptiontext | Color of the default caption's inactive text. |
infobackground | Color of the default info's background. |
infotext | Color of the default info. |
match | Color match. |
menu | Color of the default menu. |
menutext | Color of the default menu's text. |
scrollbar | Color of the default scrollbar. |
threeddarkshadow | Color of the default threed's darkshadow. |
threedface | Color of the default threed's face. |
threedhighlight | Color of the default highlighted threed. |
threedlightshadow | Color of the default threed's lightshadow. |
threedshadow | Color of the default threed's shadow. |
transparent | Transparent. |
-webkit-activelink | Color of the default active hyperlink. |
-webkit-focus-ring-color | Color of the default focus ring. |
-webkit-link | Color of the default link. |
-webkit-text | Color of the default text. |
window | Color of the default window. |
windowframe | Color of the default window's frame. |
windowtext | Color of the default window's text. |
External links:
User Contributed Comments