# Perspective view custom property for color **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective, ignition81\ **Created:** [June 7, 2021, 2:27am UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502 "2021-06-07T02:27:30Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 2:27am UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/1 "2021-06-07T02:27:30Z")
In Vision we could create a custom property as color type. What’s the best way to accomplish this in Perspective? ---
**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 7, 2021, 3:08am UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/2 "2021-06-07T03:08:27Z")
CSS uses strings for representing color values. I recommend hex because it’s easier to read, but you can supply an RGB string and get the same result. It’s important that you not try to use Java Color objects, though, so watch out for that. ```auto "color_one": "#00FF00" "color_two": "rgb(0,255,0)" ``` These should be equivalent when used as colors in Perspective. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 7, 2021, 10:15am UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/3 "2021-06-07T10:15:01Z")
I prefer HSL personally as you then know exactly the colour you’re l getting in terms humans can understand (we’re not very good at mixing colours in our heads). You can relatively easily learn through experience what Hue something is from 0-255: main colours are essentially 30H apart, 0=red, 30=orange, 60=yellow, 90=lime green, 120=green…, and then Saturation and Lightness are obvious. Hex and rgb are identical practically except hex requires more cognitive load ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 7, 2021, 11:37am UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/4 "2021-06-07T11:37:11Z")
> [@nminchin](#): > > except hex requires more cognitive load Except for some of us weirdos. (: ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 2:20pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/5 "2021-06-07T14:20:52Z")
In Vision when using color type we could use the color picker, so it sounds like there really isn’t an option for that, the user will need to know what to do? We could also enter text, like “red”, “blue”. Is this still an option? I’m starting to look into doing more with Perspective, and looking at “porting” over some Vision popups. I understand it’s a different approach, just trying to find the best approach. ---
**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 7, 2021, 2:28pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/6 "2021-06-07T14:28:35Z")
If you want to use color names, then you can use any named color supported within CSS. I think [this site](https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/) supplies a pretty big list which should all work within Perspective. _BEGIN UPDATED CONTENT_ As for using a color _picker_, the _schema_ defines what properties expect colors, and so properties which are expected to be colors should have a color picker. When a property is first created as a “value” property, it has no idea what it will actually be so we can’t just start providing a way to help with colors. When Perspective finds a property value which is defined in the schema as expecting a color, we treat that property a bit differently in the Designer and provide a color picker when the color square next to the property is clicked. Since custom properties are not defined in the schema, we don not provide the picker there. _END UPDATED CONTENT_ If you click the blue square seen in this screenshot, you’ll be provided a color picker. ![Screen Shot 2021-06-07 at 7.23.11 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b34a6ff3e0b7c035c4cbee8544eb95f134077bb9.png) ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 2:55pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/7 "2021-06-07T14:55:46Z")
That’s what I was hoping for, but I’m not able get it working right. Just to make sure I’m understanding… If I create a custom property and give it a string value like, “#00FF00”, it should then recognize as a color and give me a picker? I’m not seeing this happen. Using 8.1.4. ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [June 7, 2021, 3:08pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/8 "2021-06-07T15:08:34Z")
The same thing happens for me in 8.1.5. Not just with colors though, boolean values too. Type in True or False and it keeps it as a string. I’ve found the only way I can force them to the type I want is to create a binding on the property to another property that has the proper type and then remove the binding. It will maintain the data type after removing the binding. Numbers and strings switch back and forth, automatically, as expected. Would be nice if there was a right click option to force a property to the type you want and possibly lock it to that type. Edit: I guess it’s not recognizing the boolean because I have it in my head to always capitalize True/False… 🤦‍♂️ Would still be nice to be able to lock in a data type for a property. Help prevent potential future errors if someone accidentally changes a property value in the designer, not throwing an error since it automatically switches type, and then throws an error in the client because of an improper type. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 7, 2021, 3:12pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/9 "2021-06-07T15:12:30Z")
How you used vision client tags to hold colours and how you use colours in Perspective are two very different things. Perspective Styles should hold most of your colour and styling config, where perspective styles should ideally take their colours from CSS variables, either from the standard igntion themes, or from your own theme. Using references to CSS variables allows you to then swap whole themes of colours out to support different colour themes such as light, dark, or high contrast. Take a look at the readme.md within the perspective theme folder (I’ll get a link tomorrow if someone doesn’t post it before then) To reference a css variable, use: `var(--variable-name)` E.g. `var(--neutral-80)` You can use this for any property value ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 3:17pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/10 "2021-06-07T15:17:10Z")
> [@nminchin](#): > > How you used vision client tags to hold colours and how you use colours in Perspective are two very different things. That's not what I'm doing in this case. It's not a global thing, it's per instance. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 3:17pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/11 "2021-06-07T15:17:53Z")
> [@WillMT10](#): > > The same thing happens for me in 8.1.5. Not just with colors though, boolean values too. Type in True or False and it keeps it as a string. I thought I noticed that as well. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 7, 2021, 3:20pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/12 "2021-06-07T15:20:35Z")
Even still, the colours themselves ideally should come from a Style in most cases. Of course there are always exceptions ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [June 7, 2021, 3:20pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/13 "2021-06-07T15:20:47Z")
Yeah, just realized that apparently it needs to be lowercase true or false to recognize it automatically. Must be a javascript thing since I’m used to Python being capitalized. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 3:21pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/14 "2021-06-07T15:21:48Z")
This would be the exception, we aren’t going to create a style for each instance. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 7, 2021, 3:22pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/15 "2021-06-07T15:22:32Z")
Can I ask what the colours are for? And the instances for that matter too ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 3:27pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/16 "2021-06-07T15:27:54Z")
I’m creating reusable components, like templates. Each instance might have a different back color, text color, etc., but may have lots of bindings that are the same throughout (which is why I would like to use a “template”). I’m just throwing around things right now, will get a better feel for it as I get more in to it. We also use global colors, those I use styles. Notice my spelling of color? 🙂 ---
**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 7, 2021, 3:35pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/17 "2021-06-07T15:35:39Z")
> [@jlandwerlen](#): > > If I create a custom property and give it a string value like, “#00FF00”, it should then recognize as a color and give me a picker? I’m not seeing this happen. Using 8.1.4. Maybe, but there might be a misunderstanding in what is expected; if you specify the property value as `"#00FF00"` (note the inclusion of double quotes), then that is a string value _which includes quotes_ and will therefore only be recognized as a string. You should supply the value as `#00FF00` (note that you did not need to supply quotes yourself). Also, notice that the values you're supplying are not using `O` (oh) - they are using `0` (zero). The only characters used in hex values are A-F and 0-9. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 7, 2021, 3:35pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/18 "2021-06-07T15:35:52Z")
Fair enough. The params themselves won't be able to be set to a particular type, so the name of the params will just have to suffice as an indication of what their type should be. Fwiw you could accept in entire style objects if you want to make them fully customisable. > [@jlandwerlen](#): > > Notice my spelling of color? 🙂 🤐 ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [June 7, 2021, 3:42pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/19 "2021-06-07T15:42:09Z")
I copied the hex value from a picker in vision. I didn’t include quotes, actually I tried both. I copied your value and it isn’t working either. ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [June 7, 2021, 3:46pm UTC](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502/20 "2021-06-07T15:46:30Z")
Same thing for me in 8.1.5 ![Screen Shot 2021-06-07 at 11.45.39 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/9/a96011dfde82001251ab3c189440b808b786dc1b.png) [Next page](https://forum.inductiveautomation.com/t/perspective-view-custom-property-for-color/47502.md?page=2)