How to Design Color Picker using jQuery UI ?

Last Updated : 28 Apr, 2025

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 attaching the required link which will be used.

Links for the jQuery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" 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.

HTML

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

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.

Links to the downloaded file:

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

CSS Code:

CSS

<style>
    h1 {
        color: green;
    }
 
    body {
        text-align: center;
    }
    .height {
        height: 10px;
    }
</style>

JS Code:

JavaScript

<script>
       $(document).ready(function() {
           $(function() {
                $("#my_color_picker").colorpicker();
            });
       });
</script>

Program:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>jQueryUI | Color Picker</title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet" type="text/css" />
 
    <!-- Include Pre-compiled files from link or 
        download the files in your localhost folder -->
    <script src=
"colorpicker-master/jquery.colorpicker.js">
    </script>
    <link href=
"colorpicker-master/jquery.colorpicker.css"
          rel="stylesheet" type="text/css" />
 
    <style>
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
        }
        .height {
            height: 10px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <b>jQueryUI | Color Picker </b>
    <div class="height"></div>
    <br/>
 
    <body>
        Pick a color :
        <input type="text" id="my_color_picker">
 
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_color_picker").colorpicker();
                });
            });
        </script>
    </body>
</body>
 
</html>

Output:

Managing the initial color and color format: While displaying the colorpicker we can manage the initial color and color format. We can use the following jQuery code in the script section to get the result.

JavaScript

<script>
   $(function() { 
     $( '#colorpickerId').colorpicker({ 
     color:'#00FF00',
     colorFormat: ['#HEX']
  }); 
 });   
</script>

Managing the dialog: While displaying the color picker we can manage the dialog to be draggable if the header is visible and the dialog is not inline. We can use the following jQuery code in the script section to get the result.

JavaScript

<script>
   $(function() { 
     $( '#colorpickerId').colorpicker({ 
     draggable:true,
  }); 
 });   
</script>

Managing the modal window: While displaying the color picker we can manage the color picker window as a modal window. We can use the following jQuery code in the script section to get the result.

JavaScript

<script>
   $(function() { 
     $( '#colorpickerId').colorpicker({ 
     modal: true,
  }); 
 });   
</script>

Managing the none, close, and cancel buttons: While displaying the colorpicker we can manage the buttons like none, close, and cancel. We can use the following jQuery code in the script section to get the result.

JavaScript

<script>
   $(function() { 
     $( '#colorpickerId').colorpicker({ 
      showNoneButton: true,
     showCloseButton: true,
     showCancelButton: true,
  }); 
 });   
</script>

Getting Started with jQuery

geetanjali16

Improve

Article Tags :

How to Design Color Picker using jQuery UI ?

Similar Reads

jQuery Selectors

jQuery Events

jQuery Effects

jQuery HTML/CSS

jQuery Traversing

Thank You!

What kind of Experience do you want to share?