How to use spectrum colorpicker get color with transparency ? - GeeksforGeeks

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.
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. 
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 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”>
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”/>
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());
        }
    });
});
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 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Questions
jQuery-Selectors
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?