Using color
Color is deliberately used to reinforce meaning or content hierarchy.
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


Static color tokens#
Static


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 base should only be used as empty space surrounding content or regions in
Background layer colors are
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.

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

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.

Color backgrounds#
Sometimes it’s necessary to use color for the background or fill of an object in an interface. Use
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


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
Two-tone color pairing#
Two


To create two-tone color pairs, use the 100
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


Interactive states increase the


Theme-specific colors get darker in light themes and lighter in dark themes for each state.
The change in
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.


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


Use gray tokens.


Don’t use transparent colors.
Communicating with color#
In order to be accessible for as many users as possible,


Use text and icons with color.


Don’t use color alone to communicate.
Create hierarchy with background layer colors#
Use


Use background layers for app framing


Don’t use global grays for app framing.
Provide sufficient contrast#
Use the appropriate
Choosing lower


Use background layers and correct color tokens.


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 (
Use static white or static black components instead of colored components on top of color or image backgrounds.


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


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


Use Spectrum colors as they are.


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


Use data visualization colors.


Don’t use theme colors for data visualization.