# How to convert RGB color to HEX for binding

**URL:** <https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887>\
**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:** 7\
**Page:** 2

<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:** [December 8, 2021, 2:18pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/21 "2021-12-08T14:18:55Z")

</div>

does it have to be 0,50,100 as values?

---

<div class="post-metadata">

**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:19pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/22 "2021-12-08T14:19:29Z")

</div>

No, it needs to be a linear gradient between 0 and 100. I just used those values as examples of expected outputs.

---

<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:** [December 8, 2021, 2:22pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/23 "2021-12-08T14:22:32Z")

</div>

how about hsl? would be easiest if you only have one variable value  
just an expression as text would do too. it has everythign inbetween too ofc

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

---

<div class="post-metadata">

**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:28pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/24 "2021-12-08T14:28:19Z")

</div>

In order to do that, I would need to map my value from 0 to 100 → 0 to 120 to match the hue numbers. Is there a function to map inside of an expression?

---

<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:** [December 8, 2021, 2:29pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/25 "2021-12-08T14:29:29Z")

</div>

just multiply by 1.2

---

<div class="post-metadata">

**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:30pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/26 "2021-12-08T14:30:26Z")

</div>

Oh, haha! Yep. Well, that’s another solution, thanks!

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [December 8, 2021, 3:15pm UTC](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887/27 "2021-12-08T15:15:42Z")

</div>

I had written a class for such a thing.  
EDIT: Oops! Sent it before I was ready. This will also do multi-color gradients. A script transform could use this class to pick a point along the gradient.

```python
class gradientPoint:
	''' 
		Calculate the RGB value of a point on a gradient.
		 Usage: gradient(minval, maxval, [colors])
	    	minval - minimun value to scale to
	    	maxval - maximum value to scale to
	    	colors - A list of RGB colors delineating a series of
		             adjacent linear color gradients between each pair.
		 Example: scale the values between 20 and 35 to a three color gradient.
		 	p = gradientPoint(20, 35, ['#0000FF', '#FFFF00', '#FF0000']) 
		 	After the instance is created, call it with a value to get the scaled color
			p(20) returns '#0000FF'
			p(25) returns '#AAAA55'
	'''
	
	def __init__ (self, minval, maxval, colors):
		self.minval = minval
		self.maxval = maxval
		self.colors = []
		for color in colors:
			if type(color). __name__ == 'str':
				c = self.hex_to_rgb(color)
			elif type(color). __name__ == 'list':
				c = tuple(color)
			elif type(color). __name__ == 'tuple':
				c = color
			self.colors.append(c)
			
	def __call__ (self, value):
		return self.calc(value)
	
	def calc(self, value):
		import sys
		# Smallest possible difference.
		epsilon = sys.float_info.epsilon
		
		# Keep value within limits
		if value < self.minval:
			value = self.minval
		if value > self.maxval:
			value = self.maxval
		''' 
		 	Determine where the given value falls proportionality within
		 	the range from minval->maxval and scale that fractional value
		 	by the total number in the "colors" pallette.
		 '''
		i_f = float(value-self.minval) / float(self.maxval-self.minval) * (len(self.colors)-1)
		''' 
			Determine the lower index of the pair of color indices this
		 	value corresponds and its fractional distance between the lower
		 	and the upper colors.
		 '''
		# Split into integer & fractional parts. 
		i, f = int(i_f // 1), i_f % 1  
		# Does it fall exactly on one of the color points?
		if f < epsilon:
			return self.rgb_to_hex(self.colors[i])
		# Otherwise return a color within the range between them.
		else:  
			(r1, g1, b1), (r2, g2, b2) = self.colors[i], self.colors[i+1]
			#print (r1, g1, b1), (r2, g2, b2)
			#print int(r1 + f*(r2-r1)), int(g1 + f*(g2-g1)), int(b1 + f*(b2-b1))
			return self.rgb_to_hex((int(r1 + f*(r2-r1)), int(g1 + f*(g2-g1)), int(b1 + f*(b2-b1))))
	
		
	def hex_to_rgb(self, value):
		'''
			Convert a hex RGB value to a tuple of 0-255 values
		'''
		value = value.lstrip('#')
		return tuple(int(value[i:i+2], 16) for i in (0, 2, 4))
	
	def rgb_to_hex(self, rgb):
		'''
			Convert an RGB tuple to a hex string
		'''
		return '#%02x%02x%02x' % rgb
```

[Previous page](https://forum.inductiveautomation.com/t/how-to-convert-rgb-color-to-hex-for-binding/53887.md?page=1)