Powerful Color Picker Component With Pure JavaScript – color-picker.js

---

Preview:

Description:

color-picker.js is a pure JavaScript library for creating a color picker component with support for touch events and RGB/HEX/HSV color formats. You will find more examples in the zip.

Basic usage:

Place the color-picker.css and color-picker.js into your html document.

<link href="color-picker.min.css" rel="stylesheet">
<script src="color-picker.min.js"></script>

Create a text field to accept the selected color values.

<input type="text">

Initialize the color picker on the text field.

var picker = new CP(document.querySelector('input[type="text"]'));

Auto update the text field when the color changes.

picker.on("drag", function(color) {
  this.target.value = '#' + color;
});

color-picker.js also provides several methods to convert between color formats.

// HSV to RGB
picker.HSV2RGB([360, 100, 100])

// HSV to HEX
picker.HSV2HEX([360, 100, 100])

// RGB to HSV
picker.RGB2HSV([255, 255, 255])

// RGB to HEX
picker.RGB2HEX([255, 255, 255])

// HEX to HSV
picker.HEX2HSV('ffffff')

// HEX to RGB
picker.HEX2RGB('ffffff')

Show/hide the color picker.

picker.enter(); 
picker.exit();