How to use spectrum colorpicker get color with transparency ?

Last Updated : 10 Apr, 2023

Spectrum is the distribution of colors produced when light is dispersed by a prism. Using spectrum, one can easily select the required color from the dialog. Spectrum can be used by clicking and dragging your cursor inside the picker area to highlight color. In the development field, it plays a vital role & facilitates 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.

Syntax:

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

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

Add the necessary library files from the jquery & spectrum CDN in the Html file.
Declare a <div> tag with id as output & input tag as colorpicker which is declared outside of the <div> tag.
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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <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" />
</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 output 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>