Material Design color palette for your Sass projects.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Quantum Colors Logo

Use the color palette from Google's Material Design spec in your Sass projects.


  • Install via Bower bower install quantum-colors --save
  • Download and add to your project manually


Import Quantum Colors at the top of your Sass files. For example:

@import "../bower_components/quantum-colors/quantum-colors";

With the exception of $black and $white, all colors use the naming convention presented in the Material Design spec. For example, to use Red 500 as a background color:

.my-red-thing {
    background-color: $red-500;

That's all there is to it. If you find any bugs or have suggestions for a future version, please feel free to submit an issue.


v1.1.0 (02-24-2016):

  • Update $blue series to match Google's updated palette (thanks to @mingjuitsai)

v1.0.1 (10-01-2014):

  • Fix a bug with Amber A700

v1.0.0 (10-01-2014):

  • First release
  • Bower support
  • Discoverable on Sache