Please login or register to participate.
File

CSS System colors

.
File Preview
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head><title>CSS2 System Colors</title></head>
<body>
<table width="100%" border="1">
<tr>
   <td style="background-color: ActiveBorder; color: black; width: 25%"> bg: ActiveBorder <br /> Active window border. </td>
   <td style="background-color: ActiveBorder; color: white; width: 25%"> bg: ActiveBorder <br /> Active window border. </td>
   <td style="background-color: black; color: ActiveBorder; width: 25%"> fg: ActiveBorder <br /> Active window border. </td>
   <td style="background-color: white; color: ActiveBorder; width: 25%"> fg: ActiveBorder <br /> Active window border. </td>
</tr>
<tr>
   <td style="background-color: ActiveCaption; color: black; width: 25%"> bg: ActiveCaption <br /> Active window caption. </td>
   <td style="background-color: ActiveCaption; color: white; width: 25%"> bg: ActiveCaption <br /> Active window caption. </td>
   <td style="background-color: black; color: ActiveCaption; width: 25%"> fg: ActiveCaption <br /> Active window caption. </td>
   <td style="background-color: white; color: ActiveCaption; width: 25%"> fg: ActiveCaption <br /> Active window caption. </td>
</tr>
<tr>
   <td style="background-color: AppWorkspace; color: black; width: 25%"> bg: AppWorkspace <br /> Background color of multiple document interface. </td>
   <td style="background-color: AppWorkspace; color: white; width: 25%"> bg: AppWorkspace <br /> Background color of multiple document interface. </td>
   <td style="background-color: black; color: AppWorkspace; width: 25%"> fg: AppWorkspace <br /> Background color of multiple document interface. </td>
   <td style="background-color: white; color: AppWorkspace; width: 25%"> fg: AppWorkspace <br /> Background color of multiple document interface. </td>
</tr>
<tr>
   <td style="background-color: Background; color: black; width: 25%"> bg: Background <br /> Desktop background. </td>
   <td style="background-color: Background; color: white; width: 25%"> bg: Background <br /> Desktop background. </td>
   <td style="background-color: black; color: Background; width: 25%"> fg: Background <br /> Desktop background. </td>
   <td style="background-color: white; color: Background; width: 25%"> fg: Background <br /> Desktop background. </td>
</tr>
<tr>
   <td style="background-color: ButtonFace; color: black; width: 25%"> bg: ButtonFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: ButtonFace; color: white; width: 25%"> bg: ButtonFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: black; color: ButtonFace; width: 25%"> fg: ButtonFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: white; color: ButtonFace; width: 25%"> fg: ButtonFace <br /> Face color for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: ButtonHighlight; color: black; width: 25%"> bg: ButtonHighlight <br /> Highlight color for three-dimensional display elements (for edges facing away from the light source). </td>
   <td style="background-color: ButtonHighlight; color: white; width: 25%"> bg: ButtonHighlight <br /> Highlight color for three-dimensional display elements (for edges facing away from the light source). </td>
   <td style="background-color: black; color: ButtonHighlight; width: 25%"> fg: ButtonHighlight <br /> Highlight color for three-dimensional display elements (for edges facing away from the light source). </td>
   <td style="background-color: white; color: ButtonHighlight; width: 25%"> fg: ButtonHighlight <br /> Highlight color for three-dimensional display elements (for edges facing away from the light source). </td>
</tr>
<tr>
   <td style="background-color: ButtonShadow; color: black; width: 25%"> bg: ButtonShadow <br /> Shadow color for three-dimensional display elements. </td>
   <td style="background-color: ButtonShadow; color: white; width: 25%"> bg: ButtonShadow <br /> Shadow color for three-dimensional display elements. </td>
   <td style="background-color: black; color: ButtonShadow; width: 25%"> fg: ButtonShadow <br /> Shadow color for three-dimensional display elements. </td>
   <td style="background-color: white; color: ButtonShadow; width: 25%"> fg: ButtonShadow <br /> Shadow color for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: ButtonText; color: black; width: 25%"> bg: ButtonText <br /> Text on push buttons. </td>
   <td style="background-color: ButtonText; color: white; width: 25%"> bg: ButtonText <br /> Text on push buttons. </td>
   <td style="background-color: black; color: ButtonText; width: 25%"> fg: ButtonText <br /> Text on push buttons. </td>
   <td style="background-color: white; color: ButtonText; width: 25%"> fg: ButtonText <br /> Text on push buttons. </td>
</tr>
<tr>
   <td style="background-color: CaptionText; color: black; width: 25%"> bg: CaptionText <br /> Text in caption, size box, and scrollbar arrow box. </td>
   <td style="background-color: CaptionText; color: white; width: 25%"> bg: CaptionText <br /> Text in caption, size box, and scrollbar arrow box. </td>
   <td style="background-color: black; color: CaptionText; width: 25%"> fg: CaptionText <br /> Text in caption, size box, and scrollbar arrow box. </td>
   <td style="background-color: white; color: CaptionText; width: 25%"> fg: CaptionText <br /> Text in caption, size box, and scrollbar arrow box. </td>
</tr>
<tr>
   <td style="background-color: GrayText; color: black; width: 25%"> bg: GrayText <br /> Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. </td>
   <td style="background-color: GrayText; color: white; width: 25%"> bg: GrayText <br /> Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. </td>
   <td style="background-color: black; color: GrayText; width: 25%"> fg: GrayText <br /> Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. </td>
   <td style="background-color: white; color: GrayText; width: 25%"> fg: GrayText <br /> Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. </td>
</tr>
<tr>
   <td style="background-color: Highlight; color: black; width: 25%"> bg: Highlight <br /> Item(s) selected in a control. </td>
   <td style="background-color: Highlight; color: white; width: 25%"> bg: Highlight <br /> Item(s) selected in a control. </td>
   <td style="background-color: black; color: Highlight; width: 25%"> fg: Highlight <br /> Item(s) selected in a control. </td>
   <td style="background-color: white; color: Highlight; width: 25%"> fg: Highlight <br /> Item(s) selected in a control. </td>
</tr>
<tr>
   <td style="background-color: HighlightText; color: black; width: 25%"> bg: HighlightText <br /> Text of item(s) selected in a control. </td>
   <td style="background-color: HighlightText; color: white; width: 25%"> bg: HighlightText <br /> Text of item(s) selected in a control. </td>
   <td style="background-color: black; color: HighlightText; width: 25%"> fg: HighlightText <br /> Text of item(s) selected in a control. </td>
   <td style="background-color: white; color: HighlightText; width: 25%"> fg: HighlightText <br /> Text of item(s) selected in a control. </td>
</tr>
<tr>
   <td style="background-color: InactiveBorder; color: black; width: 25%"> bg: InactiveBorder <br /> Inactive window border. </td>
   <td style="background-color: InactiveBorder; color: white; width: 25%"> bg: InactiveBorder <br /> Inactive window border. </td>
   <td style="background-color: black; color: InactiveBorder; width: 25%"> fg: InactiveBorder <br /> Inactive window border. </td>
   <td style="background-color: white; color: InactiveBorder; width: 25%"> fg: InactiveBorder <br /> Inactive window border. </td>
</tr>
<tr>
   <td style="background-color: InactiveCaption; color: black; width: 25%"> bg: InactiveCaption <br /> Inactive window caption. </td>
   <td style="background-color: InactiveCaption; color: white; width: 25%"> bg: InactiveCaption <br /> Inactive window caption. </td>
   <td style="background-color: black; color: InactiveCaption; width: 25%"> fg: InactiveCaption <br /> Inactive window caption. </td>
   <td style="background-color: white; color: InactiveCaption; width: 25%"> fg: InactiveCaption <br /> Inactive window caption. </td>
</tr>
<tr>
   <td style="background-color: InactiveCaptionText; color: black; width: 25%"> bg: InactiveCaptionText <br /> Color of text in an inactive caption. </td>
   <td style="background-color: InactiveCaptionText; color: white; width: 25%"> bg: InactiveCaptionText <br /> Color of text in an inactive caption. </td>
   <td style="background-color: black; color: InactiveCaptionText; width: 25%"> fg: InactiveCaptionText <br /> Color of text in an inactive caption. </td>
   <td style="background-color: white; color: InactiveCaptionText; width: 25%"> fg: InactiveCaptionText <br /> Color of text in an inactive caption. </td>
</tr>
<tr>
   <td style="background-color: InfoBackground; color: black; width: 25%"> bg: InfoBackground <br /> Background color for tooltip controls. </td>
   <td style="background-color: InfoBackground; color: white; width: 25%"> bg: InfoBackground <br /> Background color for tooltip controls. </td>
   <td style="background-color: black; color: InfoBackground; width: 25%"> fg: InfoBackground <br /> Background color for tooltip controls. </td>
   <td style="background-color: white; color: InfoBackground; width: 25%"> fg: InfoBackground <br /> Background color for tooltip controls. </td>
</tr>
<tr>
   <td style="background-color: InfoText; color: black; width: 25%"> bg: InfoText <br /> Text color for tooltip controls. </td>
   <td style="background-color: InfoText; color: white; width: 25%"> bg: InfoText <br /> Text color for tooltip controls. </td>
   <td style="background-color: black; color: InfoText; width: 25%"> fg: InfoText <br /> Text color for tooltip controls. </td>
   <td style="background-color: white; color: InfoText; width: 25%"> fg: InfoText <br /> Text color for tooltip controls. </td>
</tr>
<tr>
   <td style="background-color: Menu; color: black; width: 25%"> bg: Menu <br /> Menu background. </td>
   <td style="background-color: Menu; color: white; width: 25%"> bg: Menu <br /> Menu background. </td>
   <td style="background-color: black; color: Menu; width: 25%"> fg: Menu <br /> Menu background. </td>
   <td style="background-color: white; color: Menu; width: 25%"> fg: Menu <br /> Menu background. </td>
</tr>
<tr>
   <td style="background-color: MenuText; color: black; width: 25%"> bg: MenuText <br /> Text in menus. </td>
   <td style="background-color: MenuText; color: white; width: 25%"> bg: MenuText <br /> Text in menus. </td>
   <td style="background-color: black; color: MenuText; width: 25%"> fg: MenuText <br /> Text in menus. </td>
   <td style="background-color: white; color: MenuText; width: 25%"> fg: MenuText <br /> Text in menus. </td>
</tr>
<tr>
   <td style="background-color: Scrollbar; color: black; width: 25%"> bg: Scrollbar <br /> Scroll bar gray area. </td>
   <td style="background-color: Scrollbar; color: white; width: 25%"> bg: Scrollbar <br /> Scroll bar gray area. </td>
   <td style="background-color: black; color: Scrollbar; width: 25%"> fg: Scrollbar <br /> Scroll bar gray area. </td>
   <td style="background-color: white; color: Scrollbar; width: 25%"> fg: Scrollbar <br /> Scroll bar gray area. </td>
</tr>
<tr>
   <td style="background-color: ThreeDDarkShadow; color: black; width: 25%"> bg: ThreeDDarkShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: ThreeDDarkShadow; color: white; width: 25%"> bg: ThreeDDarkShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: black; color: ThreeDDarkShadow; width: 25%"> fg: ThreeDDarkShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: white; color: ThreeDDarkShadow; width: 25%"> fg: ThreeDDarkShadow <br /> Dark shadow for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: ThreeDFace; color: black; width: 25%"> bg: ThreeDFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: ThreeDFace; color: white; width: 25%"> bg: ThreeDFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: black; color: ThreeDFace; width: 25%"> fg: ThreeDFace <br /> Face color for three-dimensional display elements. </td>
   <td style="background-color: white; color: ThreeDFace; width: 25%"> fg: ThreeDFace <br /> Face color for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: ThreeDHighlight; color: black; width: 25%"> bg: ThreeDHighlight <br /> Highlight color for three-dimensional display elements. </td>
   <td style="background-color: ThreeDHighlight; color: white; width: 25%"> bg: ThreeDHighlight <br /> Highlight color for three-dimensional display elements. </td>
   <td style="background-color: black; color: ThreeDHighlight; width: 25%"> fg: ThreeDHighlight <br /> Highlight color for three-dimensional display elements. </td>
   <td style="background-color: white; color: ThreeDHighlight; width: 25%"> fg: ThreeDHighlight <br /> Highlight color for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: ThreeDLightShadow; color: black; width: 25%"> bg: ThreeDLightShadow <br /> Light color for three-dimensional display elements (for edges facing the light source). </td>
   <td style="background-color: ThreeDLightShadow; color: white; width: 25%"> bg: ThreeDLightShadow <br /> Light color for three-dimensional display elements (for edges facing the light source). </td>
   <td style="background-color: black; color: ThreeDLightShadow; width: 25%"> fg: ThreeDLightShadow <br /> Light color for three-dimensional display elements (for edges facing the light source). </td>
   <td style="background-color: white; color: ThreeDLightShadow; width: 25%"> fg: ThreeDLightShadow <br /> Light color for three-dimensional display elements (for edges facing the light source). </td>
</tr>
<tr>
   <td style="background-color: ThreeDShadow; color: black; width: 25%"> bg: ThreeDShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: ThreeDShadow; color: white; width: 25%"> bg: ThreeDShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: black; color: ThreeDShadow; width: 25%"> fg: ThreeDShadow <br /> Dark shadow for three-dimensional display elements. </td>
   <td style="background-color: white; color: ThreeDShadow; width: 25%"> fg: ThreeDShadow <br /> Dark shadow for three-dimensional display elements. </td>
</tr>
<tr>
   <td style="background-color: Window; color: black; width: 25%"> bg: Window <br /> Window background. </td>
   <td style="background-color: Window; color: white; width: 25%"> bg: Window <br /> Window background. </td>
   <td style="background-color: black; color: Window; width: 25%"> fg: Window <br /> Window background. </td>
   <td style="background-color: white; color: Window; width: 25%"> fg: Window <br /> Window background. </td>
</tr>
<tr>
   <td style="background-color: WindowFrame; color: black; width: 25%"> bg: WindowFrame <br /> Window frame. </td>
   <td style="background-color: WindowFrame; color: white; width: 25%"> bg: WindowFrame <br /> Window frame. </td>
   <td style="background-color: black; color: WindowFrame; width: 25%"> fg: WindowFrame <br /> Window frame. </td>
   <td style="background-color: white; color: WindowFrame; width: 25%"> fg: WindowFrame <br /> Window frame. </td>
</tr>
<tr>
   <td style="background-color: WindowText; color: black; width: 25%"> bg: WindowText <br /> Text in windows. </td>
   <td style="background-color: WindowText; color: white; width: 25%"> bg: WindowText <br /> Text in windows. </td>
   <td style="background-color: black; color: WindowText; width: 25%"> fg: WindowText <br /> Text in windows. </td>
   <td style="background-color: white; color: WindowText; width: 25%"> fg: WindowText <br /> Text in windows. </td>
</tr>
</table>
</body></html>
Description
Indispensable list of color names provided in the "system" namespace and what they look like when rendered by the browser.
Comments (0)
 
Loading