# Gradient Fill color base on 0-100

**URL:** <https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 24, 2024, 11:32pm UTC](https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402 "2024-09-24T23:32:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [September 24, 2024, 11:32pm UTC](https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402/1 "2024-09-24T23:32:57Z")

</div>

I have an SVG tank vessel.  
I am able to set fill color.  
Instead of filling color discreet. (90=orange 100=red)  
I want to fill color continuously. where 95 will be somewhere between orange and red.

I want to convey the inside pressure of tank by the fill color (best if gradient)

For the style:  
Can you create a function that takes in analog value of 0-100 and outputs a color from white to red?

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 24, 2024, 11:59pm UTC](https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402/2 "2024-09-24T23:59:06Z")

</div>

```python
def transform(self, value, quality, timestamp):
	gb = int(255 * (1 - value / 100.0))
	
	return '#%02X%02X%02XFF' % (255, gb, gb)

```

It doesn't really ever go orange, but it goes white to red.

This seems worse than having a few discrete steps in there, the differences are hard to recognize.

---

<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:** [September 25, 2024, 12:14am UTC](https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402/3 "2024-09-25T00:14:00Z")

</div>

You could have an expression return a value for the `background` style property that uses an `hsl` string to return a color:

> **[W3Schools.com](https://www.w3schools.com/colors/colors_hsl.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

E.X, this does the opposite of what you want but:

```python
stringFormat(
	"hsl(0, 100%%, %s%%)",
	min({this.props.value} + 50, 100)
)

```

When the input is 0, the output is pure red:

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

When the input is 100, the output is pure white:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/617a0204789aa7c869325d00e9672b2645a2757e.png)

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [October 3, 2024, 4:36pm UTC](https://forum.inductiveautomation.com/t/gradient-fill-color-base-on-0-100/96402/4 "2024-10-03T16:36:06Z")

</div>

> [@Kevin.Herron](#):
>
> ```python
> ef transform(self, value, quality, timestamp):
> gb = int(255 * (1 - value / 100.0))
> 	
> return '#%02X%02X%02XFF' % (255, gb, gb)
> 
> ```

> [@paul-griffith](#):
>
> ```python
> stringFormat(
> "hsl(0, 100%%, %s%%)",
> min({this.props.value} + 50, 100)
> )
> 
> ```

Both Work Perfectly.  
Thanks.