Lightweight Configurable jQuery Color Picker Plugin

File Size: 32 KB
Views Total: 5116
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

  preview: '.myColorPicker-preview'

6. Specify the color format you want to use.

  preview: '.myColorPicker-preview',
  format: 'rgb'

7. All default configuration options.


  // 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:


  • 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.