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.
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.
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.
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.
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 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.
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.
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.
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.
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.
Transparent-white-200 and transparent-black-200 are used for disabled component borders.
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.