CSS System Colour Names (css system color names)

I’m building myself a new admin interface for use on my projects, and wanted to use css system color names so that I could design a more “native” looking admin area.

Note: The colours are actually rather boring…

So I looked up this HTML table of CSS2 System Color Names, as per http://www.w3.org/TR/css3-color/#css2-system, I know they are deprecated in favour of CSS3 “appearance” but CSS2 isn’t going anywhere for a long time yet!

CSS System Color Names

Keyword Description Color
ActiveBorder Active window border.
ActiveCaption Active window caption.
AppWorkspace Background color of multiple document interface.
Background Desktop background.
ButtonFace Face color for three-dimensional display elements.
ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow Shadow color for three-dimensional display elements.
ButtonText Text on push buttons.
CaptionText Text in caption, size box, and scrollbar arrow box.
GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight Item(s) selected in a control.
HighlightText Text of item(s) selected in a control.
InactiveBorder Inactive window border.
InactiveCaption Inactive window caption.
InactiveCaptionText Color of text in an inactive caption.
InfoBackground Background color for tooltip controls.
InfoText Text color for tooltip controls.
Menu Menu background.
MenuText Text in menus.
Scrollbar Scroll bar gray area.
ThreeDDarkShadow Dark shadow for three-dimensional display elements.
ThreeDFace Face color for three-dimensional display elements.
ThreeDHighlight Highlight color for three-dimensional display elements.
ThreeDLightShadow Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow Dark shadow for three-dimensional display elements.
Window Window background.
WindowFrame Window frame.
WindowText Text in windows.

Using System Fonts in CSS

System fonts will be necessary of course:

Property Description Example
caption Controls font (buttons, drop-downs, etc.) ABC abc 123
icon Icon label font ABC abc 123
menu Menu font ABC abc 123
message-box Dialog box font ABC abc 123
small-caption Small control labels ABC abc 123
status-bar Status bar font ABC abc 123

Using CSS system color names should hopefully give me a nice looking interface, if used nicely of course! Possibly update this with a picture of the finished system when i’m done.




1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *