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 palette('Light Blue', '700')
  color paletteText('Red', '700', 'Secondary')

.my-default-div
  background-color palette('Light Blue') // default shade is 500
  color paletteText('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

@import 'palette';
...

.my-div {
  background-color: palette(Light Blue, 700);
  color: paletteText(Light Blue, 700, Secondary);
}

.my-default-div {
  background-color: palette(Red); // default shade is 500
  color: paletteText(Light Blue); // default text shade is Primary
}

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

@import '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 the bg class to the element
• color: will be White or Black if adding the bg class to the element; will be the color setted if adding the text class (does not support textShade) to the element

example.html

<link href='palette.css' rel='stylesheet' type='text/css'>
...

<div class="palette-Light-Blue-700-Secondary bg">
  The background is Light Blue
  The text is White
</div>

<div class="palette-Light-Blue-700 text">
  The text is Light Blue
</div>

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.

:root {
  --palette-Red-50: #FFEBEE
  --palette-Red-100: #FFCDD2
  --palette-Red-200: #EF9A9A
  ...
  --palette-Red-Primary: #ffffff;
  --palette-Red-Secondary: rgba(255,255,255,0.7);
  ...
  --palette-Red-50-Primary: #ffffff;
  --palette-Red-50-Secondary: rgba(255,255,255,0.7);
  ...

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.getElementById('my-div')
    .style['background-color'] = palette.get('Light Blue', '700');
    .style['color'] = palette.getText('Light Blue', '700', 'Secondary');
</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.