# A color picker component for vision

**URL:** <https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779>\
**Category:** Ignition\
**Created:** [June 27, 2013, 7:57am UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779 "2013-06-27T07:57:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [June 27, 2013, 7:57am UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/1 "2013-06-27T07:57:04Z")

</div>

Can you add a color picker component for vision.

---

<div class="post-metadata">

**Author:** ![salbrechtsen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/salbrechtsen/32/18660_2.png) [@salbrechtsen](https://forum.inductiveautomation.com/u/salbrechtsen)\
**Post date:** [April 4, 2018, 4:13pm UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/2 "2018-04-04T16:13:04Z")

</div>

Hate to resurrect this, but this is a great idea and would be really helpful.

---

<div class="post-metadata">

**Author:** ![JGJohnson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jgjohnson/32/29582_2.png) [@JGJohnson](https://forum.inductiveautomation.com/u/JGJohnson)\
**Post date:** [April 4, 2018, 4:16pm UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/3 "2018-04-04T16:16:22Z")

</div>

Use [system.gui.chooseColor()](https://docs.inductiveautomation.com/display/DOC79/system.gui.chooseColor)

---

<div class="post-metadata">

**Author:** ![salbrechtsen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/salbrechtsen/32/18660_2.png) [@salbrechtsen](https://forum.inductiveautomation.com/u/salbrechtsen)\
**Post date:** [April 4, 2018, 4:36pm UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/4 "2018-04-04T16:36:29Z")

</div>

Was not aware of this, thank you!

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 15, 2023, 2:58am UTC](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/5 "2023-03-15T02:58:49Z")

</div>

I prefer [system.gui.chooseColor()](https://docs.inductiveautomation.com/display/DOC79/system.gui.chooseColor) as recommended in [post 3](https://forum.inductiveautomation.com/t/a-color-picker-component-for-vision/6779/3), but while working on [a different problem](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617/2), I developed a way to manipulate the cell renderer of the dropdown and subsequently began exploring alternate uses for the script. Here is an alternative approach that converts a dropdown component to a color picker:

• Replace the dropdown's string datatype Label column with a color datatype label column:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/45f18774a23f42bf373f6dc48e052fa7b485623c.png)

• Then, use the following script on the dropdown's propertyChange event handler:

```python
from com.inductiveautomation.plaf import ComboListCellRenderer
if event.propertyName == 'componentRunning':
	# Override the cell renderer for custom functionality
	class ColorCellRenderer(ComboListCellRenderer):
		def getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus):
			ComboListCellRenderer.getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus)
			if index != -1:
				color = event.source.data.getValueAt(index, 1)
				self.background = color
				self.foreground = color
			if index != -1 and event.source.selectedIndex == index:
				event.source.background = self.background
				event.source.foreground = self.foreground
			return self
	renderer = ColorCellRenderer()
	event.source.setRenderer(renderer)

```

**Here is the result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e76a6642cc7336f620d5cae9ae70690b3f917f70.png)  
**Note:** for this script to run in the designer, preview mode must be on when the window is opened

I imagine that this could be useful if there is a need to limit the color choices

**Edit:** Updated this code, so it has proper interactions with the Ignition look and feel in versions 8.0.x and 8.1.x