Color

Color is a great way to evoke emotion, meaning, and personality in simple ways. You determine how to apply color harmoniously by the content you present and by the context in which you present it. Color can convey a branded and intentional experience that's appealing to your users.

How to use color

The following tables show the standard text palette, background palette, and controls palette for Alexa visual experiences.

Text Palette

colorText

 

colorGray100
#FAFAFA
#DADADA (for TV)
The default color used for text elements.
colorTextReversed colorGrey800
#1E2222
Used when standard text elements are displayed over elements with dramatically different color value than the background.
colorSecondaryText colorWhite
#FFFFFF
#DADADA (for TV)
Used to de-emphasize metadata text.
colorSecondaryReversed colorGrey800
#1E2222
Used for metadata text which appears over elements with dramatically different color values than the background.
colorDisabledText colorGray100
#FAFAFA
Used for any disabled text, whether primary or secondary.
colorDisabledText
Reversed
colorGrey800
#1E2222
Used for any disabled text, when displayed over elements with dramatically different color value than the background.

Background Palette

colorBackground
colorBlue800
#232F3E

The color displayed behind content when no other background styling is applied. For example, when using imagery as a background.
TV Override
#35485E

On TVs, the colorBackground is overridden by #35485E

colorBackgroundReversed

colorGray200
#EBEDED

The color displayed behind content when no other background styling is applied. For example, when using imagery as a background.

colorBackgroundOverlay

colorBlack
#000000

colorBlackTVSafe
#0F0F0F
(for TV)

Used to cover images with a semi-opaque filter to make them easier to read. It can be a static value or dynamically generated from the imagery.

colorRed800

#65151E

Red background color.

colorGreen800

#34581B

Green background color.

colorTeal800

#0A655E

Teal background color.

colorBlue800

#232F3E

Blue background color.

colorPurple800

#3E3F68

Purple background color.

colorGray800

#1E2222

Gray background color.

Controls Palette

colorComponent colorGray100
#FAFAFA
#DADADA (for TV)
The primary color used within components in their default state. Examples include default buttons, iconography, button border, or unselected checkbox.
colorComponentReversed colorGray800
#1E2222
A dark color used in components that are placed on light backgrounds.

How to use color

For rich media or photographic content experiences such as empty states, photos, or data visualization, the deep blue color is used as a neutral background to let the content take primary focus.

Accessibility

Amazon designed the baseline color system to be AA accessible with contrast ratios of 4.5:1 for all text and colors, although most of the color and contrast meets AAA ratios. UI elements should use more than just color to convey meaning. For example, a red label on a form field might not be perceptible as a "required" signifier to a colorblind customer. You can still use the color if it's paired with a redundant visual indicator, such as bold text.

Important: Your text should have a high enough contrast ratio, ideally 4.5:1 to the background, so that users can see your text at a distance or with low-vision.

Related developer documentation