Color usage and palettes
The Material Design color system uses an organized approach to applying color to your UI. In this system, a primary and a secondary color are typically selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.
Colors and theming
Your app’s primary and secondary colors, and their variants, help create a color theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another.
To select primary and secondary colors, and generate light and dark variants of each, use the Material Design palette tool, Theme Editor, or 2014 Material Design palettes.
A sample primary and secondary palette
- Primary color indicator
- Secondary color indicator
- Light and dark variants
Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most. Text...
Hierarchical
Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.
Legible
Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.
Expressive
Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.
Color theme creation
Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. This includes default colors for...
Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box.
This includes default colors for primary, secondary, and their variants. This baseline theme also includes additional colors that define your UI, such as the colors for backgrounds, surfaces, errors, typography, and iconography. All of these colors can be customized for your app.
The baseline Material color theme.
A primary color is the color displayed most frequently across your app’s screens and components. If you don’t have a secondary color, your primary color...
A primary color is the color displayed most frequently across your app’s screens and components.
If you don’t have a secondary color, your primary color can also be used to accent elements.
Dark and light primary variants
You can make a color theme for your app using your primary color, as well as dark and light primary variants.
Distinguish UI elements
To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.
Light and dark variants of a primary color distinguish a top app bar from a system bar.
This UI uses a primary color and two primary variants.
A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent...
A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.
Secondary colors are best for:
- Floating action buttons
- Selection controls, like sliders and switches
- Highlighting selected text
- Hoses Vario Steel System MV063S Accessories TRW and Braided System Steel MV063S Vario Accessories TRW and Hoses Braided Progress bars
- Links and headlines
Dark and light secondary variants
Vario Braided Hoses Steel MV063S System Accessories TRW and Just like the primary color, your secondary color can have dark and light variants. You can make a color theme by using your primary color, secondary color, and dark and light variants of each color.
Dark and light variants of primary and secondary colors
This UI uses a color theme with a primary, primary variant, and secondary color.
Surface, background, and error colors typically don’t represent brand:
Surface, background, and error colors typically don’t represent brand:
- Surface colors affect surfaces of components, such as cards, sheets, and menus.
- The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
- Error color indicates errors components, such as text fields. The baseline error color is #B00020.
A UI showcasing the baseline colors for background, surface, and error color.
The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as...
“On” colors
The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as text or icons, appear in front of surfaces using those colors, those elements should use colors specifically designed to appear clearly and legibly against the colors behind them.
This category of colors is called “on” colors, referring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.
“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are also applied to surfaces.
The defaults for these colors are #FFFFFF and #000000.
A UI showcases the baseline colors for text and iconography.
To ensure that a color provides an accessible background behind light or dark text, you can use light and dark variants of your primary and...
To ensure that a color provides an accessible background behind light or dark text, you can use light and dark variants of your primary and secondary colors.
Alternatively, these colors can be used for typography that appears in front of light and dark backgrounds.
Color swatches
A swatch is a sample of a color chosen from a range of similar colors.
Check marks indicate whether a text color is legible in front of a background:
- A white check mark indicates when white text is legible on a background color
- A black check mark indicates when black text is legible on a background color
For apps that use white text, backgrounds must be accessible against white. These white check marks indicate when white text is accessible against various background color swatches. The 400 color swatch is applied to this UI.
For apps that use black text, backgrounds must be accessible against black. These black check marks indicate when black text is accessible against various background color swatches. The 50 color swatch is applied to this UI.
The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors...
The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors to your theme). Apps can use alternative colors to establish themes that distinguish different sections.
Alternative colors are best for:
- Apps with light and dark themes
- Apps with different themes in different sections
- Apps that exist as part of a suite of products
Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color themes.
Alternative colors can be used to theme different parts of an app. Owl is an educational app that provides courses for people who want to...
Alternative colors can be used to theme different parts of an app.
This app has three primary colors. Distinct themes are used in different parts of the app, allowing users to better locate themselves within it.
Theme 1
Yellow is used as the primary color for areas such as onboarding and choosing areas of interest.
Theme 2
Blue is used as the primary color for areas of the app that relate to the user’s personal account, such as selected classes.
Theme 3
Pink is used as the primary color for classes.
Apps can use additional colors to convey categories that are outside of your main color theme. They are still a part of your full color...
Apps can use additional colors to convey categories that are outside of your main color theme. They are still a part of your full color palette.
This app has a color theme with five additional colors, which it uses when multiple data visualizations are shown on the same page.
- The Accounts section uses green
- The Bills section uses orange and yellow
- The Budget section uses purple and blue
(Scaled down to 50%)
Tools for picking colors
The Material palette generator can be used to generate a palette for any color you input. An algorithmic adjustment of hue, chroma, and lightness creates...
The Material palette generator can be used to generate a palette for any color you input. An algorithmic adjustment of hue, chroma, and lightness creates palettes that are both usable and aesthetically pleasing.
Input colors
Color palettes can be generated based on the primary input color, and whether the desired palette should be analogous, complementary, or triadic in relation to the primary color. Alternatively, the tool can generate expanded palettes for any primary and secondary color input.
Color variations for accessibility
These palettes provide additional ways to use your primary and secondary colors, by providing lighter and darker options to separate surfaces and provide colors that meet accessibility standards.
These color palettes, originally created by Material Design in 2014, comprises of colors designed to work together harmoniously, and can be used to develop your...
These color palettes, originally created by Material Design in 2014, comprises of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use either the palette generation tool or Material Theme Editor.
Braided MV063S System TRW Hoses Vario and Accessories Steel