Open In App

How to Design Color Picker using jQuery UI ?

Last Updated : 11 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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>


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




Similar Reads

How to change an element color based on value of the color picker value using onclick?
We can define color picker by input type="color". It provides a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. Only colors without alpha channels are allowed. Though CSS colors have more formats, e.g. color names, func
2 min read
How to change an element color based on value of the color picker value on click?
The HTML tag &lt;input type ="color"&gt; provides a user interface element, that let the user specify the color with the help of the visual color picker interface or by entering the color value into the text field in #rrggbb hexadecimal format. Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color nam
1 min read
How to choose background color through color picker?
In this project, we are going to change the background color with the help of the Color Picker. Glimpse of the Project: Approach: Create an HTML file in which we are going to add the text and a color picker which helps to change the background color of our web-page.Create a CSS style to give some animation effects to the web-page elements.Create a
3 min read
Create a Simple Color Picker using JavaScript
It is quite easy to develop such a client-side application. The primary colors as we know are Red(R), Green(G), Blue(B) and by mixing them we can form any color that we want. In this article, we will learn to get the RGB value from the user and use CSS to form the color using RGB(red, green, blue) property. Prerequisite: Basic knowledge of some fro
3 min read
How to add color picker in a form using HTML ?
In this article, we will learn how to add a color picker in a form using HTML. As we know, a color picker is also known as a color-chooser. It is an interface in which a user can select a single color from multiple collections of background colors. When we submitted the color, the browser convert it into string form. Approach: First, we create an H
1 min read
How to Create Color Picker input box in HTML ?
In this article, we will know about the HTML color picker &amp; will understand its implementation through the example. The &lt;input&gt; element of type color in HTML provides the user with an interface to select a color from the default color-picker to interface or design their own color by giving the desired value in the field of RGB. Syntax:
2 min read
How to add Color Picker in NextJS ?
In this article, we are going to learn how we can add a color picker in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. Approach: To add our color picker we are going to use the react-color-palette package. The react-color-palette package helps u
2 min read
How to add Color Picker in React Native ?
React Native is a popular cross-platform framework for mobile app development using JavaScript. It enables code reuse for iOS and Android platforms and frequently involves incorporating a color picker component. In this article, we'll see how to add a color picker in React native application by using the react-native-color-picker library A color pi
2 min read
How to create Color Picker in ReactJS ?
In this article, we are going to learn how we can create a Color Picker in ReactJs. A color picker is a graphical user interface widget, usually found within graphics software or online, used to select colors and sometimes to create color schemes. Prerequisites:NodeJS or NPMReact JSApproach:To create our color picker we are going to use the react-c
2 min read
HTML Color Picker
Welcome to our user-friendly html color picker! Whether you’re a web designer, developer, or just someone who loves playing with colors, our tool is here to make your color selection easier. Click on any color in the below Hexagon to get the HTML code. HTML Color BasicsHEX Color Codes:HTML color codes are represented in hexadecimal (HEX) format: #R
3 min read