Skip to content
Related Articles

Related Articles

How to use spectrum colorpicker get color with transparency ?

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2021
View Discussion
Improve Article
Save Article

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.


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

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

    <script src=””></script>
    <link rel=”stylesheet” type=”text/css” href=””>

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

            color: '#fff',
            showAlpha: true,
            move: function(color){
                    'background-color', color.toRgbString());

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


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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!