Adobe Logo

Spectrum

Version 5.0.1

Color

Spectrum colors are designed to be clear and accessible. They come in different color themes. Each theme is constituted of grays, semantic colors (e.g., blue, red, orange, green), and label colors.

gray 50
#ffffff
gray 75
#fafafa
gray 100
#f5f5f5
gray 200
#eaeaea
gray 300
#e1e1e1
gray 400
#cacaca
gray 500
#b3b3b3
gray 600
#8e8e8e
gray 700
#6e6e6e
gray 800
#4b4b4b
gray 900
#2c2c2c
gray 900
#2c2c2c
blue 400
#2680eb
blue 500
#1473e6
blue 600
#0d66d0
blue 700
#095aba
red 400
#e34850
red 500
#d7373f
red 600
#c9252d
red 700
#bb121a
orange 400
#e68619
orange 500
#da7b11
orange 600
#cb6f10
orange 700
#bd640d
green 400
#2d9d78
green 500
#268e6c
green 600
#12805c
green 700
#107154

Table of contents#

Color themes and modes#

Spectrum offers 4 color themes: 2 light and 2 dark. Each product can support any number of color themes, allowing users to switch between them. The choice of which color themes to support should be based on content, platform, and user experience.

Color themes and device color modes#

Color themes and device color modes are different. Color themes are app-specific options, while device color modes (light mode and dark mode) are operating system settings that affect the theming of an entire device.

Device light mode#

In light mode, Spectrum has two possible default themes: light theme and dark theme. The option of a dark theme is for supporting experiences that are optimal with a darker interface regardless of the device mode, such as photo and video editing.

Key example of light mode application using light theme or dark theme

Device dark mode#

In dark mode, Spectrum has a single default theme: darkest theme. The darkest theme aligns more closely with operating system standards for dark mode, such as near-black backgrounds. Spectrum does not support using any of the light themes in dark mode.

Key example of dark mode application using dark theme

Target contrast ratio#

All of the colors in Spectrum color themes are generated by target contrast ratio. This maps certain grays and colors with confidence that the color will meet WCAG AA accessibility requirements for minimum contrast. The brightness of overall contrast can also be increased or decreased for any theme.

Image showing how a gradient of blue from black to white has gradient values of blue that meet a 3:1 contrast ratio, and how those gradient values are mapped to color themes.

Using the color system#

Every part of the interface in any possible state (hover, disabled, etc.) is mapped to one of the tints and shades defined in Spectrum. Constraining the interface to a set number of colors ensures a high level of consistency between products while providing flexibility and context for use of color. It also ensures accessible contrast when colors are used correctly.

Image illustrating through labels the color aliases used in a text field, including gray 700 for the label, gray 600 for the placeholder text, gray 50 for the background of the text field, and blue 400 for the border.

Grays#

Spectrum uses 11 shades of gray per color theme. These grays are neutral (not tinted), which means that they can work alongside any brand color and don’t draw a user’s attention away from the main focus on a color manipulation task or workflow.

Generating the grays#

Each color theme defines a gray color as the base background color (gray-100). The other 10 grays are then generated by targeting pre-defined contrast ratios from that base background, either lighter or darker. The dark and darkest themes are generated with higher contrast ratios than the light and lightest themes, ensuring that the contrast appears visually consistent.

Each gray color has a specific intent; for example, gray-700 and above can be used for text. Gray-50 and gray-75 are alternative backgrounds for creating hierarchy within components such as tables and popovers.

Diagram illustrating through labels the 11 grays in Spectrum, each superimposed with their target contrast ratio compared to the light UI background, which is gray 100. Gray-75 and gray-50 are alternate backgrounds, gray-500 is used for disabled text, gray-600 for placeholder text, and gray-700, gray-800, and gray-900 are used for text content.

Semantic colors#

Semantic colors have assigned meanings and are used consistently throughout Spectrum to set expectations of meaning for users. Color is used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication. Too much color can create cognitive overload, affecting users’ ability to efficiently interact with products.

Image showing Spectrum's four main semantic colors in four values each, blue for informative, red for negative, orange for warning, and green for positive. Image showing Spectrum's four main semantic colors in four values each, blue for informative, red for negative, orange for warning, and green for positive.

Visual communication#

Colors can be used in a variety of ways to communicate meaning to users. The semantic meanings in Spectrum include “informative,” “negative,” “notice,” and “positive.” Use semantic colors as a clear and predictable way to communicate meaning through a component’s appearance. When using color semantics in a way that is not purely decorative, text or an icon must also be displayed in order to be accessible. Color should never be used by itself for communication.

Color is also used to give users context within their workflow and to create hierarchy within the UI. Selected or keyboard-focused items are given visual importance as they relate to a user’s immediate actions.

Accessibility and contrast#

Each color in the Spectrum system has a hue set, which adheres to accessibility standards without compromising the visual language. For blue, red, and green, the 400 color value (e.g., blue-400) is at least a 3:1 contrast ratio, which adheres to WCAG AA standards for text that is size 15 px bold or larger than 18 px. We also guarantee that the 500 color value for each of those three colors has at least a 4.5:1 contrast ratio, which adheres to WCAG AA standards for regular body text.

Similar to the grays, our colors are defined and generated by contrast ratio. The 300 value has the lowest contrast with the background and the 600 value has the highest contrast. Basing our color system on contrast allows us to transition between color stops without redefining how and where certain colors are applied.

We’re working towards having a single adaptive color theme. All existing themes are an output of the adaptive theme with preset brightness and contrast values. The method of generating Spectrum colors based on contrast ratio allows us to work towards implementing a color system that elevates inclusivity by giving users control over the brightness and contrast of a product.

Static colors#

Static colors are persistent across all themes. Other colors in our system need different values so that they can be used on theme-specific backgrounds. Static colors are used for backgrounds, and they are always paired with white text. In order to meet the minimum contrast ratio required by WCAG 2.0 AA standards, contrast is based on white text against the static color. Because of this, static colors retain the same color value across all themes.

Image illustrating through labels components using static colors which do not change based on the background, unlike the rest of Spectrum's grays and colors. In this example, the call to action button uses static-blue-500 in all color themes, and the negative tooltip uses static-red-600 in all color themes. Image illustrating through labels components using static colors which do not change based on the background, unlike the rest of Spectrum's grays and colors. In this example, the call to action button uses static-blue-500 in all color themes, and the negative tooltip uses static-red-600 in all color themes.

Label colors#

Label colors have no semantic meaning attached to them. They can be used to show relationships between content types (e.g., categorization, labels in data visualizations).

Shows examples of label colorsShows examples of label 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 whose colors have incorrectly been changed to non-Spectrum colors.

Transparency#

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

Image showing blocks of text correctly using gray-700 on both light and dark color themes.
Image showing blocks of text incorrectly using 54% transparency black on both light and dark theme, which yields inaccessible text.

Communicating with color#

In order to be accessible for every user, 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.

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

Use alternate background colors sparingly#

Gray-100 is the default background color for all themes. Use this for primary scaffolding of products such as toolbars, header bars, and panels. It’s also highly recommended as the default gray value for regions of your product.

Only use the alternative background colors of gray-75 or gray-50 for subsections, or for when you need to create additional hierarchy while already adhering to the defaults.

Do not use gray-75 or gray-50 for primary layout regions of your product; this will conflict with the usage of grays in Spectrum components and will also result in a loss of visual structure. Calls to attention, such as hero images or large content blocks in marketing sites, qualify for the usage of alternative backgrounds.

Key example showing correct use of alternate background for amarketing callout within the UI. Includes text "Get a feel for Fresco, Learn where everything is and how it works" with button "Take interactive tour".
Key example illustrating incorrect usage of alternative background for UI background.

Changelog#

DateNumberNotes
Sep 24, 20195.0.1
  • Removed guideline about label color order and colorblindness.
Apr 20, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)