# How to convert RGB color to HEX for binding **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [December 8, 2021, 1:29pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887 "2021-12-08T13:29:28Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 1:29pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/1 "2021-12-08T13:29:29Z")
I’m trying to bind a value to a label’s text color in Perspective. I want to have a gradient where it maps from 0 to 100 to the colors red and green hues (i.e. 0 = red, 100 = green, 50 = yellow, etc.). I’ve bound the label style\>color property to an expression: `gradient({[Line1Tags]Line 1/Data Points/Current/Shift/efficiency}, 0, 100, "#FF00FF", "#00FF00")` But it’s returning a "color(r, g, b, alpha) value and the binding doesn’t show the color. It shows as “java.awt.Color[r=82,g=172,b=82]” I assume it wants a hex value, but I can’t figure out how to convert a color to a hex string. Any ideas? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2021, 1:34pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/2 "2021-12-08T13:34:43Z")
css has an `rgb()` function that you can use for colors, so you can just do ```css rgb({your rgb values here, separated by commas}) ``` edit: it also has `rgba()` in case you have an alpha value ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [December 8, 2021, 1:38pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/3 "2021-12-08T13:38:25Z")
> [@Perspective Dynamic Button COLOR](https://forum.inductiveautomation.com/t/perspective-dynamic-button-color/52271): > > I am having a hard time finding out why when i apply an expression to background color element it will change in the preview on property editor but not in the view itself. Expression : gradient(toStr(tag("[default]" + "Flat Sorter Collector/OUTERBELT SLUG FINDER/GANTRY 1/TRK\_FILES/U180400\_Gantry\_Sensor\_2/" + {this.meta.name} +"\_")), {[default]Flat Sorter Collector/OUTERBELT SLUG FINDER/GANTRY\_LIMIT.value}, {[default]Flat Sorter Collector/OUTERBELT SLUG FINDER/GANTRY\_HEIGHT.value}, toColor("oran… ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 8, 2021, 1:47pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/4 "2021-12-08T13:47:31Z")
there is no need to turn it into hex > [@pascal.fragnoud](#): > > edit: it also has `rgba()` in case you have an alpha value you should do as pascal said ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [December 8, 2021, 1:54pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/5 "2021-12-08T13:54:52Z")
As I mentioned in the other post, there are a couple ways to do it. In that case I did it with hex because that is what you normally see while designing. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eebe4032abc29bd0d5f4def006dd371363f9aaf.png) ---
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 1:59pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/6 "2021-12-08T13:59:27Z")
I just wasn’t sure where I would use that function. In the gradient function somehow? I went with the solution that I understood first, haha! ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2021, 2:01pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/7 "2021-12-08T14:01:14Z")
You put it anywhere you would put an hex-formatted color. It does the conversion for you. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 8, 2021, 2:03pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/8 "2021-12-08T14:03:00Z")
you can just return it as string, as its css that handles the conversion ---
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 2:06pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/9 "2021-12-08T14:06:46Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70ea56bd09c4f62e91c16a2c1f83064a8920b1e3.png) I feel like I’m missing something. Am I misunderstanding something? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 8, 2021, 2:08pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/10 "2021-12-08T14:08:11Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/3620f737d2eaf09edee82340178ed9bf5a055d19.png) here an example ---
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 2:10pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/11 "2021-12-08T14:10:47Z")
But, that doesn’t include the gradient between red and green. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2021, 2:12pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/12 "2021-12-08T14:12:20Z")
Oh I’m sorry I didn’t realize you were not using css’s gradient directly… ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84779098855545995a9eff3434d192086fc48769.png) ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [December 8, 2021, 2:13pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/13 "2021-12-08T14:13:49Z")
They suggest something like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e5077cf09b4cb3dffab4e114795226b20a1f8977.png) also valid ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 8, 2021, 2:13pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/14 "2021-12-08T14:13:56Z")
wait you want the text to be gradient? or the background? ---
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 2:14pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/15 "2021-12-08T14:14:03Z")
No, I’m sorry, I want the text of a label to actively change colors (mapped between red and green hues) based on the value. For instance, if the value = 0, I want the label to be red, if the value = 50, the color should be yellow, and if the value = 100, the color should be green (and everything else in between). ---
**Author:** ![Joe\_Kelly](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joe_kelly/32/30990_2.png) [@Joe\_Kelly](https://forum.inductiveautomation.com/u/Joe_Kelly)\ **Post date:** [December 8, 2021, 2:14pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/16 "2021-12-08T14:14:39Z")
This would work, but I don’t think this is any easier or harder than using hex. ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [December 8, 2021, 2:15pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/17 "2021-12-08T14:15:08Z")
exactly ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 8, 2021, 2:16pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/18 "2021-12-08T14:16:05Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/c/2cf13553b5cd54d288732de5f8b383a01b87d10c.png) ? or eveything the same color? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2021, 2:16pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/19 "2021-12-08T14:16:28Z")
oooooh… My bad ! I guess I wasn’t paying attention 😕 ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2021, 2:16pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/20 "2021-12-08T14:16:57Z")
Everything the same color, but changing along a gradient depending on some value. [Next page](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887.md?page=2)