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...

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 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...

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.

color swatch for purple 500 and 700 and fake app with page title with menu, share, search and overflow buttons
DoThe 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 floating action button (FAB).

color swatch with Primary Reply blues 600, 700 and 800 and Reply app with 5 message snippets with photos and avatars
DoThe primary color (blue 700) is used on this bottom app bar, and the secondary color (orange 500) is used on the floating action button.
Bottom app bar with floating action button, hamburger and overflow menu and search buttons
CautionIf 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...

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.
Color swatch of primary and secondary colors and Owl app with 4 photos and 3 titles
This app’s bright, seamless layout uses its 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

The 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.

Color swatch of primary and secondary colors, Crane app screen with 3 itineraries for Seoul to Tokyo flights
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.
Color swatch with primary and secondary colors, Shrine app screen with photos and prices for tea cups and shoes, shopping cart button
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.

Primary purple swatch and fake app of text and dictionary definition and file folders
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...

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.

Primary and secondary color swatches for blue and orange, Reply email folders and 2 message snippets
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.
Primary white color swatch and Fortnightly news app navigation (Front Page, World, US, Politics and other news categories
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...

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

Color swatch of primary and secondary colors, fake app screen with 9 cards of analytics (marketing, conversion and more)
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.

app with 2 cards with titles, secondary text and 2 action buttons
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.
Color swatches, 1. Fake app with 3-line list items and radio buttons 2 Email app with 3 selected messages
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...


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...

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.

Color swatches and email app with 5 email snippets with photos and avatars
This app’s secondary color (orange 500) is applied to the FAB, contrasting it from the surrounding UI.
color swatches, fake app photo of user, user’s followers #, collections and following,  3 different sized photos with text
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.

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

primary and secondary color swatches, fake guidelines app with cards about color theory and palettes
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...

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

primary and secondary swatches, fake app with spinach fio puffs and beef pot pie photos
This app uses its secondary color (orange 800) to accent and call attention to the headlines.
Basil app with appetizer, entrees, desserts and cocktail menu choices, photo of spinach filo puffs
This app uses its primary color (green 800) for tabs, with weight changes indicating selected and unselected states.
Building photo, text about photography video course, headline in red
DoUse your primary or secondary color to emphasize shorter text, such as headlines.
Building photo, text about photography video course, headline in black, highlighted link in blue
DoYou can use your primary or secondary color to accent links.
Building photo, text about photography video course in red, headline in black
CautionAvoid 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....

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.

White and black color swatches, fake app photo of user, user’s followers #, collections and following,  3 different sized photos with text
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...

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

Primary and secondary color swatches, app with pesto pasta recipe
This app uses both its primary color (green 800) and secondary color (orange 800) for its icons.
primary and secondary color swatches, checkout page with address, credit card, promo code, total and place order button
Shrine uses its primary dark variant (pink 900) for icons.

Up next