# Add Transparency to Theme Colors

**URL:** <https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 19, 2023, 3:05pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792 "2023-01-19T15:05:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 19, 2023, 3:05pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792/1 "2023-01-19T15:05:46Z")

</div>

If I want to used themed colors in Perspective, how can I add the transparency attribute in addition to the RGB? For example,

`var(--div-9)` light is `#D7FAF8`  
How can I turn it into `#D7FAF880`? Specifically, inside a named style?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 19, 2023, 3:17pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792/2 "2023-01-19T15:17:13Z")

</div>

you want to change --div-9,  
or create a style that makes any backgroundcolor transparant?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 19, 2023, 3:29pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792/3 "2023-01-19T15:29:36Z")

</div>

While you're correct that I can't just change the color for use on the background, like I wanted, there is an opacity attribute for the entire component that can be changed and provides close to what I was looking for.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 19, 2023, 3:33pm UTC](https://forum.inductiveautomation.com/t/add-transparency-to-theme-colors/68792/4 "2023-01-19T15:33:48Z")

</div>

i didnt say it wasnt possible at all xd  
because it is possible. i just dont know which you wanted

> [@victordcq](#):
>
> you cant to change --div-9,

-edit oh oops i did make a typo, cant should been want

put this in an expression, binded to the background, or just replace the value if the opacity is fixed

```auto
"linear-gradient( to bottom, var(--div-12) calc(("+{value}+" - 1) * 10000%), transparent calc("+{value}+" * 10000%))"

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/93c67b3f8d9bba9efb2d9222975850dd57929625.png)

you can put this also in a style, with a fixed opacity