https://github.com/funkybunch/sass-material-palette
A SASS library of every color in the Google Material Design Spec - https://material.io/guidelines/style/color.html#color-color-palette
https://github.com/funkybunch/sass-material-palette
colors libaray material-design sass
Last synced: 21 days ago
JSON representation
A SASS library of every color in the Google Material Design Spec - https://material.io/guidelines/style/color.html#color-color-palette
- Host: GitHub
- URL: https://github.com/funkybunch/sass-material-palette
- Owner: funkybunch
- License: mit
- Created: 2017-02-12T02:40:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-08-07T14:52:39.000Z (almost 7 years ago)
- Last Synced: 2025-06-24T15:43:58.819Z (12 months ago)
- Topics: colors, libaray, material-design, sass
- Language: CSS
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SASS Material
Recently I've built several sites using the Material color palette. Built this so I would only have to keep track of the color variants rather than hex codes, and if I wanted to lighten or darken anything, I could make the change just by changing '500' to '600' rather than going and looking up the HEX code in the design spec, or worrying that `darken($color, 20%);` wasn't in the color spec. This contains all 256 colors in the design spec.
## Here's How To Use It
#### 1. Import the SCSS File
Import it into your project's main SCSS file as such:
```scss
@import '_material-colors';
```
I recommend it being the first file you import so you can use it in any of the other files you're importing.
#### 2. Usage
There is a function built into the file so you can access it easily. Here is the syntax:
```scss
material-color(%color%, %variant%);
```
So, if you wanted to make your `
` text color `purple -> 800`
```scss
p {
color: material-color(purple, 800);
}
```
If you just want the base color, for example not `purple -> 800` but just purple (which is 500), no need to add the 500. You can just do this and it will default to 500 unless you specify another variation.
```scss
material-color(purple);
```
Refer to the official Material Design Spec for colors and variations (https://material.io/guidelines/style/color.html#color-color-palette). Note that white and black are defined just by:
```scss
material-color(white);
material-color(black);
```
For colors with multiple words associated with them, just hyphenate where the [space] would be. Just make sure everything stays lowercase:
```scss
material-color(light-blue, 200);
```
Hope this helps you out!
## License
Copyright (c) 2019 Mark Adkins. Open source and released under the [MIT License](https://github.com/funkybunch/SASS-Material-Palette/blob/master/LICENSE).