Spectrum

Using color

Color is deliberately used to reinforce meaning or content hierarchy.

Table of contents#

Theme colors vs. static colors
Background layers
App framing
Color backgrounds
Colors for interactive states
Usage guidelines

Theme colors vs. static colors#

There are two important considerations when deciding between using theme colors or static colors: what the color is going to be applied to and what the color's relationship will be with other colors or objects.

Make this choice in a way that ensures an appropriate level of contrast is given to an object and any text or iconography.

Theme-specific color tokens#

Theme-specific color tokens return color values for each color theme. Use theme-specific color tokens for most uses of color, such as when the color will be applied to text, icons, or the borders of a component. They should be used for anything that needs to meet the WCAG contrast minimum or non-text contrast when placed over a background color of gray-50 through gray-200.

Static color tokens#

Static color tokens have the same color value across all color themes. Use static color tokens when using color as a background, with text or icons on top of the color. These colors should be used with black or white text or icons, depending on which provides the best contrast. For example, when used as a background, static-blue-900 should be paired with white text, and static-yellow-300 should be paired with black text.

Background layers#

Spectrum provides three background layer color options for use in application framing: background layer 1, background layer 2, and background base. Background layer colors create dimension, hierarchy, and separation between content. Use these in large regions of layout — not for component backgrounds.

Background layer	Light theme	Dark and darkest themes
Background base	gray-200	gray-50
Background layer 1	gray-100	gray-75
Background layer 2	gray-50	gray-100

Background base should only be used as empty space surrounding content or regions in professional editing applications. Placing components, icons, or text content directly on background base may not provide sufficient contrast in light theme.

Background layer colors are alias tokens in Spectrum’s design tokens. They reference different gray color tokens per theme, creating dimensionality that persists across themes.

App framing#

Background layer colors create the scaffolding of a product’s user interface: the application frame. The level of scaffolding depth needed is dependent upon the product, content, users, and platform. Spectrum supports a variety of options using background layers to provide product flexibility.

Professional editing applications#

One option for these types of applications is to use background layer 1 for the header, footer, toolbars, and paneling. Background layer 2 is used for content (excluding artboards). Background base is used for pasteboards or surrounding backgrounds in photography, video, 3D, or compositing apps.

Key example of professional editing application framing option 1.

Another option is to use background layer 2 for the header, footer, toolbars, and paneling. This puts the frame at the same level of dimension as the primary content. No part of this option uses the background layer 1. This is useful when needing to conform to platform conventions (e.g., the prominent usage of white for application frames in Android light mode).

Key example of professional editing application framing option 2.

Lightweight editing and content-based applications#

These types of applications need less dimension to the application frame. The header, footer, toolbars, panels, and primary content all use the background layer 2. Areas that contain content (such as a gallery of cards) use the background layer 1. No part of this option uses background base.

Key example of lightweight editing and content-based application framing option.

Color backgrounds#

Sometimes it’s necessary to use color for the background or fill of an object in an interface. Use color backgrounds sparingly, except for the following cases.

Solid color background with black or white#

For these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and cyan while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette.

Key example illustrating Badge component with a generic label, Label, colored backgrounds and white text, except orange, yellow, chartreuse, and cyan which have black text.

Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette.

Two-tone color pairing#

Two color tokens of the same hue can be combined to create subtle background colors with colored icons or illustrations. These are used for actions or objects that need additional visual distinction in the interface.

Key example of components using two-tone background colors with two-tone foreground colors for iconography. Four actions with icons, labels Auto straighten, Remove background, Auto crop, Export to PNG.

To create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700.

Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users.

Colors for interactive states#

Spectrum components follow a consistent guideline for applying color tokens as interactive states.

Light theme-specific blue tokens for state progression, beginning with blue-900. Default state is 900 value, hover and keyboard focus states are 1000, and down state is 1100.

Interactive states increase the color indices incrementally from default, to hover, and down. Keyboard focus state is equal to the presentation of the hover state with an additional focus indicator. Contrast should be relative to either the background of the application or the color of text (when using color as a background).

Components using static colors get darker for interactive states, whereas theme-specific colors increase in contrast for interactive states. Two examples, an action button and a switch.

Theme-specific colors get darker in light themes and lighter in dark themes for each state. Static colors progressively get darker, regardless of the color theme.

The change in lightness from one state color to the next will appear to be the same amount of change whether the color is dark or light. This is due to the perceptually linear progression of lightness in Spectrum’s colors.

Usage guidelines#

Don't create your own colors#

Every part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards.

Image showing through labels components with colors that have incorrectly been changed to non-Spectrum colors.

Don’t use custom colors.

Using transparency#

Spectrum’s colors are opaque and should not be replaced by using transparencies to achieve the same colors. There are only a few instances where it's acceptable to use transparency: for background overlays, drop shadows, and highlight selection styles.

When designing components to be placed over a colored background or image, refer to the transparent white and black color palette.

Image showing blocks of text correctly using gray-600 on both light and dark color themes.

Use gray tokens.

Image showing blocks of text incorrectly using 54% transparency black on both light and dark theme, which yields inaccessible text.

Don’t use transparent colors.

Communicating with color#

In order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning.

Key example of a text field, correctly communicating an error with both red color, an alert icon, and an in-line text alert.

Use text and icons with color.

Key example of a text field, incorrectly communicating an error with only red color.

Don’t use color alone to communicate.

Create hierarchy with background layer colors#

Use background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes.

Key example of background layers stacked correctly for light and dark themes.

Use background layers for app framing

Key example of incorrect use of gray color tokens as background colors

Don’t use global grays for app framing.

Provide sufficient contrast#

Use the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme.

Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product.

Key example of correct color token usage on background layers with sufficient contrast.

Use background layers and correct color tokens.

Key example of incorrect color token usage on incorrect background colors, resulting in insufficient contrast.

Don’t use global grays for backgrounds or use different color tokens than specified.

Hue and saturation contrast#

Avoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users.

Use static white or static black components instead of colored components on top of color or image backgrounds.

Key example of correct use of static-white component on a red background, and colored CTA button on gray background.

Change one of the element's colors to avoid hue contrast issues.

Key example of incorrect usage of colored CTA button on a red background.

Don’t combine elements with contrasting hues of similar saturation and lightness.

Programmatic color changes#

Do not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors.

Key example of correct use of color token blue-300 in application code.

Use Spectrum colors as they are.

Key example of incorrectly changing color token blue-300 using a lightening function in the application code.

Don’t programmatically modify Spectrum colors.

Use data visualization colors for charts#

Colors for data visualization are unique and should be used appropriately. Do not use theme-specific or static colors. View Color for data visualization for appropriate colors and guidelines.

Key example of correct usage of Spectrum sequential colors for data visualization.

Use data visualization colors.

Don’t use theme colors for data visualization.

Color system

Palette