# Change color of value in perspective

**URL:** <https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [September 30, 2021, 6:01pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507 "2021-09-30T18:01:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [September 30, 2021, 6:01pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/1 "2021-09-30T18:01:36Z")

</div>

I am using ignition 8.1 perspective module and trying to get values to change color with the following expression:  
if ({this.props.value}\>92, color(0,217,0), if ({this.props.value}\<87, color(255,0,0),color(255,140,0)))  
I am getting an error like this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4a0d1d1c9a2bc456ccac96199d01cc515dd40c4d.png)

Please advise, Thank you

---

<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 30, 2021, 6:03pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/2 "2021-09-30T18:03:39Z")

</div>

The color expression returns a Java color, not a web-useful color (for now). What we'll probably eventually do is make the function smarter. In the meantime, you can use a transform to manipulate the color into the right format:

> [@\[IGN-1566\] Perspective - Color function not returning a usable value](https://forum.inductiveautomation.com/t/bug-11732-perspective-color-function-not-returning-a-usable-value/21001/4):
>
> As a workaround, you can add a transform if you need to use color(): colorIn = value hexVal = '#' + hex(colorIn.getRed()\*65536 + colorIn.getGreen()\*256 + colorIn.getBlue())[2:] return hexVal

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [September 30, 2021, 6:16pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/3 "2021-09-30T18:16:08Z")

</div>

if ({this.props.value}\>92, {background-color:rgb(255,0,0);} /\* red _/, if ({this.props.value}\<87, {background-color:rgb(0,255,0);} /_ green _/,{background-color:rgb(0,0,255);} /_ blue \*/))

is this what it would look like using the css?

---

<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 30, 2021, 6:28pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/4 "2021-09-30T18:28:54Z")

</div>

You’re binding on the `style` key directly. What you probably want to do is add an additional key for `background-color` below it, then add a binding to that:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/7088087a97549089fb48b11487013b9882b45c46.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7ae4bd0d77f63085f9e7d41f95df047c3257ed0a.png)  
Then for your expression, return a _string_ that describes the color; what this does is tell the browser to use the `rgb` function _in CSS_ to render the color:

```auto
if(
	{../Slider.props.value} > 92,
	"rgb(0,217,0)",
	if(
		{../Slider.props.value} < 87,
		"rgb(255,0,0)",
		"rgb(255,140,0)"
	)
)

```

(I indented the function purely for readability, whitespace doesn’t mean anything to expressions).  
 ![screenshotBVbeMp](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1edab1e4d95a2cb34a0f5aa6dc78bdbc5b0dd5c8.gif)

Another option that’s potentially a bit more ‘future-proof’ is to use three different style classes (say, `error`, `warning`, and `good`, and add the `background-color`s there. Then you would bind the `classes` node in the property tree - but instead of your expression directly returning a color, you would return the name of a style class:

```auto
if(
	{../Slider.props.value} > 92,
	"good",
	if(
		{../Slider.props.value} < 87,
		"error",
		"warning"
	)
)

```

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [September 30, 2021, 6:41pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/5 "2021-09-30T18:41:21Z")

</div>

Sweet my man thanks! Im getting it!

---

<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:** [September 30, 2021, 8:41pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/6 "2021-09-30T20:41:47Z")

</div>

Or better yet, define Perspective Styles for each colour and switch between these in the styles.classes binding. Then you can reuse them while having a single source of their values.  
Extending that, you can then also define a custom CSS theme that stores these colours as css variables which you then reference in the Perspective Styles with `var(--your-colour)`. Then you have ultimate flexibility to create new themes.  
Also, HSL colours are also your friend in css 🙂. Don’t make friends with rgb unless you’re a robot

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 1, 2021, 8:08am UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/7 "2021-10-01T08:08:00Z")

</div>

🤖 Why you keep bullying my friends? Rgb is a cool! 🤖

---

<div class="post-metadata">

**Author:** ![furkan\_yuce](https://avatars.discourse-cdn.com/v4/letter/f/df788c/32.png) [@furkan\_yuce](https://forum.inductiveautomation.com/u/furkan_yuce)\
**Post date:** [March 24, 2024, 5:18pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/8 "2024-03-24T17:18:38Z")

</div>

thanks for this knowledge. using this code on the powerchart's stroke color:

```auto
if(
	 {[Sample_Tags]Realistic/Realistic0} > {[Sample_Tags]High_SP},
	"rgb(255,0,0)",
	if(
		{[Sample_Tags]Realistic/Realistic0} < {[Sample_Tags]Low_SP},
		"rgb(0,0,217)",
		"rgb(0,127,0)"
	)

```

May I return color of default(or any dynamic color) stroke if 'realistic0' between the border?

---

<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:** [March 24, 2024, 5:22pm UTC](https://forum.inductiveautomation.com/t/change-color-of-value-in-perspective/51507/9 "2024-03-24T17:22:58Z")

</div>

> [@furkan\_yuce](#):
>
> ... using this code on the powerchart's stroke color:

No, you can't vary the color of portions of a Power Chart trend.