# Custom Named Colors in Vision?

**URL:** <https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [October 27, 2021, 3:52pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404 "2021-10-27T15:52:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![batkinson](https://avatars.discourse-cdn.com/v4/letter/b/ed8c4c/32.png) [@batkinson](https://forum.inductiveautomation.com/u/batkinson)\
**Post date:** [October 27, 2021, 3:52pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/1 "2021-10-27T15:52:52Z")

</div>

I may not be looking with the right search terms, but I’m having a hard time finding the best practice for storing a set of custom colors by name to be able to use them project wide across my vision screens.

How can I best setup and store definitions such that I can tell my project that OD\_BG1 is #002b36 and then be able to set object color properties in Vision to be OD\_BG1 and have them show that hex code?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 27, 2021, 4:31pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/2 "2021-10-27T16:31:24Z")

</div>

We’re going to be releasing a module in the next couple months that does exactly this!

It’ll support defining named colors (tokens), which can have a unique value for a given theme. There can be multiple themes for a project which can be swapped on the fly. A theme is a collection of color ramps organized to form a palette.

Tokens can either reference palette colors from a theme, or can reference other tokens (with optional palette or key shifts) in order to create a hierarchy.

And thanks to caching/avoiding Jython interpretation performance is much better than client tag/script module color storage options.

Stay tuned for more info, there should be a public beta coming soon!

---

<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:** [October 27, 2021, 4:34pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/3 "2021-10-27T16:34:13Z")

</div>

In the meantime…

You can make a 2-column dataset memory tag  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/022d13d01b24450a5e4e7ee063be01530d234b91.png)

Put a custom property on the component (My example uses ‘colorName’)  
Bind the component colors using a lookup expression.:

```auto
toColor(
        lookup({[Test]ColorTable},
               {Root Container.Rectangle.colorName},
               '#A0A0A0',
               'colorName',
               'hexVal'
              )
        )

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/28f49e62420cecd3799839118440b989d1c7f4e0.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/2/22ce465bdfa085a183bbcff7758bf9b9843e72e9.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21ccb8e80e254f466c7df7f3fc683af2f39e31c8.png)

---

<div class="post-metadata">

**Author:** ![batkinson](https://avatars.discourse-cdn.com/v4/letter/b/ed8c4c/32.png) [@batkinson](https://forum.inductiveautomation.com/u/batkinson)\
**Post date:** [October 27, 2021, 4:36pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/4 "2021-10-27T16:36:28Z")

</div>

Thanks Jordan, that makes a lot of sense. What’s my best bet for being able to centrally create and manage that memory tag? Can I stick the datasets somewhere in an inheritable project so that I can use this across projects and gateways?

---

<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:** [October 27, 2021, 4:37pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/5 "2021-10-27T16:37:28Z")

</div>

If it’s in a tag, it will already be global.

@bmusson Looking forward to seeing what you’ve got.

EDIT: The obvious exception to this is if you put it in a client tag.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 27, 2021, 4:50pm UTC](https://forum.inductiveautomation.com/t/custom-named-colors-in-vision/52404/6 "2021-10-27T16:50:45Z")

</div>

> [@JordanCClark](#):
>
> @ben.d.musson Looking forward to seeing what you’ve got.

@JordanCClark Some screenshots to build hype 😉 (Also, I'm a big fan of the [Mineral UI design system](https://mineral-ui.netlify.app/))

So for general timeline: the design interface for tokens (including relative references with the common `[.]` syntax) is the only thing that needs wrapped up before the beta. Then between the beta and the full release I'd like to implement a "Theme Browser" for drag/drog designing in Vision.

 ![Schema](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55548e59f2c4c9fb75a1774677d2770c5e8e6a7b.png)  
 ![Ramp](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/40d6903f5152cbe81d5bf7ab643e5ab8a734a203.png)  
 ![Theme](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/495115dd044e9ba393b7b241e3a1a59fdbc3a251.png)  
 ![Token](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/1505b97c1cd74247814d565a0be73071b005d17a.png)