Stylish Circular Color Picker Plugin with jQuery - SmallColorPicker

File Size: 144 KB
Views Total: 2612
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

Basic Usage:

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

<script src=""></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

  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.

  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:


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