A repository of over 1000 quality jQuery plugins

jQuery Simple Color Picker

Simple Color Picker is a jQuery Color Pickers plugin.

Created by Rachel-carvalho

A simple color picker plugin for jQuery.

Not what you're looking for? Click here to view more Color Pickers jQuery plugins


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.


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


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

Default options

$(document).ready(function() {

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 });


$(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); } });

You might also like these other Color Pickers jQuery Plugins

  • colorpicker

    evol.colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline […]

  • Color Thief

    Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.

  • Really Simple Color Pi...

    Simple Color Picker written in jQuery.


Copyright (c) 2010 Rachel Carvalho