Digital Colors

The Digital team currently uses an expanded color palette (based on our Brand colors) to address the specific needs of our online properties. We use these to address accessibility concerns, add visual depth to UI components, etc.

Primary

Navy is always the dominant color signifying the SailPoint brand. For digital purposes, these colors are most commonly used in navigation bars (header, footer), headlines and sub-headers (H1 - H6), text and background color in illustrations, and occasionally as the text color for certain buttons in a hover state.

Secondary

These secondary colors are available when additional colors are needed, but should always allow the primary color to be dominant. These are also commonly used as a background color for alerts and buttons categorized as “info”, “success”, and “primary”, respectively.

Tertiary

This is typically used sparingly as an accent color, and as a “warning” background color for alerts and buttons.

Grays

The first four grays are used to complement the navy and add monotone range. The darkest gray (appearing almost black) is the default color of text when appearing on a white background. These grays may also be used to illustrate disabled buttons, faded text, captions and small notations.Navy

At this time, navy with a weight of 500 (#012168) is used as the primary color and should be dominant in all designs. These colors are most commonly used in navigation bars (header, footer), headlines and sub-headers (H1 - H6), text and background color in illustrations, and occasionally as the text color for certain buttons in a hover state.

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are typically to establish depth and provide alternative colors for accessibility.

Navy

At this time, navy with a weight of 500 (#012168) is used as the primary color and should be dominant in all designs. These colors are most commonly used in navigation bars (header, footer), headlines and sub-headers (H1 - H6), text and background color in illustrations, and occasionally as the text color for certain buttons in a hover state.

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are typically to establish depth and provide alternative colors for accessibility.

Purple

At this time, green with a weight of 500 (#753BBD) is used as a secondary color. It is also assigned to alerts, buttons, and illustrative components.

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are used typically to establish depth and provide alternative colors for accessibility.

Sky

At this time, green with a weight of 500 (#00B5E2) is used as a secondary color. It is also assigned to alerts, buttons, and illustrative component.s

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are used typically to establish depth and provide alternative colors for accessibility.

Green

At this time, green with a weight of 500 (#00B140) is also used as a secondary color. It is also assigned to alerts, buttons, and text categorized as "Success".

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are used primarily to establish depth and provide alternative colors for accessibility.

Gold

At this time, gold with a weight of 500 (#F2A900) is primarily used as a tertiary color for accents. It is also used as a color assigned to alerts, buttons, and provide a contrasting accent in illustrations/charts.

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are used typically to establish depth and provide alternative colors for accessibility.

Red

At this time, red with a weight of 500 (#D12D28) is only used as a color assigned to alerts and buttons, primarily characterized as

As with the colors defined in this palette, the varying values defined here are generated by a Material Design formula, and are used to exclusively to establish depth and provide alternative colors for accessibility.

Gray

The first four grays are used to complement the navy and add monotone range. The darkest gray (appearing almost black) is the default color of text when appearing on a white background. These grays may also be used to illustrate disabled buttons, faded text, captions and small notations.