Lightweight Configurable jQuery Color Picker Plugin

A lightweight jQuery plugin used to create a nice, clean color picker for input field that supports hsl, hsla, rgb, rgba and hex color formats.

How to use it:

1. Load the style sheet file jquery.colorpicker.bygiro.css in the head section of the document.

<link href="jquery.colorpicker.bygiro.css" rel="stylesheet">

2. Create a normal input field to accept the color input.

<input type="text">

3. Create an element to display the preview of user selected color.

<span class="myColorPicker-preview">&nbsp;</span>

4. Load jQuery library and the jquery.colorpicker.bygiro.js at the end of the document so the pages load faster.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="jquery.colorpicker.bygiro.js"></script>

5. Call the function on the input field and specify the CSS selector of color preview area.

$('.myColorPicker').colorPickerByGiro({
  preview: '.myColorPicker-preview'
});

6. Specify the color format you want to use.

$('.myColorPicker').colorPickerByGiro({
  preview: '.myColorPicker-preview',
  format: 'rgb'
});

7. All default configuration options.

$('.myColorPicker').colorPickerByGiro({

  // a valid CSS selector / a DOM element / a jQuery-jqLite collection
  preview: '', 

  // show the color picker
  showPicker: true,

  // hsl, hsla, rgb, rgba and hex
  format: 'rgb',
  
  // spaces in pixels
  sliderGap: 6,
  cursorGap: 6,
  
  // internationalization
  text: {
    close: 'Close',
    none: 'None'
  }
  
});

Change log:

2016-09-22

• v0.0.2

---

This awesome jQuery plugin is developed by bygiro. For more Advanced Usages, please check the demo page or visit the official website.