Skip to the content.


A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.

Try it yourself!

Getting Started


<script src=""></script>


The script adds a <style> element to the page, with all the needed CSS. If your site’s Content Security Policy doesn’t allow that, use the CSP build with a separate CSS file instead:

import Picker from 'vanilla-picker/csp';
import 'vanilla-picker/dist/vanilla-picker.csp.css';


<script src="vanilla-picker.csp.min.js"></script>
<link  href="vanilla-picker.csp.css" rel="stylesheet">


<div id="parent">Click me</div>

    // Create a new Picker instance and set the parent element.
    // By default, the color picker is a popup which appears when you click the parent.
    var parent = document.querySelector('#parent');
    var picker = new Picker(parent);

    // You can do what you want with the chosen color using two callbacks: onChange and onDone.
    picker.onChange = function(color) { = color.rgbaString;

    // onDone is similar to onChange, but only called when you click 'Ok'.


API and advanced options