# How do you use the Expression functions brighter() and darker()?

**URL:** <https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [April 7, 2022, 5:49pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182 "2022-04-07T17:49:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 5:49pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/1 "2022-04-07T17:49:53Z")

</div>

I am experimenting in perspective with some expression bindings using the [brighter()](https://docs.inductiveautomation.com/display/DOC81/brighter) and [darker()](https://docs.inductiveautomation.com/display/DOC81/darker) functions.

My binding is simply this:

 ![Screen Shot 2022-04-07 at 11.40.00 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c9f8aa0caa30279105e86d13862340c4f6543572.png)

And my input and outputs are:

![Screen Shot 2022-04-07 at 11.41.03 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6cc7bf052e6fd887f8f4ea429ca38b116eb0cac.png)

As can be seen, the input was a nice hex color, but the output is not exactly compatible with perspective (although the output seems consistent with the functions name).

So how do I get back to a perspective useable color after using brighter or darker?

Or better still how can I do HSL manipulations in expression bindings?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 5:54pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/2 "2022-04-07T17:54:21Z")

</div>

I never liked those two functions. Without arguments they’re utterly useless imo.  
In Perspective you could either script it (search for python functions to change colour values) or you could use a style.filter = brightness(0.5) for example. Preferable not to use scripting as it adds more load to the gateway. More clients = more load = less scalable

> **[brightness() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)**
>
> The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a .

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 5:57pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/3 "2022-04-07T17:57:26Z")

</div>

I don’t particularly like those functions either, but I am looking for a way to apply HSL transformations in bindings (that will ultimately be controlled via some bools)

They seemed as close as possible to what I was looking for.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 7, 2022, 5:59pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/4 "2022-04-07T17:59:53Z")

</div>

`brighter` and `darker` date back to Vision, and, for complex reasons, return Java Color objects, which won’t be immediately useful to you. You might be able to use the output you get from `toInt(brighter("color"))` as a useful CSS output color?

I would still recommend `filter: brightness` though.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 6:02pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/5 "2022-04-07T18:02:30Z")

</div>

If you want to exactly define the hsl values, why not use an hsl colour? E.g.

```auto
fillColour: hsl(2,0.5, 0.5) 

```

Then just manip those values

Note: HSL doesn’t work in some places… I forget where

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 6:03pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/6 "2022-04-07T18:03:02Z")

</div>

I just tried toInt() and it errors out saying you can’t convert the color object.

The brightness filter idea won’t work in my situation as I am trying to compute color break-points for a gradient

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 6:06pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/7 "2022-04-07T18:06:10Z")

</div>

So I define a colour via hsl(). How do I programmatically manipulate it in a binding to change the “l” component, and then return a useable color?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 6:07pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/8 "2022-04-07T18:07:24Z")

</div>

A usable colour is literally just the text string hsl(…) so you just return the string itself. To make it easier though you might use a variable to store the h s and l and then combine them together to make the string. Then just manip the l

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 6:08pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/9 "2022-04-07T18:08:55Z")

</div>

I’m missing the bit denoted by “…” where I do the manipulation in the binding 😉

Storing a colour by separate components is, how shall I say it?, … ugly

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 6:11pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/10 "2022-04-07T18:11:59Z")

</div>

fillColour = binding expression

```auto
'hsl(' + {view.custom.h} + ',' + {view.custom.s} + ',' + {view.custom.l} + ')' 

```

Or if that’s too ugly, then you’ll need to do the non-ugly way and parse the hsl string and replace the elements 😉

Otherwise, you could create css variables to use that hold your exact colours, if that’s appropriate.  
Are your colours statically defined?

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 6:18pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/11 "2022-04-07T18:18:44Z")

</div>

The colors will be statically defined on each object, and I want to do HSL manipulations based on other booleans on the same objects. The resultant colors will be injected into a pre-defined gradient definition on the same object.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 6:22pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/12 "2022-04-07T18:22:11Z")

</div>

Personally I don’t see any issues using custom props for that.  
Use an object for each colour so you have:

```auto
colour1 = {'h' :30, 's' :0.9, 'l' : 1.0, 'colour' : 'hsl(' blah blah + ')' binding }

```

Then you can easily use bindings to change the props  
Of course before going down the hsl path, make sure you can actually use hsl for colours…

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 6:37pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/13 "2022-04-07T18:37:53Z")

</div>

The hsl color isn’t making it to the gradient. So it looks like I can’t even do that. I think I might be stuck with manually predefining hex colors.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 9:08pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/14 "2022-04-07T21:08:34Z")

</div>

How are you creating the gradient? In css?

> **[linear-gradient() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)**
>
> The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 9:16pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/15 "2022-04-07T21:16:59Z")

</div>

I am manually creating the gradient in the fill properties of the object itself. I’m not explicitly applying a CSS gradient

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 9:19pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/16 "2022-04-07T21:19:09Z")

</div>

Ah, so in an SVG element?

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [April 7, 2022, 9:21pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/17 "2022-04-07T21:21:02Z")

</div>

Yes … a simple SVG circle that I am filling with a radial gradient. By binding to the stopColor (and manipulating from other Custom properties) I can simulate various animation behaviors in a simple manner.

Now if only we had drawing tools as well!

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 7, 2022, 9:47pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/18 "2022-04-07T21:47:17Z")

</div>

Yeah, hsl colours unfortunately aren’t supported everywhere at the moment, despite being one of the only human interprettable colour spaces 🙄

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 13, 2023, 2:34pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/19 "2023-01-13T14:34:50Z")

</div>

I wanted to experiment with the `lighter()` and `darker()` expressions in perspective. In order to do so, you have to convert to hex then to string. This works, but I agree that it is not super useful.

```auto
concat("#", toStr(toHex(darker(this.props.color))))

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 13, 2023, 4:49pm UTC](https://forum.inductiveautomation.com/t/how-do-you-use-the-expression-functions-brighter-and-darker/58182/20 "2023-01-13T16:49:03Z")

</div>

As of 8.1.21 you can directly pass a Java color (e.g. the output of lighter() or darker()) to `toHex`:  
[https://docs.inductiveautomation.com/display/DOC81/toHex](https://docs.inductiveautomation.com/display/DOC81/toHex)

So it's a _little_ cleaner:

```auto
"#" + toHex(darker(this.props.color))

```