Chromoselector 2 demo

by roccivic

HTML

<script src="https://chromoselector.netlify.com/lib/chromoselector.min.js"></script>
<link rel="stylesheet" href="https://chromoselector.netlify.com/lib/chromoselector.min.css">
<form>
  <label for="color">Pick a color:</label>
  <input id="color" type="text" value="hsla(223,72%,40%,0.95)"/>
</form>

CSS

form {
    margin: 1em;
}

JavaScript

$(document).ready(function() {
    $('#color').chromoselector({
        panelAlpha: true,
        panel: true,
        color2str: function (color) {
            return color.getHslaString();
        }
    })
});