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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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.

$(function(){

  $('#bcPicker').bcPicker();

});

4. Set the default color.

$('#bcPicker').bcPicker({

  // default: 000000
  defaultColor : "222"

});

5. Customize the color set for the palette.

$('#bcPicker').bcPicker({

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

$('#bcPicker').bcPicker({

  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.

$.fn.bcPicker.toHex(color)

---

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