Spectrum colorpicker get color with transparency

Question

I use the jQuery plugin Spectrum for a color picker:

$('#backgroundColorPicker').spectrum({
    color: '#000',
    showAlpha: true,
    move: function(color){
        $('#result').css('background-color',color.toHexString());
    }
});

See this code in action here: http://jsfiddle.net/UkmXM/1/.

As you can see I set showAlpha to true to enable a transparent background. However, I don't get a transparent background.

Answer 1

A hex string doesn't support transparency. Use color.toRgbString() instead: http://jsfiddle.net/UkmXM/2/

$('#backgroundColorPicker').spectrum({
    color: '#000',
    showAlpha: true,
    move: function(color){
        $('#result').css('background-color',color.toRgbString());
    }
});

Answer 2

I found it in the TinyColor docs: toHex8String

Answer 3

In this javascript library toHex8String() currently returns the alpha component of the RGBA before the RGB, E.G. a white semi transparent hex code which should be: #FFFFFF80 instead returns #80FFFFFF which is teal.

A fix has been suggested: https://github.com/seballot/spectrum/issues/31 but in the mean time you can get the transparent colour by extracting the alpha value independantly and appending it to the hex string like so:

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