Standard ways to assign color values
Contents
- Standard HTML Color Names
- User Preferences for Colors
- Using Single-Digit HEX RGB Value for Colors
- Using Double-Digit HEX RGB Value for Colors
- Using RGB Percentage Values for Colors
- Using Eight-Bit RGB Values for Colors
Standard HTML Color names
Use these in a document via the style color:color_name
| Color Name | Example | Hex Equivalent |
|---|---|---|
| Black | Black | #000000 |
| Silver | Silver | #C0C0C0 |
| Gray | Gray | #808080 |
| White | White | #FFFFFF |
| Maroon | Maroon | #800000 |
| Red | Red | #FF0000 |
| Purple | Purple | #800080 |
| Fuchsia | Fuchsia | #FF00FF |
| Green | Green | #008000 |
| Lime | Lime | #00FF00 |
| Olive | Olive | #808000 |
| Yellow | Yellow | #FFFF00 |
| Navy | Navy | #000080 |
| Blue | Blue | #0000FF |
| Teal | Teal | #008080 |
| Aqua | Aqua | #00FFFF |
User preferences for colors
CSS2 allows authors to specify various UI elements colors as colors in their styles; e.g., color:ActiveBorder. Here are examples:
| Example | Constant | Description |
|---|---|---|
| ActiveBorder | ActiveBorder | (active window border) |
| ActiveCaption | ActiveCaption | (active window caption) |
| AppWorkspace | AppWorkspace | (background color of multiple document interface) |
| Background | Background | (desktop background) |
| ButtonFace | ButtonFace | (face color for 3-d display elements) |
| ButtonHighlight | ButtonHighlight | (dark shadow for 3-d display elements for edges facing away from the light source) |
| ButtonShadow | ButtonShadow | (shadow clor for 3-d display elements) |
| ButtonText | ButtonText | (text on push buttons) |
| CaptionText | CaptionText | (text in caption, size box, and scrollbar arrow box) |
| GrayText | GrayText | (disabled text) |
| Highlight | Highlight | (item(s) selected in a control) |
| HighlightText | HighlightText | (text of items selected in a control) |
| InactiveBorder | InactiveBorder | (inactive window border) |
| InactiveCaption | InactiveCaption | (inactive window caption) |
| InactiveCaptionText | InactiveCaptionText | (color of text in inactive caption) |
| InfoBackground | InfoBackground | (background color for tooltip controls) |
| InfoText | InfoText | (text color for tooltip controls) |
| Menu | Menu | (menu background) |
| MenuText | MenuText | (text in menus) |
| Scrollbar | Scrollbar | (scroll bar gray area) |
| ThreeDDarkShadow | ThreeDDarkShadow | (dark shadow for 3-d display elements) |
| ThreeDFace | ThreeDFace | (face color for 3-d display elements) |
| ThreeDHighlight | ThreeDHighlight | (highlight color for 3-d display elements) |
| ThreeDLightShadow | ThreeDLightShadow | (Light color for 3-d display elements for edges facing the light source) |
| ThreeDShadow | ThreeDShadow | (dark shadow for 3-d display elements) |
| Window | Window | (window background) |
| WindowFrame | WindowFrame | (window frame) |
| WindowText | WindowText | (window text) |
Using Single-Digit HEX RGB Values for Colors
You are allowed to specify Single-Digit HEX RGB values. Try it! You can use any value from 0 to f in each of the three boxes. Note that what happens is that the style processor will automatically double the digits for you. For example, if color:#777 is specified, what gets rendered is color:#777777.
Using Double-Digit HEX RGB Values for Colors
You are allowed to specify Double-Digit HEX RGB values. Try it! You can use any value from 00 to ff in each of the three boxes.
RGB By Percent
You are allowed to specify percent values for RGB. Try it! You can use any value from 0 to 100 in each of the three boxes.
Eight Bit RGB
You are allowed to specify eight-bit values for RGB. Try it! You can use any value from 0 to 255 in each of the three boxes.