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
}
}
});

‚Äč