RGBA values on color picker

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!


  • edited July 2018 Firefox

    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).

  • edited July 2018 Firefox
    Rather, you will be forced to abandon the hex with alpha in key and color picker (in customize settings).
  • q1kq1k
    edited July 2018 Chrome

    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

    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%) )

  • @q1k I was giggling a bit, but really like the workaround :D
Sign In or Register to comment.