Color usage and palettes
The Material Design color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.
Colors and theming
Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
The
Principles
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.
Expressive
Show brand colors at memorable moments that reinforce your brand’s style.
Color theme creation
The baseline Material color theme
Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. It 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 and secondary colors
- Variants of primary and secondary colors
- Additional UI colors, such as colors for backgrounds, surfaces, errors, typography, and iconography.
All of these colors can be customized for your app.
Primary color
A primary color is the color displayed most frequently across your app’s screens and components. Your primary color can be used to make a color...
A primary color is the color displayed most frequently across your app's screens and components.
Dark and light primary variants
Your primary color can be used to make a color theme for your app, including dark and light primary color variants.
Distinguish UI elements
To create contrast between UI elements, such as a top app bar from a system bar, you can use light or dark variants of your primary colors. You can also use these to distinguish elements within a component, such as the icon of a floating action button from its circular container.
Secondary color
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.
If you don’t have a secondary color, your primary color can also be used to accent elements.
Secondary colors are best for:
- Floating action buttons
- Selection controls, like sliders and switches
- Highlighting selected text
- Progress bars
- Links and headlines
Dark and light secondary variants
Just like the primary color, your secondary color can have dark and light variants. A color theme can use your primary color, secondary color, and dark and light variants of each color.
Surface, background, and error colors
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 in components, such as invalid text in a text field. The baseline error color is #B00020.
Typography and iconography colors
App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in...
"On" colors
App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in front of those surfaces, those elements should use colors designed to be clear and legible against the colors behind them.
This category of colors is called “on” colors, referring to the fact that they color elements that appear “on” top of surfaces that use the following colors: a primary color, secondary color, surface color, background color, or error color. When a color appears “on” top of a primary color, it’s called an “on primary color.” They are labelled using the original color category (such as primary color) with the prefix “on.”
“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.
The default values for “on” colors are #FFFFFF and #000000.
Accessible colors
To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors. Alternatively,...
To ensure an accessible background behind light or dark text, your background can use light or 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.
Alternative 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...
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). Alternative colors can be used to distinguish different sections of a UI.
Alternative colors are best for:
- Apps with light and dark themes
- Apps with different themes in different sections
- Apps that are part of a suite of products
Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color themes.
Light and dark themes
Some apps have both light and dark themes. To maintain visibility of elements and legibility of text, you can adapt the different color schemes for dark and light themes.
Alternative colors for section 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.
Theme 1
Yellow is used as the primary color for areas such as onboarding and choosing content 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 courses.
Theme 3
Pink is used as the primary color for courses.
Additional colors for data visualization
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.
Tools for picking colors
Material palette generator
The Material palette generator can be used to generate a palette for any color you input. Hue, chroma, and lightness are adjusted by an algorithm...
The Material palette generator can be used to generate a palette for any color you input. Hue, chroma, and lightness are adjusted by an algorithm that creates palettes that are 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, based on any primary and secondary color.
Color variations for accessibility
These palettes provide additional ways to use your primary and secondary colors. They include lighter and darker options to separate surfaces and provide colors that meet accessibility standards.
2014 Material Design color palettes
These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop
These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.