Color Palette and Color Usage
Last Updated
19-Nov-2003
General Description
BLAF (Browser Look and Feel) uses a set of color palettes, a base color palette, a graph/chart palette, and if necessary for ancillary graphics, the Web-safe 216 color palette. Every color used within a BLAF application should come from one of these palettes.
Example of Color Usage on a BLAF Page
The BLAF color palettes, and the distinct color sets or color ramps within each palette are as follows:
Spec Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Nute, Nina Gilmore (graph palette), Mervyn Dennehy
UI Models - all models
Example Products - all products
Related Guidelines - all
Interaction and Usage Specifications
BLAF applications use predefined color palettes that have been tested across various system configurations. These color palettes provide core and accent colors, and other sets of colors for specific purposes, such as graphs. With one exception, all BLAF color palettes represent a subset of the Web-safe 216 color palette.
All Oracle development teams are required to use the BLAF color palettes within their applications. Oracle customers, however, can customize the base BLAF XML style sheets to change the color palettes of Oracle applications used within their organizations.
For details on monitor color depths, see the Browser and System Requirements guideline.
The BLAF base color palette is divided into sets of colors or color ramps:
- Core Colors
- Accent Colors
- Extra Accent Colors
- Other Base Colors (white background, href links, and error)
BLAF Base Color Palette
For specific color usage within a component, see individual component specifications.
Core Colors
Core colors are the dominant color set in the base palette. They are the strongest and most saturated, and are used for core UI elements, or elements of importance in the UI. Consequently, certain components, such as the tab bar, make heavy use of this color set.
BLAF Core Colors
Accent Colors
Accent colors are a complementary set of colors in the base palette. This set is not as saturated, has a more neutral tone, and complements the core colors. A common usage for an accent color in UI elements or components is as a background fill. For example, both action/navigation buttons and table backgrounds are filled with the lightest value.
BLAF Accent Colors
Extra Accent Colors
Extra accent colors consist of a grey color ramp. This set is rarely used, but is available to add depth to the color palette. At this time, the only usage is to create a 3-dimensional shadow effect for the tab component.
BLAF Extra Accent Colors
Other Base Colors
Other base colors are as follows:
- White: Used for the background color of the entire page (browser window).
- Href/Link Colors: This set of browns is only used for href tags/hyperlinks
- Error: This red color is only used for error elements. See individual component specifications, such as Inline Messaging and Tips and Message Box for detailed usage.
BLAF Other Base Colors
Colors used in the BLAF graph palette are designed to harmonize with BLAF Base Colors, but also provide contrasting values so that graph information is clear and legible. The BLAF Graph/Chart Color palette has been tailored to be distinguishable and attractive across various displays (computer monitor, projection, and printing.)
The full palette is comprised of a set of six five-color ramps. A graph or chart may use 1 set, 2 sets, 3 sets, or up to all 6 sets (30 colors maximum). All 30 colors are displayed below, including the 6 color ramps. The image also provides an example of what the BLAF Graph colors look like when printed on a black and white printer. Consider your usage and note that too many colors in one graph make it hard for the user to recognize variations and ultimately read the graph data.
Also included are the Hexadecimal and RGB color values for all 30 color series.
Default Graph Color Values
| Color # |
Hex Value |
RGB Value |
| 1 |
#336699 |
51.102.204 |
| 2 |
#99CCFF |
153.204.255 |
| 3 |
#999933 |
153.153.51 |
| 4 |
#666699 |
102.102.153 |
| 5 |
#CC9933 |
204.153.51 |
| 6 |
#006666 |
0.102.102 |
| 7 |
#3399FF |
51.153.255 |
| 8 |
#993300 |
153.51.0 |
| 9 |
#CCCC99 |
204.204.153 |
| 10 |
#666666 |
102.102.102 |
| 11 |
#FFCC66 |
255.204.102 |
| 12 |
#6699CC |
102.153.204 |
| 13 |
#663366 |
102.51.102 |
| 14 |
#9999CC |
153.153.204 |
| 15 |
#CCCCCC |
204.204.204 |
| 16 |
#669999 |
102.153.153 |
| 17 |
#CCCC66 |
204.204.102 |
| 18 |
#CC6600 |
204.102.0 |
| 19 |
#9999FF |
153.153.255 |
| 20 |
#0066CC |
0.102.204 |
| 21 |
#99CCCC |
153.204.204 |
| 22 |
#999999 |
153.153.153 |
| 23 |
#FFCC00 |
255.204.0 |
| 24 |
#009999 |
0.153.153 |
| 25 |
#99CC33 |
153.204.51 |
| 26 |
#FF9900 |
255.153.0 |
| 27 |
#999966 |
153.153.102 |
| 28 |
#66CCCC |
102.204.204 |
| 29 |
#339966 |
51.153.102 |
| 30 |
#CCCC33 |
204.204.51 |
Stock Graph Color Values
| Falling Values |
#CC0000 |
204.0.0 |
| Rising Values |
#00CC00 |
0.204.0 |
| Volume |
#0000CC |
0.0.204 |
Oracle developers can see more information on graphs/charts, in the Oracle internal Graph/Chart guideline.
The Web-safe color palette (216 colors) is a Web graphics development standard. With one exception, all colors from the BLAF Base Color Palette and the BLAF Graph Palette are part of the Web-safe palette. The exception is the lightest accent color value in the BLAF Base Color palette, which is outside of the Web-safe palette range.
It is required that every color within the BLAF palettes (except the one noted above) be within the Web-safe palette to ensure consistent rendering on multiple browsers, multiple operating systems, and multiple monitor color depth settings.
The generic Web-safe palette is rarely used in BLAF applications. This extended palette should only be used sparingly in ancillary graphics, and occasionally in specifically approved icons. Two examples of the Web-safe 216 palette are displayed below. (These palettes below provide the same color values, but are displayed in different orders.)
The following image displays Pantone equivalents for the BLAF Base Color Palette. Pantone colors are used specifically for printing. Each Pantone color has an equivalent "color recipe" so that primary colors can be mixed together and used on a printing press. The Pantone color system is one of the most commonly used systems for printing colors.
The BLAF Base Color Pantone Equivalents should be used only for printed material. These Pantone colors are specifically selected for uncoated paper.
It is inadvisable to use colors outside of the Web safe palette shown above, or above an 8-bit (256) color monitor's capabilities. The only approved color outside of this range is the lightest accent color value within the BLAF Base Color Palette. Miminal to low usage of high depth colors reduces the chances of unexpected results on multiple browsers viewed with the
display set at 256 colors (8-bit color depth).
BLAF Base Color Palette - RGB and Hexidecimal Values
The following image shows the BLAF Base Color palette for HTML applications. Hexadecimal and RGB values are given with each color swatch.
Open/Closed Issues
Open Issues
- 25-Sep-2002: User ability to select from different BLAF core palette options will be evaluated after v3.0
Closed Issues
- BLAF color names included
- Web safe palette added with description
- BI color palette work from BI incorporated
- Link to internal BI Graph document included