# Darker color expression not working

**URL:** <https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389>\
**Category:** Ignition\
**Created:** [March 19, 2022, 2:16pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389 "2022-03-19T14:16:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gratliff](https://avatars.discourse-cdn.com/v4/letter/g/a5b964/32.png) [@Gratliff](https://forum.inductiveautomation.com/u/Gratliff)\
**Post date:** [March 19, 2022, 2:16pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/1 "2022-03-19T14:16:47Z")

</div>

I have a label (or any other component) on which I’m binding the background color to an expression. The expression is **darker(color(255,255,0))**. Once I apply the binding, the following is shown as the value: **java.awt.Color[r=178,g=178,b=0]**.  
The issue is that the binding doesn’t affect the color at all, even though the little color swatch next to the property shows the proper color returned by the expression binding. Whatever color the label was without the binding, is the color shown on the label. Essentially, it appears that the binding is ignored. Is there something I’m doing wrong?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bfcd29d4bc247cd5a58f87ce31c87aa7ec124ce.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4a0906159dba76a3a183b4d8189906fb02a55d90.png)

Label with binding applied:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b288c9c073b01d4ff84811708ed0c7015a2566f2.png)

module = Perspective  
version = 8.1.11

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 19, 2022, 2:34pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/2 "2022-03-19T14:34:57Z")

</div>

If you check in the expression binding preview you’ll see that  
`darker(color(255, 255, 0))`  
is returning  
`color(178, 178, 0, 255)`  
whereas CSS is expecting  
`rgb(178, 178, 0, 255)`.

Using  
`replace(darker(color(255, 255, 0)), "color", "rgb")`  
seems to fix the problem. Is the `color()` function intended for Vision rather than Perspective?

---

<div class="post-metadata">

**Author:** ![Gratliff](https://avatars.discourse-cdn.com/v4/letter/g/a5b964/32.png) [@Gratliff](https://forum.inductiveautomation.com/u/Gratliff)\
**Post date:** [March 19, 2022, 2:49pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/3 "2022-03-19T14:49:00Z")

</div>

> [@Transistor](#):
>
> replace(darker(color(255, 255, 0)), "color", "rgb")

That did the trick. Thanks!!! You're the best!

GR

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 19, 2022, 2:58pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/4 "2022-03-19T14:58:32Z")

</div>

I think we’re both doing it incorrectly. We should be using the CSS brightness filter.

![CSS brightness](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/ddaed3773541f969ab0b9c7cd7c8a7737625f38d.png)

1. The original color.
2. The resultant color.
3. The CSS filter setting.

Thanks for causing me to look this up and learn something!

---

<div class="post-metadata">

**Author:** ![Gratliff](https://avatars.discourse-cdn.com/v4/letter/g/a5b964/32.png) [@Gratliff](https://forum.inductiveautomation.com/u/Gratliff)\
**Post date:** [March 20, 2022, 1:18pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/5 "2022-03-20T13:18:17Z")

</div>

Excellent solution! Your first suggestion actually works better for my current need though. I’m actually not using a label as I stated in the post. It’s actually the stopColor property on the gradient of a SVG I built (seemed too complicated to explain in the forum). The stopColor is a property of the style for one of the fill/paint stops. I’m not sure if a style can be applied to a style.?

I like your second solution better for almost every other place where the brightness needs to be adjusted.

Without reduced brightness:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/e/be75cc82ce4c69cc170a5caa117eadebd31697d4.png)  
With reduced brightness :  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9c4f945a7ea16fe184ed0d0fe2d8d08b85ed7705.png)  
I think the reduced brightness gives it more depth.

Thanks for both!!!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 20, 2022, 2:07pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/6 "2022-03-20T14:07:02Z")

</div>

![CSS radial-gradient brightness](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/8930ea2016b9895aa8353fd488e6d1c64f10740c.gif)

_Figure 1. Both indicators are using the same backgroundImage settings but the one on the right is using the brightness filter._

The filter brightness setting doesn’t seem to have any difficulty in dealing with a radial gradient. I’m using  
`radial-gradient(farthest-corner at 20% 20%, #00ee00, #007700)`

The bezel and indicator in my examples are both created with labels. I’ll have to look into the SVG control a bit more.

---

<div class="post-metadata">

**Author:** ![Gratliff](https://avatars.discourse-cdn.com/v4/letter/g/a5b964/32.png) [@Gratliff](https://forum.inductiveautomation.com/u/Gratliff)\
**Post date:** [March 21, 2022, 1:22pm UTC](https://forum.inductiveautomation.com/t/darker-color-expression-not-working/57389/7 "2022-03-21T13:22:40Z")

</div>

> [@Transistor](#):
>
> radial-gradient(farthest-corner at 20% 20%, #00ee00, #007700)

I didn't know you could do that! I've only just begun learning about CSS and it can be used in Perspective.

I've got to say... "very cool".

Thanks for looking this up and _teaching_ me something!
