Spectrum
Color fundamentals
Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility.
Table of contents#
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 color models define hue as a single parameter of the color value, measured in degrees. Hue can be used to refer to named colors, excluding gray (e.g., red hue).
Saturation#
The amount of chromatic intensity, or “colorfulness” of a color. Fully desaturated colors appear as grays.
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 (e.g., rgb(255, 255, 255)).
Color token#
A design token that’s specific to color usage. This provides a way of referencing a variable color value (a color value that changes based on color theme). Color tokens are named by the color and a number representing an index in the list of tints and shades. For example, blue-400 represents the fourth color in the list of tints and shades of blue.
Color index#
A numerical representation of a color token’s position in a list of available tints and shades (e.g., the 500 in blue-500 represents the fifth color).
Tuples#
An immutable list of elements.
Contrast ratio#
The measurable difference in lightness between two comparative color values using the WCAG relative luminance formula.
Target contrast ratio#
The desired contrast ratio between two color values when one of the color values is generated by a color tool.
Color theme#
The full set of color tokens and their color values relative to a specific background color. Color themes are options that can be defined in different ways and are able to be switched between.
Color space#
The available visible spectrum of colors within a set of primaries (e.g., red, green, and blue), which can be represented using color models.
Color model#
Mathematical representation of color for a particular color space. Colors are represented as tuples, or channels for each primary of the color space.
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 theme options for each mode.
Color profile#
Device color attributes, which are mapped between the device source and target color space.
Color themes and modes#
Color themes and device color modes are not the same thing. Color themes are app-specific options, while device color modes are operating system settings. Modes affect the theming of an entire device.
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 target contrast ratios with a specified background color. Certain color tokens' values are generated with confidence that they will meet or exceed specific WCAG AA contrast minimums.
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#
The presentation of colors will differ by display device for various color profiles. RGB colors will appear less saturated when comparing sRGB display to wide-gamut DCI-P3 display.
Spectrum is not color managed, meaning that colors will appear differently based on a user’s device. This is because various displays and technologies support different profiles, which results in different color gamuts. This will affect what colors the end user sees.
CIE chromaticity diagram expressing DCI-P3 and sRGB gamuts in visible color spectrum, with a side-by-side comparison of red and yellow RGB values as their relationship may appear when comparing between the two color spaces.
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 color spaces that approximate human perception of color. Geometric distances between color attributes (saturation, lightness, or hue) are close approximations to the way humans perceive changes in color.
Spectrum’s colors have been evaluated using the CIECAM02-UCS (CAM02) uniform color space. CAM02 is a color appearance model, which is an enhancement to the LAB color space. It further normalizes the color space to conform to human perception of color.
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 hue and saturation are affected. Balanced progressions in a non-uniform color space may result in imbalanced colors.
Chromatic luminance#
As colors increase in saturation, they appear to have a brighter luminosity (also known as the Helmholtz–Kohlrausch effect). This affects Spectrum colors that differ in saturation levels. When using a color that’s higher in saturation, it may appear to be lighter than its equal color token value counterpart (e.g., red-500 and green-500).
People who cannot distinguish between certain colors (often called “color blindness”) may not experience this phenomena. Because of this, Spectrum does not try to adjust for the effects of chromatic luminance in its color system.
To fully sighted users, a color may appear lighter or darker than others. However, this perceived lightness should not be prioritized over calculated measurements for contrast.
Spectrum red, orange, and indigo have differing perceived lightnesses.
Stevens' power law#
This law is an observation in the rate of change in a given stimulus, and it affects lightness scales for color. Numerically even distributions of tints and shades (in a perceptually uniform color space) will not appear to be equally distributed. Perceptually even distributions follow a power scale.
Spectrum's color system accommodates for this by following a curved lightness distribution. This provides a more balanced rate of change, which ensures that colors for interactive states appear uniform.
Chromostereopsis and chromatic aberration#
Chromostereopsis is an illusion created when certain colors are placed next to one another. This can give the colors an appearance of depth or make them appear to "vibrate," and is generally attributed to chromatic aberration.
Chromatic aberration occurs when a lens does not focus all wavelengths of light at the same point. Different wavelengths refract at different angles on the lens of the human eye. This makes the focal point for each color to be at different locations on the retina.
To learn how chromostereopsis and chromatic aberration affect Spectrum usage, view hue and saturation contrast.
Chromatic adaptation#
Humans compensate for color based on the environmental setting. For example, the brain downplays pinks and oranges that appear in the evening light so that it can identify the true color of objects in the field of vision. This is called chromatic adaptation (also known as color constancy).
In the example image, an arrangement of fruit is displayed with the appearance of a blue light source. Notice that the fruit appears to have most of its local color identifiably intact; the orange appears to be orange in color. But upon closer inspection, the actual color of the orange is green. These greens appear orange due to chromatic adaptation within the contextual environment of a blue light source.
Spectrum uses fully desaturated grays to prevent the misinterpretation of colors due to chromatic adaptation caused by the user interface.
Simultaneous contrast#
Simultaneous contrast is a contrast effect that occurs when adjacent colors influence each others' appearance.
The example image demonstrates an illusion where two grays appear to be different when surrounded by different colors. The surrounding color influences the mind’s perception of the color that is being surrounded.
Spectrum uses fully desaturated grays, and uses color sparingly to prevent the effects of simultaneous contrast from influencing image manipulation workflows.
Theming