Skip to content
Related Articles

Related Articles

Improve Article

How to use spectrum colorpicker get color with transparency ?

  • Last Updated : 01 Aug, 2021

Spectrum is the distribution of colors produced when light is dispersed by a prism. Using spectrum, one can select easily the required color from the dialog. Spectrum can be used by clicking and dragging your cursor inside the picker area to highlight color. In a development field, as it plays a vital role & facilitate choosing the color with a wide range from the spectrum. 

Spectrum provides an attribute named showAlpha which is used to get transparency in color. showAlpha is an attribute of Query plugin Spectrum which can be set true to get transparency in the color, otherwise set false to avoid transparency.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

$("#colorpicker").spectrum({
   showAlpha: boolean
}); 

Approach: For building the spectrum colorpicker, we have to follow certain points:



  1. Add the necessary library files from the jquery & spectrum CDN in the Html file.
  2. Declare a <div> tag with id as output & input tag as colorpicker which is declared outside of the <div> tag.
  3. Declare a function for spectrum that will facilitate the choosing the color & set the value for showAlpha as true.
     

 

Implementing Spectrum with color transparency attribute

  • Step 1: Include Spectrum JQuery CDN in your HTML file.

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

  • Step 2: Include Spectrum CDN in your HTML file.

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css”>

  • Step3: Add a colorpicker and output div to <body> of your HTML file.

    <div id=”output” style=”height:200px;width:200px;”><h2>GeeksforGeeks<h2></div>
    <input type=”text” id=”colorPicker”/>

  • Step 4: Add Sprectrum JQuery to <script>

    $(document).ready(function(){
        $('#colorPicker').spectrum({
            color: '#fff',
            showAlpha: true,
            move: function(color){
                $('#output').css(
                    'background-color', color.toRgbString());
            }
        });
    });

Example: You are now ready to use a spectrum colorpicker with transparency.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Spectrum Sample</title>
  
    <!-- Include JQuery and Spectrum CDN -->
    <script src=
    </script>
  
    <script src=
    </script>
  
    <link rel="stylesheet" type="text/css"
        href=
</head>
  
<body>
    <!-- Output div to show output color -->
    <div id="output" style="height: 200px; width: 200px">
        <h2>GeeksforGeeks</h2>
    </div>
  
    <!-- Spectrum colorpicker -->
    <input type="text" id="colorPicker" />
  
    <script>
  
        // jQuery to show selected color in 
        // the ouput of body tag.
        $(document).ready(function () {
            $("#colorPicker").spectrum({
                color: "#fff",
  
                // showApla set true to get 
                // transparency slider in 
                // the spectrum.
                showAlpha: true,
                move: function (color) {
                    $("#output").css(
                        "background-color", 
                        color.toRgbString());
                },
            });
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :