Swatchy.js is a simple color swatch selector written in pure, vanilla javascript.
Simply include the js and css files in your html head. You can also download swatchy.js and swatchy.css if you want to include them locally
<script src="https://cdn.jsdelivr.net/npm/swatchy.js@1.3.0/swatchy.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swatchy.js@1.3.0/swatchy.min.css">You'll need 2 elements on your page to use swatchy. One to trigger the popup and another to hold the color output.
Add the class swatchy-trigger to the element you want as your trigger and swatchy-output to your output element.
<button class="swatchy-trigger">Select a Color</button>
<input type="text" class="swatchy-output" disabled>Then in your javascript, after the page has loaded, simply call the function.
Swatchy();It's that simple!
For more than one swatchy on a page just add more trigger and output elements. You only need to call Swatchy() once per page.
If you want to use the same styling as the demo page use the swatchy-button, swatchy-button-top, and swatchy-display classes on your elements.
<button class="swatchy-button swatchy-trigger"><span class="swatchy-button-top">Select a Color</span></button>
<input type="text" class="swatchy-output swatchy-display" disabled>