Getting Started

BASIC: Default CSS

Use this method to get the default Material Design Color Palette CSS.

  1. Download latest version of Material Design Color Palette from this site or GitHub.
  2. Unpack the entire material-design-color-palette archive into your project.
  3. In the <head> of your html, reference the location to your material-design-color-palette.min.css. 

    <link rel="stylesheet" href="path/to/material-design-color-palette/css/material-design-color-palette.min.css">
  4. Check out the examples to start using Material Design Color Palette!

PRO: Custom LESS

Use this method to customize Material Design Color Palette using LESS.

  1. Download latest version of Material Design Color Palette from this site or GitHub.
  2. Unpack the entire material-design-color-palette archive into your project.

  3. Open your project's path/to/material-design-color-palette/less/variables/colors.less to change colors hex-values.

    Be carefully to change variables names because of mixins uses this names.

  4. Open your project's path/to/material-design-color-palette/less/variables/main.less to change prefixes @zmdc-css-prefix, @zmdc-text-prefix and @zmdc-bg-prefix.

    Css class template: {@zmdc-css-prefix}-{@zmdc-text-prefix or @zmdc-bg-prefix}-{color name}-{color value}.
    Example by default: mdc-text-red-400

  5. Re-compile your LESS if using a static compiler.
  6. Check out the examples to start using Material Design Color Palette!

License

The full details of how Material Design Color Palette is licensed and 'Thanks to' section: License page.

Changelog

1.1.0:

  • change names in LESS mixins and variables
  • change the logic of mixins in LESS

1.0.0:

  • add all available colors from Google

Author