SmallColorPicker

SmallColorPicker is a library which allows you to create a minimalistic color picker with jQuery. Also it contains CSS styles for color selection buttons.

Color picker

Here's it:

Buttons

Buttons are in separate CSS file, color-buttons.css (or LESS version); this CSS has no dependencies and can be used standalone.

color-btn-vertical

#f0631d

org

choose your favorite color

color-btn-horizontal

#b81221

red

click also me

color-btn-left

#e861b0

pink

this button is pretty

color-btn-square

#990e8d

vio

please select a color

color-btn-circle

#800080

pur

yet more buttons

color-btn-right

#4154e0

blue

and more buttons

Click this button to select color in popup:

Use this snippet to create buttons:

<div class="color-btn color-btn-left"><b style="background-color: #ff66bd;"></b>text</div>

#6d1f7a

← This button has fixed width: add a special class color-btn-fixed if you don't want a button to change its size by content. Fixed-size buttons are designed to match colors in hex-triplet web color format (e.g. #6d1f7a).

expand example

<div class="color-btn color-btn-fixed color-btn-vertical"><b style="background-color: #6d1f7a;"></b>#6d1f7a</div>

Installation

Download the library, include CSS and JS files and write some initialization code (refer to readme for available options and methods).

expand example

$("#color-selector-box").smallColorPicker({
        placement: { popup: true },
        colors: { colorOld: "#990e8d", colorNew: "#6d1f7a" }
    }).on({
        scp_ok: function(color, picker) { /* color selected */ },
        scp_cancel: function(color, picker) { /* color not selected */ },
        scp_show: function(picker) { /* picker shown */ },
        scp_hide: function(picker) { /* picker hidden */ }
    });
var picker = $("#color-selector-box").smallColorPicker();
picker.show();

Browsers suport

SmallColorPicker makes use of CSS3 features. Supported browsers are Chrome, Safari, Firefox, Opera, IE≥9. Buttons can be used in all browsers.

License

SmallColorPicker is licensed under MIT. If you find it helpful, you can use it as you wish, no attribution is required.

Download

You can download SmallColorPicker compressed production version here or go to GitHub repository with full source code (you will also find build instructions there).
Website background by Subtle Patterns.