Adobe Logo

Spectrum

Color system

Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system.

Table of contents#

Grays#

Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any color. Neutral grays help to prevent the misinterpretation of colors due to chromatic adaptation or simultaneous contrast within color or image manipulation workflows.

Row of gray squares progressively getting darker from right to left.Row of gray squares progressively getting darker from right to left.

Each color theme uses gray-100 as the default background color (except when using background layers). The color value for gray-100 is different per color theme. Spectrum generates all other gray color values by target contrast ratios with the background color value. Grays are designed to provide optimal contrast for text and icon content in the interface.

Gray backgrounds#

Diagram showing a row of Spectrum’s gray colors. Gray-50, gray-75, gray-100, and gray-200 are background layers. Gray-100 is the default background color. The five darkest grays have 3:1 contrast and above (with gray-100) and the four darkest grays have 4:5:1 contrast and above (with gray-100).

Grays 50 through 200 are used for background layers, which create depth and visual hierarchy in the framing of an application. When not using background layers, gray-100 is the default background color.

Gray borders#

Row of Spectrum’s gray colors with annotations for decorative and app framing borders, field borders, and control borders. Control border is within 4.5:1 contrast with gray-100.

Grays 200 and 300 are used for decorative borders and application framing. These grays are used for subtle contrast when applied decoratively or in non-essential elements.

Gray-400 is used for field borders (which includes components such as text field and action button).

Gray-600 is used for control borders (such as in a switch, radio buttons, and a checkbox).

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Gray text#

Row of Spectrum’s gray colors with annotation for disabled text (which is 3:1 contrast with gray-100), Label text, subdued text, text, and heading (all above 4.5:1 contrast with gray-100).

Grays 700 through 900 are for text content. These color values provide sufficient contrast against gray-100 in order to meet WCAG contrast minimums. Gray-500 is reserved for disabled text, which does not need to meet contrast minimums. Disabled text is lower in contrast from non-disabled text in order to clearly signify that it is unavailable for user interaction.

When used for interactive text, the progression of color indices should conform to the guidelines on colors for interactive states.

Gray icons and illustrations#

Row of Spectrum’s grays with annotations for disabled icon, illustration (3:1 contrast with gray-100), subdued icon and icon (both above 4.5:1 contrast with gray-100).

Grays 600 through 900 are for icon content, and provide sufficient contrast against gray-100 (as well as gray-200) to meet contrast minimums.

Gray-500 is reserved for line illustrations. Gray-400 is reserved for disabled icons, which do not need to meet contrast minimums. Disabled icons are lower in contrast from non-disabled icons in order to clearly signify that they are unavailable for user interaction.

When used for interactive icons, the progression of color indices should conform to the guidelines on colors for interactive states.

Gray target contrast ratios#

Spectrum's grays follow a perceptually curved progression of lightness. The outcome is a progression of gray color values that are optimal for Spectrum's usage of gray. Each lightness value was converted into a target contrast ratio, which follow a polynomial curve.

Grays include contrast ratios above and below a 1:1 contrast with the background. Contrasts below 1:1 produce grays that are lighter than gray-100 in light theme and darker than gray-100 in dark themes.

Dark themes target higher contrast ratios to provide appropriate and perceptually consistent contrast when compared to the light theme.

Charts illustrating lightness progression and contrast ratio progressions for Spectrum grays. They illustrate curves within available contrast gamut. Actual maximum ratio differs per theme.

Colors#

Spectrum uses 13 colors per color theme with a set of 14 tints and shades per color. Colors are used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication. Using too much color can be visually overwhelming and impacts user experience.

Row of squares colored red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, and magenta.Row of squares colored red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, and magenta.

Colors give users context within their workflow and create a hierarchy of actions within the UI. Items in a selected or keyboard focus state are given visual importance since they relate to a user’s immediate actions.

Colors can also be used to show relationships between content types (e.g., categorization, labels in data visualizations). The categorical color palette for data visualization is a subset of these colors. It ensures the highest degree of identifiability of colors for various color vision deficiencies.

For more information on using colors, view Communicating with color.

Color semantics#

Spectrum assigns generic meanings to a subset of colors in order to set consistent expectations for users. These meanings are codified in design tokens and used throughout components.

Semantics can be used in a variety of ways to communicate meaning. Spectrum's semantic meanings include informative, accent, negative, notice, and positive. Use semantic colors to clearly and predictably communicate with a component’s appearance. When using color with semantic meaning, you must also display text or an icon in order to ensure the meaning is not lost for users who are unable to see or differentiate colors.

Colors have different emotional, political, and cultural meanings around the world. Spectrum tokens are not localized, so be sure to follow international design guidelines on color when building a global application.

Diagram illustrating through labels the semantic color meanings for red (negative), orange (notice), green (positive), and blue (informative and accent).

Color backgrounds#

Row of Spectrum’s blue colors with annotations for component backgrounds with static color, along with contrast against black and white (all above 4.5:1).

Static color 900 is used for most solid color backgrounds in components. These colors should be taken from the static color palette and used with white text and icons only.

Static colors 300 through 600 are reserved for specific solid color backgrounds in components (yellow, orange, cyan, and chartreuse). These colors should be taken from the static color palette and used with black text and icons only.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Row of Spectrum’s blue colors with annotation for two-tone backgrounds.

Theme-specific color 100 is used for two-tone color pairs. These colors are low contrast and pair well with specific color tokens for text and icons.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Color borders#

Row of Spectrum’s blue colors with annotation for semantic borders (700 and 800 index are 3:1 contrast).

Colors 600 through 800 are used for semantic component border colors. Non-semantic border colors use color 800.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Color text#

Row of Spectrum’s blue colors with annotation for text content (4.5:1 with gray-100).

Color 900 is used for colored text content, but Spectrum only supports the use of colored text for the accent and negative semantics.

When used for interactive text, the progression of color indices should conform to the guidelines on colors for interactive states.

Color icons and illustrations#

Row of Spectrum’s blue colors with annotation for icons and illustrations (from 3:1 to 4.5:1 and higher contrast with gray-100).

Colors 700 through 1100 are used for icon and illustration content. Specific color indices can be chosen in order to maintain appropriate hue identifiability and visual weight for each color when used in icons or illustrations. For example, yellow-700 may be an optimal color token for an icon in light theme, but yellow-1100 is optimal in darkest theme.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Decorative colors#

Row of Spectrum’s blue colors with annotation for decorative colors (all below 3:1 contrast with gray-100).

Colors 400 through 600 can be used for nonessential UI decoration. These colors have lower contrast with gray-100 and should be used sparingly and with caution. They should never be used to communicate essential information to users.

Color target contrast ratios#

Spectrum’s colors follow a perceptually linear progression of lightness. This is accomplished by plotting the lightness values along a subtle curve in a uniform color space. The curve combats the effects of Stevens' power law.

The outcome is a balanced, evenly distributed set of color values. Each lightness value was converted into a target contrast ratio, which follow a polynomial curve.

These color values are best for providing a flexible color system. When colors are used for interactive states, they have an even change in lightness, regardless of which colors are used.

Charts illustrating the lightness progression and contrast ratio progressions for Spectrum colors.

Transparent white and black#

Spectrum offers a set of 8 color values of white and black using transparency. These colors are a translation of the grays in a format that can be used over colored backgrounds or images.

Two rows of Spectrum’s transparent white and transparent black colors.Two rows of Spectrum’s transparent white and transparent black colors.

The transparent white and transparent black colors are only for use in components that support a transparent color option (such as an action button). These should not be used for any other purpose.

Use the transparent white colors when the background color or image has a lightness value less than 50% (e.g., rgb(112, 112, 112)).

Use the transparent black colors when the background color or image has a lightness value greater than 50% (e.g., rgb(119, 119, 119)).

Transparent white or black backgrounds#

Row of Spectrum’s transparent white and transparent black colors with annotation for component background, disabled background, and selected background (3:1 contrast).

Transparent-white-200 or transparent-black-200 are used for component backgrounds. In some cases, a component will use a transparent background for the default state.

Transparent-white-800 or transparent-black-800 are used for component backgrounds in a selected state.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Transparent white or black borders#

Row of Spectrum’s transparent white and transparent black colors with annotation for disabled border and field border (both below 3:1 contrast).

Transparent-white-400 and transparent-black-400 are used for field borders (which includes components such as the text field and action button).

Transparent-white-200 and transparent-black-200 are used for disabled component borders.

When used on an interactive component, the progression of color indices should conform to the guidelines on colors for interactive states.

Transparent white or black text and icons#

Row of Spectrum’s transparent white and transparent black colors with annotation for disabled text and icon (below 3:1 contrast), and text and icon (4.5:1 contrast or above).

Transparent-white-900 and transparent-black-900 are used for text and icon content to ensure sufficient contrast on variable background colors. Variable background colors are colors that are determined at the product implementation level, and are not controlled by the Spectrum color system.

When used for interactive text or icons, text and icon colors do not change.

Transparent white and black contrast ratios#

Spectrum’s transparent white and black approximate the color values of the gray system. Contrast is not consistent or predictable for colors with an alpha transparency.

The transparent white and black colors were evaluated against a mid-tone gray to ensure contrast minimums are met or exceeded, so long as the appropriate colors are used.

Two columns demonstrating transparent white and transparent black version of an action button component on various background colors.

Static color palette#

Static colors have consistent color values across all themes and are not based on contrast with the background color of the theme. These are used when the identifiability of color's hue is a high priority, to ensure that a lighter color (such as yellow) remains a light value regardless of the theme.

Lighter static color backgrounds (100-800) use black text over the color. Darker static colors (900-1400) use white text over the color. This ensures that text will remain at least 4.5:1 or above in contrast with the color.

Static colors are identifiable across themes and have 4.5:1 or more contrast with black or white text. Example of two badges, one blue that says Licensed and one yellow that says Pending, in light theme and darkest theme.

Resources#

Contrast and color accessibility (WebAIM)