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

Category: Color , Javascript | October 30, 2018
Author: tovic
Views Total: 5,993
Official Page: Go to website
Last Update: October 30, 2018
License: MIT

Preview:

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

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

Changelog:

10/30/2018

  • Fix Missing `enter` and `exit` Hook on Method(s)

09/07/2018

  • Rename ‘target’ Property to ‘source’

06/24/2018

  • Allow Custom Color Picker Size

06/09/2018

  • JS & CSS update

You Might Be Interested In:


Leave a Reply