Applying color to UI

Color is applied to UI elements and components in consistent and meaningful ways.


Usage

These guidelines describe a variety of UI components and elements where color application is important.

Principles

Color should be applied throughout a UI consistently and be compatible with the brand it represents. Color should create distinction between elements, with sufficient contrast...

Read More

Consistent

Color should be applied throughout a UI consistently and be compatible with the brand it represents.

Distinct

Color should create distinction between elements, with sufficient contrast between them.

Intentional

Color should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy.


Top and bottom app bars

The way color is applied to top and bottom app bars helps users identify them and understand their relationship to surrounding UI elements.

Identifying app bars

Top and bottom app bars use an app’s primary color. System bars can use a dark or light variant of the primary color to separate...

Read More

Top and bottom app bars use an app’s primary color. System bars can use a dark or light variant of the primary color to separate system content from top app bar content.

Do.

The primary color (purple 500) is used on this top app bar, and a dark primary variant (purple 700) is used on the system bar.

To emphasize the difference between app bars and other surfaces, use a secondary color on nearby components such as the FAB.

Do.

The primary color (blue 700) is used on this bottom app bar, and the secondary color (orange 500) is used on the floating action button.

Caution.

If the bottom app bar and floating action button are the same color, use shadow or alternate means to create enough distinction between them.

Blending an app bar with the background

When an app’s top or bottom app bar color is the same color as the background color, they blend together, placing emphasis on an app’s...

Read More

When an app’s top or bottom app bar color is the same color as the background color, they blend together, placing emphasis on an app’s content instead of its structure.

Both this app’s top app bar color and background color is the primary color: white. However, on scroll the top app bar gains a shadow, showing it has an elevation higher than the content that scrolls behind it.

This app’s bright, seamless layout uses it’s primary blue (blue 700) color for app bars, bottom navigation, and the background color, so individual elements stand out less, and content stands out more. The activation state uses the secondary yellow. It includes a shadow on the bottom navigation to show the elevation division between surfaces.


Backdrop


A backdrop has a front and back layer. To distinguish between these two layers, the baseline back layer color is your primary color and the baseline front layer is white.

This app uses its primary color (purple 800) on the backdrop’s back layer. The text fields are a light primary variant (purple 700). A secondary color (red 700) is applied as an accent to the flight fares.

This app uses the primary color (pink 100) for the backdrop’s back layer and the primary dark primary variant (pink 900) for typography and iconography. Additionally, the secondary color (pink 50) is used for the expanding sheet on the front layer.



Sheets and surfaces

The baseline color for sheets and surfaces, such as bottom sheets, navigation drawers, menus, dialogs, and cards is white. These components can incorporate color to create contrast between other surfaces. Contrast can make surface edges apparent, indicating elevation differences when surfaces overlap.

This product has changed the default white to a primary color in a bottom sheet and the navigation drawer.

  1. This product uses a primary color (purple 500) in part of the bottom sheet instead of the baseline white.
  2. This product’s navigation drawer uses its primary color (purple 500) instead of the baseline white.

Modal sheets

Use contrasting colors on surfaces that appear on-screen temporarily, such as navigation drawers and bottom sheets. Usually these surfaces are white, but you can use...

Read More

Use contrasting colors on surfaces that appear on-screen temporarily, such as navigation drawers and bottom sheets. Usually these surfaces are white, but you can use your app’s primary or secondary color.

This app uses its primary color blue (blue 700) on the bottom navigation drawer, a primary dark variant (blue 800) for the account switcher, and a secondary color (orange 500) for selection.

This app uses its primary color (white) for its modal navigation drawer, creating the maximum contrast between the dark typography and the navigation. A white scrim is used to make content behind it less noticeable, as the navigation drawer is the same color as the background.

This app displays a sheet in the bottom right, colored with its primary color (pink 500). Upon tap, the sheet expands.

Cards

Cards contain content and links about a single subject. Related Article arrow_downward The baseline color for cards is white. This color can be customized to...

Read More

The baseline color for cards is white. This color can be customized to express brand or to improve legibility. Card text and icons can also use the color theme to improve legibility.

The surfaces of these cards use the primary color (purple 500). The app’s background color is white. The secondary color (teal 200) is used for data visualization.

Cards can inherit color to showcase selection or importance.

When a card’s text and icons appear in front of imagery, they can be difficult to read. To improve legibility, you can use color to create a surface for text and icons.

This card uses a colorful scrim to ensure text remains legible.


Buttons, chips and selection controls

Buttons, chips and selection controls can be emphasized by applying your primary or secondary color to them.

Color categories

  • The baseline color for contained, text and outlined buttons is your primary color.
  • The baseline color for floating action buttons and extended floating action buttons is your secondary color.
  • The baseline color for selection controls is your secondary color.

The color theme for this app consists of a primary color (purple 500) with a primary dark variant (purple 600) and a secondary color (teal 200).

  1. This product uses the primary color (purple 500) for the bottom app bar and the secondary color (teal 200) as an accent for the floating action button and selection controls.
  2. This product uses the secondary color (teal 200) as an accent for selected list items.

Buttons, chips, and selection controls

Buttons allow users to take actions with a single tap. Related Article arrow_downward Chips are compact elements that represent an input, attribute, or action. Related...

Read More

Floating action button (FAB)

The floating action button (FAB) should be one of the most recognizable items on your screen. Use color to create contrast between the FAB and...

Read More

The floating action button (FAB) should be one of the most recognizable items on your screen.

Use color to create contrast between the FAB and surrounding elements, such as the app bar. Your secondary color is the baseline color for use on the FAB. If your canvas uses many colors, your FAB can use monochromatic coloring instead, to stand out from the content.


This app’s secondary color (orange 500) is applied to the FAB, contrasting it from the surrounding UI.



This app’s color theme uses a primary white and a secondary black for all buttons, selection controls, and iconography. These components stand out because they contrast with the vivid, multicolor content.



Typography and iconography

Color can express whether text has greater, or lesser, importance relative to other text. Color also ensures text remains legible when placed above imagery or backgrounds, which can make it difficult to read the text in front of them.

Typographic hierarchy

Color can increase both text’s visibility and its level of importance.

Read More

Color can increase both text’s visibility and its level of importance.

The color theme for this app consists of a primary color (purple 500) and a secondary color (orange 600). Orange accents the card’s headlines, and purple appears on tabs and buttons.

Headlines and tabs

Important text, like tabs and headlines, can use your primary or secondary color. Tabs organize high level content in an app content, such as switching...

Read More

Important text, like tabs and headlines, can use your primary or secondary color.

This app uses its secondary color (orange 800) to accent and call attention to the headlines.

This app uses its primary color (green 800) for tabs, with weight changes indicating selected and unselected states.

Do.

Use your primary or secondary color to emphasize shorter text, such as headlines.

Do.

You can use your primary or secondary color to accent links.

Caution.

Avoid using bright primary or secondary colors for body text.

Text legibility

When text is placed above imagery, it often leads to legibility issues. Creating a colored layer between text and image can ensure text remains legible....

Read More

When text is placed above imagery, it often leads to legibility issues. Creating a colored layer between text and image can ensure text remains legible.

This app applies a yellow scrim above imagery to ensure text above it is legible.

Icons

Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable. Basil is a...

Read More

Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable.


This app uses both its primary color (green 800) and secondary color (orange 800) for its icons.



Shrine uses its primary dark variant (pink 900) for icons.