React-color: Add alpha channel to hex format

[json2d]

Hex format is most compact, but lacks the alpha channel. These are supported in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2 So seems like why not, else the hex format is only useful when you dont need alpha

[leewz]

From what I understand, tinycolor added support for the #RGBA and #RRGGBBAA forms, but it was blocked by react-color because it was breaking text input of hex values (issue #432: "Chrome hex input bug").

It may be necessary to have both isValidHex and isValidHex4, with each text input box saying whether it accepts 3-channel and/or 4-channel forms.

On the other hand, that toggle may already be in place, and you're using the wrong input form.

[json2d]

Ah so to getting support for hex4/hex8 back is a matter of resolving #432

[casesandberg]

This can be achieved by combining the returned values:

handleChange = (color) => {
  console.log(color.hex + (color.rgb.a * 100)) // '#fafafa60'
}

Is this what you were looking for?

[json2d]

Yeah this works to get the hex string /w alpha, but then I'd also need to convert it back to rgba format when assigning to the color prop, since it only takes hex string w/o alpha. Doable but seems like a bulky approach and thought it'd be better just to add support for it within the component.

Right now I'm just sticking with the rgba object format with no issues, just would be easier to work with the hex string format especially when working with CSS

[yonatanmn]

@casesandberg Hex + alpha should also be in hex. so I guess:
color.hex + Math.round(color.rgb.a * 255).toString(16))
Works for me

[casesandberg]

I am going to go ahead and close this. We are changing the way hex colors are handled in the new version and this will no longer be an issue.

[hug0b]

Any news on supporting #RRGGBBAA ?
https://caniuse.com/#feat=css-rrggbbaa

[furnaceX]

I am going to go ahead and close this. We are changing the way hex colors are handled in the new version and this will no longer be an issue.

Any update on this? Seems that HEX doesn't yet support alpha.

[aboveyunhai]

@casesandberg Hex + alpha should also be in hex. so I guess:
color.hex + Math.round(color.rgb.a * 255).toString(16))
Works for me

Just want to further expand the conversion. This will be broken when alpha convert to single digit so you want to add leading 0.

var alpha = Math.round(color.rgb.a * 255).toString(16));
if(alpha.length < 2) alpha = '0' + alpha;
const hexWithAlpha = hex + alpha;