search

bgrins / TinyColor

Fast, small color manipulation and conversion for JavaScript
https://bgrins.github.io/TinyColor/
MIT License
5.1k stars 439 forks source link

hex8 and hex4 support and formatting #82

Open ColinLondon opened 9 years ago

ColinLondon commented 9 years ago

Excellent stuff, but times move on (!)...

The latest W3C draft on CSS colour has the alpha channel of hex8 defined by the last two characters. So "00" is transparent, "80" is 50%, "FF" is opaque, etc.

http://dev.w3.org/csswg/css-color-4/#hex-notation

tinyColor formats this the other way around, with the alpha channel as the first two characters. I think that was the previous assumption.

So that also means that if we can have tinyColor accepting hex6 as shorthand for hex6, then will it be able to accept hex4 as shorthand for hex8 at some point in the future.

If anyone has a code fix for doing this NOW, you will magically appear on my Christmas Card list.

Thanks.

bgrins commented 9 years ago

Thanks for the info. This will be a little tricky, since IE filters use the backwards hex8 format. But I think we can special case that in the toFilter function. I doubt that too many people are using hex8 right now (it was added mainly to support toFilter), so the risk of changing the semantics is probably not too big.

bgrins commented 9 years ago

If you'd like to contribute these changes, I'd be happy to accept a patch. Here's what would need to be done:

1) modify rgbaToHex to flip where transparency shows up: https://github.com/bgrins/TinyColor/blob/8cc9ee6251a05752013af0958ece80e68c1d9c6e/tinycolor.js#L510. 2) Add an 'allow4Char' parameter to that function that behaves just like 'allow3Char' does here: https://github.com/bgrins/TinyColor/blob/8cc9ee6251a05752013af0958ece80e68c1d9c6e/tinycolor.js#L500. 3) Add the 'allow4Char' parameter to toHex8() and toHex8String(). We could consider renaming it to toHexAlpha or something. 4) Add some tests for these features: https://github.com/bgrins/TinyColor/blob/8cc9ee6251a05752013af0958ece80e68c1d9c6e/test/test.js#L156. 5) We also should move the current logic in rgbaToHex into the toFilter function, since it's important the semantics stay the same for this.

ColinLondon commented 9 years ago

Does anyone know how to code this (I do not code myself!).

Cin cin

elvisvoer commented 7 years ago

This is closed by #136