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=”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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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 downloded file:

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

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • JS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Final Solution: In this section, we will combine all the sections described above and that will create a ColorPicker using jQuery UI.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>jQueryUI | Color Picker</title>
      
        <script src=
        </script>
        <script src=
        </script>
        <link href=
              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>

    chevron_right

    
    

  • Output:
  • There are many more options available in the jQuery UI color picker library which can be configured by the programmer as per his own requirements while coding. Only some of them have been shown below.

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

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.