Material color picker on vanilla js

Written in Vanilla 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

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

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.

Download the script for free

Creative folks, I need your help to share this stuff:

Make a Pin

Regards, Artemy