google-material-color
Google material color implementation for Sass, Less, Stylus, CSS and JS.
This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. (http://www.google.com/design/spec/style/color.html).
See the demo generated by the tests.
Installation
- Download the files you need from the dist directory:
- Stylus: palette.styl
- Less: palette.less
- Sass (SCSS) 3.3+: palette.scss
- CSS: palette.css
- CSS variable: palette.css
- JS: palette.js supports (AMD, node, browser)
- NPM:
$ npm install google-material-color --save
- Bower:
$ bower install google-material-color --save
- Git:
$ git clone git://github.com/danlevan/google-material-color.git
Colors
Details can be found on the google design specs website.
Colors
Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey
Shades (note that not all color have all the shades)
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, A100, A200, A400, A700
Text Colors
White, Black
Text Shades
Primary, Secondary, Icons, Disabled, Hint, Dividers
Usage
Stylus
Import palette.styl.
Call the function palette('[color]', '[shade]')
.
The shade is optional (500 is the default shade).
Call the function paletteText('[color]', '[shade]', '[textShade]')
.
The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).
example.styl
@import 'palette'... .my-div background-color 'Light Blue', '700') color 'Red', '700', 'Secondary') .my-default-div background-color 'Light Blue') // default shade is 500 color 'Red') // default text shade is Primary
If you need direct access to the variables, you can access it like
$palette['Light Blue']['500']
and$palette[$paletteText['Light Blue']['500']]['Primary']
Sass (SCSS)
Import palette.scss.
Call the function palette([color], [shade])
.
The shade is optional (500 is the default shade).
Call the function paletteText([color], [shade], [textShade])
.
The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).
example.scss
;... .my-div .my-default-div
If you need direct access to the variables, you can access it through a map like
$colorMap: map-get($palette, Light Blue); $color: map-get($colorMap, 700);
and$colorMap: map-get($paletteText, Light Blue); $textColor: map-get($colorMap, 700); $colorMap: map-get($palette, $textColor); $color: map-get($colorMap, Secondary);
.
Less
Import palette.less.
Call the mixin .palette([color], [shade])
.
The shade is optional (500 is the default shade).
Call the mixin .palette-text([color], [shade], [textShade])
.
The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).
example.scss
'palette';... .my-div .palette'Light Blue', '700'; background-color: @palette; // get @palette in its own scope otherwise @palette will be overwritten & .palette'Red'; // default shade is 500 color: @palette;
If you need access to the variables, you can access it through variable like @palette-Light-Blue-500
and @colorVar: %('palette-%s-Secondary', @palette-text-Light-Blue-500); @color: @@colorVar
CSS
Include palette.css in your html. The CSS class follows the pattern palette-[color]-[shade]-[textShade]
, (spaces replaced by -
).
The CSS provides colors for the background and text
background-color
: by adding thebg
class to the elementcolor
: will be White or Black if adding thebg
class to the element; will be the color setted if adding thetext
class (does not support textShade) to the element
example.html
... The background is Light Blue The text is White The text is Light Blue
CSS variable
If you're using cssnext, this project also includes a variable files for css. Read more here Custom properties.
Include palette.css in your html.
JS
You can import the palette.js file in Node.js, and AMD module or the browser.
example.html
<script src='../dist/palette.js'></script>... <script> document style'background-color' = palette; style'color' = palette;</script>
Issues
Search or open new issues here.
If you would like to suggest improvements or other libraries, you can also open an issue.
Contributing
See the contributing doc
Release History
See the changelog
License
Licensed under MIT.
Google material design Terms.