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

General Information

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.

BLAF Base Color Palette and Palette Usage

The BLAF base color palette is divided into sets of colors or color ramps:
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:
BLAF Other Base Colors

BLAF Graph/Chart Color Palette and Palette Usage

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.

Web-safe Color Palette and Palette Usage

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.)

Pantone Equivalents for BLAF Base Color Palette

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.

Color Depth and High Color Usage (16bit+)

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).

Visual Specifications

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