Color fundamentals
Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility.
Glossary of terms#
Spectrum uses a number of terms to talk about color in the context of the design system. These words may have slightly different usages or definitions compared to some precedents in the product design and development communities, but they’ve been chosen intentionally and purposefully. The following terms are the foundations to understanding the many aspects of the Spectrum color system.


Color#
Used generically to refer to named colors (e.g., red).
Hue#
Some
Saturation#
The amount of chromatic intensity, or “colorfulness” of a
Lightness#
Tint#
A lighter value of a color.
Shade#
A darker value of a color.
Tone#


Color value#
The specific alphanumerical code representation of a
Color token#
A
Color index#
A numerical representation of a
Tuples#
An immutable list of elements.


Contrast ratio#
The measurable difference in
Target contrast ratio#
The desired
Color theme#
The full set of
Color space#
The available visible spectrum of
Color model#
Mathematical representation of color for a particular
Device color mode#
A device color mode (also just called “mode”) is an operating system setting that affects the theming of an entire device. The two options supported by most devices are device light mode and device dark mode. Spectrum defines specific
Color profile#
Device color attributes, which are mapped between the device source and target color space.
Color themes and modes#
Spectrum offers three color themes: light, dark, and darkest. These themes are available in light and dark device color modes. The choice of default theme in each device mode, or which themes to support, should be based on content, platform, and user experience. When multiple themes are supported, users generally expect that an app would switch themes based on device mode.


Device light mode#
In light mode, Spectrum has two default theme options: light theme and dark theme. Dark theme is an option for experiences that are optimal with a darker interface regardless of the device mode, such as photo and video editing. Applications can present users with additional theme options besides the default theme.

Device dark mode#
In dark mode, Spectrum has a single default theme: darkest theme. The darkest theme aligns with operating system dark modes, such as the use of a black background. Applications can present users with additional theme options besides the default theme.

Contrast-generated colors#
Spectrum's color themes are generated using


Blue-900, which has higher contrast on dark themes, resolves to different color values for each theme.
As the color token name increases in number (e.g., blue-700, blue-800, blue-900), the color value’s contrast with the background also increases. Because of this, colors progressively get darker in light theme and lighter in dark themes.


Blue-700, blue-800, and blue-900 progression shown in light theme (colors get darker) and dark theme (colors get lighter).
Color gamuts#
Color and visual perception#
It’s important to address perceptual phenomena (or illusions) that people may experience from Spectrum’s color system, to help design system users better understand why UI users may be seeing what they see. Topics covered here correspond to fundamental choices or guidelines in Spectrum's color system.
Certain perceptual phenomena are visible when evaluating the colors as a whole, or when using colors in UI design.
Uniform color space#
Uniform color spaces are
Spectrum’s colors have been evaluated using the


Spectrum avoids using color spaces that are non-uniform (such as HSL) for authoring and evaluating colors — whether related to color harmonies, or the transitions each color makes from light to dark and the way