Color Picker

Introduction

We used color picker a flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery.

How to Setup

HTML Structure

<span class="color-picker"></span>

Dependency

CSS

<!-- Pickr CSS -->
<link href="vendors/pickr-widget/dist/pickr.min.css" rel="stylesheet" type="text/css" />

JS

<!-- Pickr JavaScript -->
<script src="vendors/pickr-widget/dist/pickr.min.js"></script>
<script src="dist/js/pickr-data.js"></script>

Initialize color picker JS

/* Pikr Init*/
"use strict";
const pickr = Pickr.create({
    el: '.color-picker',
	default: '#00acf0',
	position: 'left',
    components: {
		preview: true,
        opacity: true,
        hue: true,
		interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            clear: true,
            save: true
        }
    }
});