Hex codes rather than RGB decimals?

[eweeksactionhero]

Hi there, I would love it if the next version of this plugin saved the colors as hex codes instead of RGB with lots of numbers behind the decimal point. The reason for this is that I want to easily see if the hex codes in the .sketchpalette file matches what's on GitHub, which matches what's in Adobe CC, which matches what's in the actual Sketch file... you get the picture. I can't easily see which colors are in the file because it's RGB. Thanks for your consideration!

[andrewfiorillo]

The initial release of the plugin had colors stored in hex values. It was switched to rgba to support transparent colors, which was the biggest feature request at the time. It also reduced the code complexity a bit, since macOS and Sketch use rgba values for working with colors. Though it could be possible to store it as hex again, with a separate opacity value stored, and do the conversion when saving/loading. I understand the use case (it's definitely easier to understand and compare hex codes mentally), but I'm not sure it's worth adding the complexity at this time unless this is a pain point for enough people who use the plugin.

[Arkkimaagi]

I'd love to see support for this. I do understand the opacity issue with the hex codes. The current format sadly is not too familiar for web developers and seems a bit verbose.

Using rgba format would be a bit more familiar for many, and it would be less verbose. Also, converting between these formats programmatically is quite easy, as you either multiply or divide by 255. There are tools (like chrome browser, with shift+clicking the color symbol in dev tools) that can convert to rgba from hex and back.

One option would be to use hex with alpha values. The problem with that is that it's not as known even if it's supported by Chrome browser. Also people are not too familiar with converting alpha values (commonly understood as 0-100% and internally represented as 0-255)

These all are the same color, last two of them supported by common tools:

{"red":1,"green":0.9725490196078431,"blue":0.8823529411764706,"alpha":0.5}
rgba(255,248,225,0.5)
#fff8e180

I'd recommend considering the rgba format as a good middle ground. Even converting from decimal numbers to 0-255 integers with current format would help working with them and the verbosity.

[andrewfiorillo]

@Arkkimaagi so you open the palette files as well, to view the color values? Do you pass the palette file off to devs? I could certainly store the rgb values as 0-255, instead of 0-1. Do you think that would be sufficient, or is the actual string format of "rgba(0,0,0,0.1)" a necessity to fulfill the use case?

[andrewfiorillo]

@Arkkimaagi @eweeksactionhero is a hex value with a separate opacity value more useful, or rgba values? Hex is the easiest format to parse/understand for me, but not sure if that is the case for everyone.

[Arkkimaagi]

Hex might be a bit tricky on the opacity side as it’s not too common. (And not supported by all browsers) Rgba 0-255 values could be helpful, and they do not need to be in that specific formatting, converting the verbose numbers manually is a pain.

And yes, communicating with devs is the key here. Sometimes the palette might come from them or they might want the palette to be used in css after some automated transformation.

[grelas]

Any good npm packages that you recommend to convert hex to the currently supported rgb format?

[Arkkimaagi]

Do you mean the current one with plenty of decimals? I'd just multiply the values with 255 and then do a Number().toString(16) conversion on each. Prepend with a 0 where needed and be done with it. For simple tasks like this I prefer not to use libraries.