Using CSS System Color Keyword

Why you may want to use CSS system color keywords in place of exact colors

Rainbow of color
Image courtesy Gandee Vasan / Stone / Getty Images

CSS system color keywords are a way of using CSS to style your documents so that they integrate into the environment and operating system that your customers (meaning that site's visitors) are using. Rather than specifying a color exactly, you tell the user-agent to use the colors defined on their system. And example of this would be:

background-color:Background;

The benefit to this approach is that you can create an interface that feels more native to the operating system environment that someone is using since it uses the same color palette.

System keywords will change color based on the system itself, so the website will be flexible based on different visitors and their specific environments. 

One very important thing to remember is that capitalization counts with color keywords. In other words, these CSS property values are case sensitive. ThreeDShadow will work because that is a system value, but threedshadow will not because they use different case for the individual letters.Even though the words are the same, capitals versus no capitals means that a web browser will see them as different values and they will only render the correct one.

Note that the colors generated by these keyword will be different depending upon the color settings for the computer you're viewing this page on.

KeywordDescriptionColor
ActiveBorderActive window border. 
ActiveCaptionActive window caption. 
AppWorkspaceBackground color of multiple document interface. 
BackgroundDesktop background. 
ButtonFaceFace color for three-dimensional display elements. 
ButtonHighlightDark shadow for three-dimensional display elements (for edges facing away from the light source). 
ButtonShadowShadow color for three-dimensional display elements. 
ButtonTextText on push buttons. 
CaptionTextText in caption, size box, and scrollbar arrow box. 
GrayTextGrayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. 
HighlightItem(s) selected in a control. 
HighlightTextText of item(s) selected in a control. 
InactiveBorderInactive window border. 
InactiveCaptionInactive window caption. 
InactiveCaptionTextColor of text in an inactive caption. 
InfoBackgroundBackground color for tooltip controls. 
InfoTextText color for tooltip controls. 
MenuMenu background. 
MenuTextText in menus. 
ScrollbarScroll bar gray area. 
ThreeDDarkShadowDark shadow for three-dimensional display elements. 
ThreeDFaceFace color for three-dimensional display elements. 
ThreeDHighlightHighlight color for three-dimensional display elements. 
ThreeDLightShadowLight color for three-dimensional display elements (for edges facing the light source). 
ThreeDShadowDark shadow for three-dimensional display elements. 
WindowWindow background. 
WindowFrameWindow frame. 
WindowTextText in windows. 

 

A Note on Support

It should be noted that the use of CSS system color keywords has been deprecated in CSS3. If you are still writing CSS2 styles, these color keywords should still work, but you may want to consider moving away from this approach for current websites.

If you do decide to use these keywords, be sure to fully test your design in a variety of web browsers and on a range of devices to see exactly how your colors render.

Originally written by Jennifer Kyrin. Edited by Jeremy Girard on 8/10/16