Style editor not handling colours with an alpha channel

Hi, it seems the Styles editor cannot process colours with an alpha channel properly.

For example:

  • background: #00000066}; becomes background: #000 66; (invalid value)
  • background: rgb(0, 0, 0, .4); becomes background: #000;

Is this a bug or some limitation with the editor? I have disabled all other plugins to exclude them from causing this.

Hello Phil:)

Thank you for your question, I am very new in this stuff and so I tried to search what are those styling colors and learned some new things:)

Apparently when I tried it on one of my template, it gave me the same result. and now I am wondering why…

Hi Sunski, I think there is an issue with the Styles editor. Hopefully, it will be fixed because transparency is something I use a lot. :slight_smile:

You can see how transparency is used on my website: https://cutloosecrew.com/

Hi Phil,
It’s possible that hex opacity (8 character hex) isn’t supported (it’s actually only fairly recently become fully browser-supported enough to use) but you can definitely still use rgba to set transparent colors ie.

rgba(0,0,0,0.4)

you need to include the “a” in order to use the fourth “Alpha” channel when you define a color

1 Like

Hi Julia, thanks for the tip. Changing the value to rgba resolved the issue.

Other values work for most browsers but it is probably best to stick with rgba for now. :slight_smile: