> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/color-picker.md).

# Color Picker

## Introduction

We used [color picker](https://github.com/Simonwep/pickr) a flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery.

<div align="left"><img src="/files/-LRmbKgZFRTVhDjFZjtD" alt=""></div>

## How to Setup

### **HTML Structure**

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

## Dependency

### CSS

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

### JS

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

### Initialize color picker JS

```javascript
/* 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
        }
    }
});
```