material-design-inspired-color-picker
A customizable javascript color picker inspired by material design
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:
If you just downloaded the md-color-picker.js file:
Then, you can use it like a html tag:
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:
For a more detailed example, see the demo page under docs folder or live: https://bennyalex.github.io/material-design-inspired-color-picker/