ここでは色を選択するjQuery ColorPickerプラグインを紹介します。

デモはこちら
https://office-goto.info/demo/colorpicker/

ColorPicker – jQuery pluginのダウンロード
http://www.eyecon.ro/colorpicker/

head内で読み込み

<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>

colorpicker.css、colorpicker.jsを読み込んでください。

script

$(function(){
    $('#picker').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
            $('body').css({'backgroundColor' : '#' + hex});
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function() {
        $(this).ColorPickerSetColor(this.value);
    });
});

html

<input type="text" id="picker" value="ffffff">

今回は例としてtextをクリックしたらColorPickerが出てくるように設定して
ColorPickerで色を選択したら背景色を変更しています。