Basic Simple Color Picker Plugin For jQuery - bcPicker

File Size: 5.03 KB
Views Total: 6862
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Simple Color Picker Plugin For jQuery - bcPicker

Searching for that perfect color picker has never been easier, use this jQuery color picker in your application.

This is a basic, simple, easy, cross-browser, HEX/RGB color picker that works with dynamically added elements.

The users are able to select a color from a palette popup containing an array of predefined colors.

The plugin also provides a method to convert the HEX color codes to RGB.

How to use it:

1. Insert the jQuery bcPicker plugin's files into the document which has jQuery library loaded.

<link rel="stylesheet" href="resources/css/bcPicker.css">
<script src="" 
<script src="resources/js/bcPicker.js"></script>

2. Create a container element to place the color picker.

<div id="bcPicker"></div>

3. Initialize the plugin to generate a default color picker inside the container element you created.




4. Set the default color.


  // default: 000000
  defaultColor : "222"


5. Customize the color set for the palette.


  // default color set
  colors : [
    '000000', '993300', '333300', '000080', '333399', '333333',
    '800000', 'FF6600', '808000', '008000', '008080', '0000FF',
    '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
    '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
    'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
    'FF99CC', 'FFCC99', 'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'


6. If you want to adds more colors to the palette.


  addColors : []


7. By default, the plugin output the selected color using HEX color format. You can convert the HEX to RGB using the toHex method.


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