RGBA values on color picker

nufrankz

Hi, there is availability for rgba values in the Color Setting field when setting an option for an style?

I know in the Help Guide says "The color chosen will be inserted in the hex format (e.g. #FFFFFF) by default. You can also have it inserted as RGB values (e.g. 0, 0, 0) by appending -rgb to the install key in the code only" but I can't seem to understand how and where put -rgb and the values (also if there's Alpha support).

Thank you!

stonecrusher

To my knowledge this is not possible with userstyles.org (even tried to bypass character limit with 4-digit HEX colors like #0f02 = #00ff0022 = #RRGGBBAA)

However if you use Stylus, colors with alpha transparency are fully supported with style settings in UserCSS format. You just can't upload it to userstyles.org but have to self-host it somewhere (github, dropbox etc).

krystian3w

Rather, you will be forced to abandon the hex with alpha in key and color picker (in customize settings).

q1k

You can workaround it by using 2 settings options, first one will be color and the other will be the alpha(transparency) value.

In the code for the setting make a css variable
:root { --mycolor: /*[[setting_color]]*//*[[setting_color_alpha]]*/; }
and then call this wherever you need
var(--mycolor)

I suggest adding the at-rule @supports not (color:#rgba) { } to handle browsers that don't support the #RGBA format (that's Edge, and all browsers older of 1 year).


But instead of trying to make the #RGBA notation, we should ask userstyles.org to change the color picker to generate a 255 rgba notation (ex. rgba(0, 0, 0, 0.25) (black color visible only 25%) )

stonecrusher

@q1k I was giggling a bit, but really like the workaround :D