# Change color of progress bar by range (perspective view)

**URL:** <https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 17, 2022, 9:14pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334 "2022-03-17T21:14:46Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [June 2, 2024, 6:37pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/21 "2024-06-02T18:37:46Z")

</div>

I confirm you that in this way it works as expected, as you said if we could play with HSL color everything should be better.

Thanks for the help

---

<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:** [June 2, 2024, 9:07pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/22 "2024-06-02T21:07:06Z")

</div>

Couldn't you use an expression that returns an hsl color string to be evaluated on by the browser?

> **[hsl() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)**
>
> The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

---

<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:** [June 2, 2024, 11:02pm UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/23 "2024-06-02T23:02:23Z")

</div>

Thanks, Paul. I had been trying various combinations of that and couldn't get it to work in designer or browser. I copied the same format from that website and it just worked!

![HSL demo](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a4471b5007a2610d22df630ac46857491e4fa00.gif)

_Figure 1. The result._

 ![HSL demo binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/825e71a63b251873348f7e14c2426e3a80d273de.png)

_Figure 2. Label background binding._

> **Expression transform code**
>
> ```python
> // HSL color generator based on 360 degree color range.
> // hue, hueMax and hueMin should be scaled to 0 to 360.
> // 0 60 120 180 240 300 360
> // red yellow green cyan blue purple red
> // Use y = mx + c to convert 0 to 360 to range between hueMin and hueMax.
> // Saturation and lightness can be fixed values (and probably works best).
> // https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/19
> "hsl(" 
> + round(
> ({value}['hueMax'] - {value}['hueMin']) / 360	// m
> * {value}['hue'] // x
> + {value}['hueMin'], // c
> 0
> ) 
> + " " + {value}['saturation'] + "%" // 0 - 100 input value.
> + " " + {value}['lightness'] + "%" // 0 - 100 input value.
> + ")" 
> 
> ```

@Aiasa21, this may be what you're looking for.  
@nminchin, you have several posts from some years ago lamenting the lack of HSL color setting. It looks like it works. Had you figured it out already?

* * *

If you're wondering, the rainbow is a label with,  
`props.style.backgroundImage : "linear-gradient(to right, red, yellow, green, cyan, blue, purple, red)"`  
There is color banding visible due to the 256 color palette limit of the GIF file format. In Designer it looks smooth.

---

<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:** [June 3, 2024, 12:47am UTC](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/24 "2024-06-03T00:47:00Z")

</div>

> [@Transistor](#):
>
> @nminchin, you have several posts from some years ago lamenting the lack of HSL color setting. It looks like it works. Had you figured it out already?

HSL always worked since CSS supports it, but the designer doesn't like it and doesn't give you a colour preview nor the option to pick using HSL which was my issue

[Previous page](https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334.md?page=1)