How to Design Color Picker using jQuery UI ?

A ColorPicker is a jQuery UI framework tool or widget which provides a color-palette dropdown box to the user to select the color for some colorful work. It is usually connected to a text-box so that user selection of color from the color palette can be transferred to the textbox. The dropdown box can be HSV (Hue, Saturation, Value) picker or predefined RGB color palette as shown in the image. It is a very useful user interface tool as the user on the other end need not remember or know the difficult color codes. This tool can be understood as an image or text editor.

Glimpse of ColorPicker using jQuery UI:

If you want to attach the color-palette dropdown box on the website then you need JqueryUI Colorpicker library and include the required JavaScript(jquery.colorpicker.js) and CSS(jquery.colorpicker.css) dependencies in your PHP or HTML codes to display any jQuery UI widget. We have to use the jQuery and jQuery UI libraries and styles. You can change the files to match your style requirements. In this article, we will create the structure of the color picker in an HTML page. In the HTML web page, user input control is provided for user selection. The user input control is attached to the jQuery UI color picker widget by jQuery code. Below is the complete implementation.

Creating Structure: In this section, we are creating the basic page structure and also attach the required link which will be used.

  • Links for the jQuery UI:

    <script src=””></script>
    <script src=””></script>
    <link href=”” rel=”stylesheet” type=”text/css” />

  • HTML Code: This example displays a simple color picker popup. As mentioned above, the downloaded dependent files (CSS and JS) for color picker are kept in folder colorpicker-master. Make sure the developer gives the correct path according to his own localhost path in the code.




    <!DOCTYPE html>
        <title>jQueryUI | Color Picker</title>
        <b>jQueryUI | Color Picker </b>
        <div class="height"></div>
            Pick a color :
            <input type="text" id="my_color_picker">



Designing Structure: In the previous section, we have created the basic code of using color picker widget. In this section, we will design the structure and attach the color picker widget to our input control where we are going to set options to override the color picker plugin’s default options. Overriding the default options with your own options settings can be done in the script part of the HTML code. It is designed in a flexible way for users to choose the options needed for their applications.