# Binding background color on perspective label **URL:** \ **Category:** Ignition\ **Created:** [October 8, 2019, 7:56pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931 "2019-10-08T19:56:56Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![gfeiten](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@gfeiten](https://forum.inductiveautomation.com/u/gfeiten)\ **Post date:** [October 8, 2019, 7:56pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/1 "2019-10-08T19:56:56Z")
I’m trying to figure out how to bind the background color of a perspective label to a tag value. In Vision it is straightforward to do (with a text field). I see where I can set it to a static value in the modify style link. I want to set up an expression such as: if ({[default]tag\_name.value} = 0, “0,217,0”, if ({[default]tag\_name.value} = 1, “255,255,0”, if ({[default]tag\_name.value} = 2, “255,0,0”, “170,170,170”))) Can anyone add insight? Thanks!!! ---
**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:** [October 8, 2019, 8:14pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/2 "2019-10-08T20:14:01Z")
The same process very much applies, there’s just a few small changes to make: - Before you set up the binding, you’ll need to add a `backgroundColor` property to the styles object. The easiest way to do this (so you don’t have to remember the name of every property) is just to open the style customizer on the specific component and enter some value for the property(ies) that you want to bind. - Just like Vision, you can then add a binding to the component. An expression binding works just like it does in Vision: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/0fecd5cc96995a92833d5f93d25b62f9521ccbea.png) - The other caveat to be aware of is that, since we’re emitting this directly to a webpage, the ‘color’ can’t just be `", , "` - that was a convenience we offered in Vision (and have plans to make better in Perspective) but, for now, you’ll need to either: A. Wrap the color in the CSS `rgb` function - so a property with `"backgroundColor": "rgb(, , )"` would work fine. Keep in mind that `rgb(r, g, b)` has to be the literal string your expression returns; so something like this: ```auto stringFormat("rgb(%s)", switch({[default]tag_name.value}, 0, "0,217,0", 1, "255,255,0", 2, "255,0,0", "170,170,170")) ``` B. Return a ‘web-style’ _hex_ color code. This is still the RGB you’re used to, but encoded in hexadecimal, so 255 becomes FF: ```auto "#" + switch({[default]tag_name.value}, 0, "00D900", 1, "FFFF00", 2, "FF0000", "AAAAAA") ``` Note that in both cases I used the `switch` operator - there’s no real reason for that (the nested `if` statements in your example would also work); I just find the `switch` operator a bit easier to read and operate with. ---
**Author:** ![gfeiten](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@gfeiten](https://forum.inductiveautomation.com/u/gfeiten)\ **Post date:** [October 9, 2019, 5:00pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/3 "2019-10-09T17:00:38Z")
I assigned a color to the background color and then was able to add binding…so far so good Although the backgroundColor label in the props drop down changes color correctly when I change the tag value, the label itself does not change color. Here is my binding expression: if ({[default]P3 Conveyor Status Tags/Fault Value} = 0, “00D900”, if ({[default]P3 Conveyor Status Tags/Fault Value} = 1, “FFFF00”, if ({[default]P3 Conveyor Status Tags/Fault Value} = 2, “FF0000”, “AAAAAA”))) Here is a screen print. The label with “Running” is the one in question. You can see on the right that backgroundColor is green. In the designer the label stays the purple color I assigned it. In the url launch it has no color at all. Next steps??? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a4e07f74f4e7215e814095a240bf45e8be53295e.png) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [October 9, 2019, 7:35pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/4 "2019-10-09T19:35:38Z")
The issue you are encountering is that the "color" you're supplying is missing the required pound sign (`#`) prefix which Paul recommended here: > [@paul-griffith](#): > > "#" + switch({[default]tag\_name.value}, 0, "00D900", 1, "FFFF00", 2, "FF0000", "AAAAAA") There is a much better way to accomplish this same task which eliminates the need to format a hex color or even maintain logical conditions, and that is the Map transform. COnsider binding against the value of your tag and using the Map transform, like so: ![08%20PM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/64a53b5e55a335177a45455b26300fce486b9da4.png) ---
**Author:** ![gfeiten](https://avatars.discourse-cdn.com/v4/letter/g/cdc98d/32.png) [@gfeiten](https://forum.inductiveautomation.com/u/gfeiten)\ **Post date:** [October 9, 2019, 7:45pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/5 "2019-10-09T19:45:27Z")
Thank you, both suggestions worked like a champ! ---
**Author:** ![sanket.goje](https://avatars.discourse-cdn.com/v4/letter/s/7cd45c/32.png) [@sanket.goje](https://forum.inductiveautomation.com/u/sanket.goje)\ **Post date:** [June 16, 2022, 6:12pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/6 "2022-06-16T18:12:46Z")
Hi Is there a way this binding can be made indirect based on a particular value from a table? For example, I have a table that shows multiple numbers of equipment. From that table, I would like to use the value in column x to complete my tag path. Thanks. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 16, 2022, 7:20pm UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/7 "2022-06-16T19:20:21Z")
Of course you can make the binding indirect, but how are you determining which row you will receive the column value from? ---
**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\ **Post date:** [March 31, 2023, 4:19am UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/8 "2023-03-31T04:19:52Z")
Hi, I am trying simple label background color. In designer I am getting like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e10e1c193300fc19363ee698d0f45a97a27edcfb.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/9405760f997b335cf1f41ba7c8e3940508305a79.png) but after launching, I am getting extra space with background color. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b1666ac37785bedcf90cf8cc744dd192c39f34d2.png) Can you please guide Where I am wrong ---
**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\ **Post date:** [March 31, 2023, 4:36am UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/9 "2023-03-31T04:36:41Z")
Is your coordinate container mode set to `percent`? Try change it to `fixed.` ---
**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\ **Post date:** [March 31, 2023, 4:43am UTC](https://forum.inductiveautomation.com/t/binding-background-color-on-perspective-label/28931/10 "2023-03-31T04:43:43Z")
yes, I got It. Thank you.