A simple color picker plugin for jQuery.
JavaScript CSS
Latest commit 3d4b89b Jan 21, 2015 @rachel-carvalho Merge pull request #10 from robincsamuel/patch-1
Added option for include margins

README.md

simpleColorPicker

A simple color picker jQuery plugin that appears as the user focuses the input.

Check out the latest version at http://github.com/rachel-carvalho/simple-color-picker.

Usage

Just attach the simpleColorPicker to an input text and when it gains focus the color palette appears aligned to its bottom right corner.

Samples

See them working live at http://rachel-carvalho.github.com/simple-color-picker.

Default options

$(document).ready(function() {
    $('input#color').simpleColorPicker();
});

More colors per line

$(document).ready(function() {
    $('input#color2').simpleColorPicker({ colorsPerLine: 16 });
});

Different colors

$(document).ready(function() {
    var colors = ['#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#f3f3f3', '#ffffff'];
    $('input#color3').simpleColorPicker({ colors: colors });
});

Effects

$(document).ready(function() {
    $('input#color4').simpleColorPicker({ showEffect: 'fade', hideEffect: 'slide' });
});

Non-input elements

$(document).ready(function() {
    $('button#color5').simpleColorPicker({ onChangeColor: function(color) { $('label#color-result').text(color); } });
});