The foundation of the Android Automotive OS color strategy is the idea of “building from black.” Basing interface colors on black makes for a more consistent user experience, with no drastic change between day and night themes.
Building from black also ensures better alignment with hardware, since dark materials are often used in car interiors and dashboards.
Guidance at a glance (TL;DR)
- Build your color choices from black to support both day and night driving
- Maintain a contrast ratio of at least 4.5:1 between background and icons or text
- Use color minimally, with purpose
- Show elevation via grayscale
- Use transparency and opacity to guide visual focus
Palettes and gradients
The dark theme of the Android Automotive OS interface is based on a grayscale palette. Ideally, any additional colors should be of reduced intensity, as in the dark variants of the colors in the Material Design palettes.
This section includes palette and opacity information, along with charts providing grayscale values for the elevation levels associated with each component.
Android Automotive OS grayscale palette
The Android Automotive OS grayscale palette is used for elements such as text and icons, and it is designed to accommodate the unique requirements of the driving environment.
This palette needs to be diverse enough to:
- Cover all the different use cases of the dark theme UI
- Provide enough range to define hierarchy through tonal differences
![grayscle color palette](https://developers.google.cn/cars/design/automotive-os/design-system/images/grayscale.png?authuser=9)
Tonal differences create the illusion of depth even on true black backgrounds where shadows are imperceptible. To provide sufficient tonal differences, the Android Automotive OS grayscale palette includes mid-greys. Material Design greys starting from Grey 900 approach brighter colors too quickly; a color two steps lighter would be Grey 700, which is too bright for the auto context.
![Component elevation chart](https://developers.google.cn/cars/design/automotive-os/design-system/images/elevation-chart-black.png?authuser=9)
![Day and night mode greyscale elevation levels](https://developers.google.cn/cars/design/automotive-os/design-system/images/elevation-grayscale.png?authuser=9)
Accent color
In addition to the grayscale palette at the core of the Android Automotive OS interface, other colors can be used sparingly for purposes such as drawing focus.
Currently, Android Automotive OS has one official accent color, a shade of blue referred to in the support library as "car accent". To increase saturation and vibrancy, this blue is shifted slightly from the standard Google blue. This shift helps the colors sit more comfortably on a dark surface.
![Blue car accent color example](https://developers.google.cn/cars/design/automotive-os/design-system/images/brand-palette.png?authuser=9)
Opacity-value charts
Transparency conveys a sense of depth and reinforces the Material Design spatial model. To use transparency effectively, choose dark or white opacity values based on your use case.
Dark opacity values
The most common use case for dark opacity values is to create scrims (overlays).
![Black opacity values for overlays](https://developers.google.cn/cars/design/automotive-os/design-system/images/opacity-black.png?authuser=9)
White opacity values
These values are mostly used on text. They are especially effective when the background is colored. Using solid grey on a dark, colored background looks too muddy.
![White opacity values for text](https://developers.google.cn/cars/design/automotive-os/design-system/images/opacity-white.png?authuser=9)
For examples of how to use opacity in scrims and text hierarchies, see Guidance and examples.
Contrast
To meet basic Android Automotive OS safety guidelines, the contrast ratio between background and icons or text should be at least 4.5:1. For details of how contrast ratios apply to specific automotive UI elements, see Make content easy to read.
![Contrast do](https://developers.google.cn/cars/design/automotive-os/design-system/images/contrast_do.png?authuser=9)
Do
![Contrast don't](https://developers.google.cn/cars/design/automotive-os/design-system/images/contrast_dont.png?authuser=9)
Don’t
Guidance and examples
The Android Automotive OS dark UI is clean and simple, with minimal use of color. In addition to using the appropriate colors, tones, and opacity values for UI elements (see Palettes and gradients), it’s important to make sure every use of color and color gradients has a purpose.
This section provides guidance and examples for applying transparency, opacity, and color to achieve a variety of goals. These goals include:
- Obscuring backgrounds
- Maintaining consistency
- Establishing a visual hierarchy that draws user focus to primary actions.
- Distinguishing entities in a list
Obscuring backgrounds with scrims
Full-screen scrims (overlays) are used to cover backgrounds behind disruptive elements, such as dialogs that require users to take an action. Partial scrims are used to draw attention to the transition of elements such as notifications.
![Full scrim in day mode](https://developers.google.cn/cars/design/automotive-os/design-system/images/Dialog-Mock-1.png?authuser=9)
![Full scrim in night mode](https://developers.google.cn/cars/design/automotive-os/design-system/images/Dialog-Mock-2.png?authuser=9)
![Partial scrim in day mode](https://developers.google.cn/cars/design/automotive-os/design-system/images/HUN-day.png?authuser=9)
![Partial scrim in night mode](https://developers.google.cn/cars/design/automotive-os/design-system/images/HUN-night.png?authuser=9)
Maintaining consistency with color
Color is a powerful cue for reinforcing memory and recognition. Use it to create a coherent experience from screen to screen.
![Visual color recognition](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-recognition-DO.png?authuser=9)
Do
![Visual color continuity](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-continuity-DO.png?authuser=9)
Do
![Persistent app accent color](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-persistent-DO.png?authuser=9)
Do
![Color usage restriction](https://developers.google.cn/cars/design/automotive-os/design-system/images/color-usage-DONT.png?authuser=9)
Don’t
Establishing a visual hierarchy
Use the white opacity values to create a consistent and strong visual hierarchy. The opacity values of 88, 72, and 56 contain just enough contrast to meet accessibility requirements while creating a comfortable reading environment on a dark background. Use the 96% opacity on all whites for night mode.
![Example of opacity and contrast to maintain visual hierarchy](https://developers.google.cn/cars/design/automotive-os/design-system/images/hierarchy-DO.png?authuser=9)
Do
![Opacity and contrast restriction](https://developers.google.cn/cars/design/automotive-os/design-system/images/hierarchy-DONT.png?authuser=9)
Don’t