Material color picker

Written in Vanilla JS
For $5
Material color palette js
This is a lightweight JS solution without dependencies to work with colors in front-end. The picker key feature is the Material design color palette.
The tool supports output in three color formats: hex, rgba and hsva. All state is stored in browser memory.
Overview in motion
How to choose and change a color
How to work with the google material color palette
Output color value as rgba, hex and hsva (hsba)
Usage
This is not an ES6 or AMD module, it's an ordinary old school JS object with public methods. You can check it in the console of your browser typing "MCP" after connection.
Connection
<link rel="stylesheet" type="text/css" href="css/
MCP.css
"/>
<script type="text/javascript" src="js/
MCP.js
"></script>
HTML markup
<input class="
material_color_picker
" value="#CBF53E">
Quick basic initialization
MCP.init();
Or with a custom config
MCP.init({
// CSS selector to define target inputs
target:
'.material_color_picker',
// There are two modes: // "normal" to render the color thumbnails (previews) // "custom" without thumbnails
mode:
'normal',
// Hide the picker when users clicks on some outside area
hide_if_outer_click:
true,
// Default favorite colors in rgba format // e.g. [ [255,255,255,1], ... ]
fav_colors:
[],
// Show two values inside the color thumbnails // the initial color and current user value
show_initial_color:
true,
// CSS position of the tool container // Options: "absolute", "fixed", "static", "relative"
position_mode:
'fixed',
// Displaying of the alpha slider
show_alpha:
true,
// A callback function // It will be executed after each color changes
callback:
function(response){ console.log(response); } });
Don't forget
to wrap the initialization code into a "document ready" function
document.addEventListener('DOMContentLoaded', function() {
  ...
});
All demos included! And don't worry about browser support. Any issues we can resolve here:
License
You can use the Picker as you want. There is only one simple condition – preserve, please, the backlink inside the tips area.
Buy for $5
Creative folks, I need your help to share this stuff:
Make a Pin
Regards, Artemy