Attach Color Picker to HTML Element using jQuery

Color Picker is a graphical UI widget that is used to select colors. The user can select and adjust color values with Color Picker component. In the website, color picker widget allows the user to choose the color and set the color code to the input field. In this tutorial, we will show you how to add color picker widget to the input field on the website.

The jQuery Color Picker is a simple plugin to attach color picker to web element. It helps to select a color in the same way you select a color in Adobe Photoshop. Using Color Picker jQuery plugin, you can embed web color picker component in flat mode, or attach color picker to DOMElement.

jQuery and Colorpicker Library

To attach color picker to HTML element on the web page, you need to include the jQuery and Colorpicker plugin library.

<!-- jquery library -->
<script type="text/javascript" src="js/jquery.min.js"></script>

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

Color Picker Widget

The ColorPicker() function initializes the Color Picker plugin. You need to select the element and call ColorPicker() method to attach color picker widget.

$('input').ColorPicker(options);

The example code shows the 3 types of color picker widget that can be used on the web page.

Color Picker Flat Mode

With the flat mode, the color picker appends to the HTML element without triggering an event.

JavaScript Code:

$(function() {
    $('#colorpickerHolder').ColorPicker({flat: true});
});

HTML Code:

<p id="colorpickerHolder"></p>

Attach Color Picker to DOMElement

The following example attached color picker to DOMElement and use a callback function to live preview of color.

JavaScript Code:

$(function() {
    $('#colorSelector').ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('#colorSelector div').css('backgroundColor', '#' + hex);
        }
    });
});

HTML Code:

<div id="colorSelector"><div style="background-color: #0000ff"></div></div>

CSS Code:

#colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background: url(images/select.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(images/select.png) center;
}

Attach Color Picker to Input Field

The following example attached color picker to text input field and use a callback function to update the color code with field’s value.

JavaScript Code:

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

HTML Code:

<input type="text" maxlength="6" size="6" id="colorpickerField" value="40ff00" />

Configuration Options

Color Picker jQuery plugin provides various options to customize the color picker widget.

• eventName – The event to trigger the colorpicker. (Default: ‘click’)
• color – The default color of colorpicker. (Default: ‘ff0000’)
• flat – Whether the colorpicker is appended to the element. (Default: false)
• livePreview – Whether the color value is set to the field while changing. (Default: true)
• onShow – Callback function that triggered when the color picker is shown.
• onBeforeShow – Callback function that triggered before the color picker is shown.
• onHide – Callback function that triggered when the color picker is hidden.
• onChange – Callback function that triggered when the color value is changed.
• onSubmit – Callback function that triggered when the color is selected.

Conclusion

There are various color picker plugins available with jQuery. But this color picker plugin is effective and easy to use. Also, you can customize the color picker widget design and images as per your site theme by editing the colorpicker.css file.