I am experimenting in perspective with some expression bindings using the brighter() and darker() functions.
My binding is simply this:
And my input and outputs are:
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?
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
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.
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.
If you want to exactly define the hsl values, why not use an hsl colour? E.g.
fillColour: hsl(2,0.5, 0.5)
Then just manip those values
Note: HSL doesn’t work in some places… I forget where
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
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?
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
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
fillColour = binding expression
'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?
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.
Personally I don’t see any issues using custom props for that.
Use an object for each colour so you have:
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…
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.
How are you creating the gradient? In css?
I am manually creating the gradient in the fill properties of the object itself. I’m not explicitly applying a CSS gradient
Ah, so in an SVG element?
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!
Yeah, hsl colours unfortunately aren’t supported everywhere at the moment, despite being one of the only human interprettable colour spaces 
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.
concat("#", toStr(toHex(darker(this.props.color))))
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
So it's a little cleaner:
"#" + toHex(darker(this.props.color))