Light shades color
.fill-light
Use this color as the background for your dark-on-light designs, or the text color of an inverted design.
This is a linkLight accent color
.fill-highlight1
Accent colors can be used to bring attention to design elements by contrasting with the rest of the palette.
This is a linkMain brand color
.fill-primary
This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity.
This is a linkDark accent color
.fill-highlight2
Another accent color to consider. Not all colors have to be used - sometimes a simple color scheme works best.
This is a linkDark shades color
.fill-dark
Use as the text color for dark-on-light designs, or as the background for inverted designs.
This is a link
Rock and roll is here to stay
Cards are a part of the material design guidelines, but beyond that they're easy to use and look great on desktop and mobile.
Accents
fill-highlight2: Accent colors should be used sparingly to draw attention to important design elements. Overuse of accent colors can make your design look haphazard.
Color examples
Applying a color palette is an interpretive art. This page might give you some ideas.
Backgrounds
fill-highlight1
Layer colors with an abstract design or subtle background pattern. Patterns load a lot faster than images and can support retina resolutions automatically via SVG.
Read more
fill-primary
Incorporate colors in your graphics
Colors look more natural when blended into shadows and gradients.
Buttonfill-dark-secondary: A shade of the dark color can be used for differentiation, or to provide more contrast.
Light on dark
Photography
Inject your color scheme into photography
Photo manipulations can be a great way to emphasize brand colors.
subject Article link watch_later Watch Later
Rock and roll is here to stay
Cards are a part of the material design guidelines, but beyond that they're easy to use and look great on desktop and mobile.
Accents
fill-highlight2: Accent colors should be used sparingly to draw attention to important design elements. Overuse of accent colors can make your design look haphazard.
Color examples
Applying a color palette is an interpretive art. This page might give you some ideas.
Backgrounds
fill-highlight1
Layer colors with an abstract design or subtle background pattern. Patterns load a lot faster than images and can support retina resolutions automatically via SVG.
Read more
fill-primary
Incorporate colors in your graphics
Colors look more natural when blended into shadows and gradients.
ButtonLight on dark
Photography
Inject your color scheme into photography
Photo manipulations can be a great way to emphasize brand colors.
subject Article link watch_later Watch Later