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

Category: Color , Javascript | July 26, 2016
Author: tovic
Views Total: 2,309
Official Page: Go to website
Last Update: July 26, 2016
License: MIT


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


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

// HEX to RGB

Show/hide the color picker.