Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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-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-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-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.
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.
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.