# Add transparency to built in theme color

**URL:** <https://forum.inductiveautomation.com/t/add-transparency-to-built-in-theme-color/65594>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 24, 2022, 1:18pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-built-in-theme-color/65594 "2022-10-24T13:18:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Leech](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex_leech/32/39391_2.png) [@Alex\_Leech](https://forum.inductiveautomation.com/u/Alex_Leech)\
**Post date:** [October 24, 2022, 1:18pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-built-in-theme-color/65594/1 "2022-10-24T13:18:38Z")

</div>

Hi all!

Is it possible within an expression to add transparency to a built in theme color?

For example, I'd like to take '--qual-1' which is bound to a backgroundColor prop, and within an expression, retrieve the HEX and add 'AA' to the end for transparency adjust.

...Trying to avoid hardcoding where possible

Thanks! 🙂  
Alex

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [October 24, 2022, 1:42pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-built-in-theme-color/65594/2 "2022-10-24T13:42:07Z")

</div>

This thread might be of some help:

> <https://stackoverflow.com/questions/12216572/add-alpha-channel-to-a-given-color>

Doesn't seem like there is an easy way to do it...

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 24, 2022, 3:10pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-built-in-theme-color/65594/3 "2022-10-24T15:10:54Z")

</div>

When you supply a theme color to a property, you're supplying a string name, and handing off handling of conversion to the browser in use, where the string name will eventually match a variable name and be converted into a hex value.

But in the Designer, any binding will only see the string value - there is no direct check ever made against the CSS files by Ignition because they're "downstream" of Ignition itself.

Oddly enough, there's no way to directly add alpha to a variable in CSS, but you can get the desired behavior by modify the `opacity` property of the component in question.

 ![Screen Shot 2022-10-24 at 8.10.33 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0d74192e014d91a64874b38bc490f2ec5679924.png)