DEMO

Features

• built-in material color palette with shades and accent colors
• highly customizable
• support for custom color palettes
• display main color first and by clicking on it show its shades or accent colors
• easy to use
• lightweight
• can be used in plain javascript projects or with other js frameworks

Installation

With npm:

npm install material-design-inspired-color-picker --save

As script:

Download the md-color-picker.js file from here

Usage

Include the script in your app.

If you installed the color picker with npm:

import 'material-design-inspired-color-picker'

If you just downloaded the md-color-picker.js file:

<script src="path/to/md-color-picker.js"></script>

Then, you can use it like a html tag:

<md-color-picker></md-color-picker>

A custom elements polyfill is included, so it will work in even in browsers wich do not support the custom-elements specification.

Api

The picker let you pass in some options and attributes so you can customize it.

Note: In html the attributes are seperated by a hyphen instead of using camelCase in JavaScript.

Following properties can be parsed into the picker:

|propertyname (JS / HTML)|type|default| example| | :---: | :---:| :---:| :---: | | colorMargin / color-margin (in px) | number | 6 | 12 | | colorsPerRow / colors-per-row | number | 5 | 4 | | colorSize / color-size (in px) | number | 54 | 42 | | defaultTint / default-tint | number or string | 500 | '200' | | fixedMinHeight / fixed-min-height | bool | true | false | | palette | string or object | 'material' | 'material-full' | | useSpectrumPicker / use-spectrum-picker | bool | true | false | | value | string | none | #f1c5a9 |

Description:

• colorMargin : The distance between the colors
• colorsPerRow : The number of colors per row
• colorSize : The size of each color circle
• defaultTint : this is the tint for each color wich will be shown at the beginning. Material colors default tint is 500. For custom palettes you can also use strings. *fixedMinHeight : If disabled, the picker will become less high, when the current subpalette has less colors than the mainpalette
• palette : the palette with all colors. If it is a string, the picker will use a built in palette. Currently the following palettes are available:

material : standard material colors
material-full : the material colors including the accent colors
material-accent : only the accent material colors

• useSpectrumPicker : if false, the other color tints can not be selected, so only the color wich matches default tint is selectable.
• value : the color which is selected. Must be a hex number with 6 digits and a hashtag.

Full example:

<md-color-picker value="#abcdef" palette="material-accent" default-tint="300" use-spectrum-picker="false"></md-color-picker>

For a more detailed example, see the demo page under docs folder or live: https://bennyalex.github.io/material-design-inspired-color-picker/