Stylish Circular Color Picker Plugin with jQuery - SmallColorPicker

SmallColorPicker is a fancy and touch-enabled library that takes advantage of jQuery and CSS3 features to create stylish circular color pickers with color wheel and text input modes. With this plugin, you can create a color select box or a button which popups a tooltip-like color picker interface on clicking.

You might also like:

• Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color
• Smooth Color Picker Plugin with jQuery and Bootstrap - jqolor
• Customizable and Touch-Friendly jQuery Color Picker Plugin - spectrum
• jQuery Color Picker Plugin - wColorPicker
• Simple Color Picker Plugin - colorselector
• Colorpicker Plugin For Bootstrap

Basic Usage:

1. Include necessary javascript files in the head section of your webpage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/color.js"></script>
<script src="js/transform2d.js"></script>
<script src="js/circle-picker.js"></script>
<script src="js/circle-picker.jquery.js"></script>

2. Include required CSS files on the webpage

<link href="small-color-picker.min.css" rel="stylesheet" type="text/css">
<link href="color-buttons.min.css" rel="stylesheet" type="text/css">

3. Create a container for color picker box

<div id="color-selector-box"></div>

4. The javascript

$("#color-selector-box").smallColorPicker({
  placement: {
      position: "static",
      popup: false
  },
  colors: {
      colorOld: "#990e8d",
      colorNew: "#6d1f7a"
  },
  behavior: {
      hideOnSelect: false
  },
  events: {
      ok: function(color) {
          console.log("ok", color);
      }
  }
});

5. Colorpicker's default options.

$("#color-selector-box").smallColorPicker({
  placement: {
    position: "absolute",
    top: "0",
    left: "0",
    parent: null,
    popup: true
  },
  colors: {
    colorOld: null,
    colorNew: "#ff0000"
  },
  texts: {
    ok: "OK",
    cancel: "Cancel",
    switchModeToNum: "Show numbers",
    switchModeToCol: "Show color wheel"
  },
  behavior: {
    rotate: true,
    hideOnSelect: true,
    mode: SmallColorPicker.Mode.COLOR,
    switchMode: true,
    animation: true
  }
});

Change log:

2017-02-05

• Fixed Wrong popup positioning

---

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