Darker color expression not working

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?



Label with binding applied:

module = Perspective
version = 8.1.11

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

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

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


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

CSS brightness

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

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

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:
With reduced brightness :
I think the reduced brightness gives it more depth.

Thanks for both!!!

CSS radial-gradient brightness

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.

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!