Color system

Android TV adheres to Google's Material color guidelines, ensuring a cohesive and visually appealing interface. It creates a highly immersive and engaging visual style tailored to the TV screen. This guide details applying the Material Design theme to an Android TV interface.

Highlights

  • Android TV adheres to Google's Material color guidelines, but optimizes for TV.
  • Build from dark themes, to create cinematic experiences.
  • Use the Material Theme Builder to create a theme.

Color scheme

A color scheme helps you apply color to your UI in a meaningful way, creating harmony, brand consistency and scalability.

The foundation of a color scheme is the set of five key colors that individually relate to separate tonal palettes with thirteen or more tones. Specific tones from each tonal palette are assigned to color roles across a UI. Key colors are the foundation for creating any dynamic color scheme. You can create key colors based on one root color using the Material Theme Builder, or picking your own key colors.

Key Colors

With key colors established, Material's algorithm specifies the full spectrum of colors needed for expressing interaction states, errors, and accessible contrast.

Color theme generation process

The Material theme builder generates both dark and light color schemes with the same color tokens, making it simple to switch between themes.

Color roles

Primary

Primary roles are used for key components across the UI, such as prominent buttons, active states, and the tint of elevated surfaces.

Accent Primary

Secondary

Secondary roles are used for less prominent components in the UI, such as filter chips, and opportunities for additional for color expression.

Accent Secondary

Tertiary

Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field.

Accent tertiary

Surfaces

Neutral roles are used for surfaces and backgrounds, and high emphasis text and icons. Read more about surfaces in the Material Design guidelines.

Surfaces

Outlines

Read more about outline roles in the Material Design guidelines.

Outline

Dynamic color

On Android Mobile, beginning with Android 12, users can generate individualized schemes through wallpaper selections and other customizations. Android TV does not support wallpaper, meaning user generated schemes are not supported and Android TV OS only broadcasts base palettes.

In place of user-generated schemes, you can use content-based color schemes to create dynamic and playful designs, based on content like movie posters, album art, and other hero images. For details, see content-based color schemes.

Using the Material color utilities developer libraries you can extract key colors directly from the image, or run your own color extraction algorithm to find a key color and then use the Material Color Utilities to generate a theme.

Here is an example of how colors are extracted from an image:

Dynamic Color

  1. Source image
  2. Extracted seed color
  3. Generated key colors

You can generate a color scheme using these key colors, or use the tones to apply them on your UI.

Dynamic color application example

Accessibility

For accessibility considerations, see Accessibility best practices for Android TV