Transparency-Enabled Spectrum Color Picker for Color Selection

I incorporated the Spectrum color picker on my website as I required a color picker with opacity, and I had a checkbox that worked fine with a basic color picker. However, I’m having trouble disabling it, even with the property.
Resolution 1:
My recommendation would be to utilize a color picker library such as Spectrum, which includes a range of color picker views and features. Furthermore, it is free of cost. You may obtain more information about it at


For achieving a specific task, I make use of
, which is a jQuery plugin.

    color: '#000',
    showAlpha: true,
    move: function(color){

You can witness the execution of this code by visiting

Despite setting




for a transparent background, it doesn’t seem to work as expected.

Solution 1:

Transparency cannot be achieved using a hex string. Refer to


at as an alternative.

    color: '#000',
    showAlpha: true,
    move: function(color){

Solution 2:

The code snippet


was discovered in the TinyColor documentation.

Solution 3:

The toHex8String() function in the javascript library is currently returning an incorrect hex code for a semi-transparent white color. Instead of the expected #FFFFFF80, it is returning #80FFFFFF, which corresponds to a teal color. The function is prioritizing the alpha component of the RGBA over the RGB.

A potential solution has been proposed via this link: However, until it is implemented, you can obtain the transparent color by separately extracting the alpha value and adding it to the hexadecimal code.

color.toHexString() + pad2(convertDecimalToHex(color._a)

Frequently Asked Questions