# Perspective - Creating a color property

**URL:** <https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861>\
**Category:** Module Development\
**Created:** [April 11, 2020, 3:36am UTC](https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861 "2020-04-11T03:36:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dillonu](https://avatars.discourse-cdn.com/v4/letter/d/278dde/32.png) [@dillonu](https://forum.inductiveautomation.com/u/dillonu)\
**Post date:** [April 11, 2020, 3:36am UTC](https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861/1 "2020-04-11T03:36:44Z")

</div>

Hi,

We’re trying to add various validation rules to our component’s schema. How can we enforce a color as input to a specific property like how it is done on the LED Display component and get the nice color selector popup?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/ffe885ae254c2cde59c45ad31b7d2aaef4e71038.png)

Here is the schema I’m playing with:

```auto
{
    "type": "object",
    "properties": {
        "color": {
            "type": "string",
            "description": "A color to use to render the component.",
            "default": "#0F0"
        },
        "style": {
            "$ref": "urn:ignition-schema:schemas/style-properties.schema.json",
            "default": {
                "classes": ""
            }
        }
    }
}

```

Is there a $ref for colors?

Thanks,  
Dillon

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 11, 2020, 7:02am UTC](https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861/2 "2020-04-11T07:02:10Z")

</div>

Add `"format": "color"` to the object; that’ll cue the JsonEditor to use the right editor.

---

<div class="post-metadata">

**Author:** ![dillonu](https://avatars.discourse-cdn.com/v4/letter/d/278dde/32.png) [@dillonu](https://forum.inductiveautomation.com/u/dillonu)\
**Post date:** [April 11, 2020, 5:22pm UTC](https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861/3 "2020-04-11T17:22:47Z")

</div>

Awesome! That worked.

However, now I’m trying to extend the property to accept one color, or an array of colors. The color editor doesn’t seem to work when using anyOf. How can I get the editor to work with below?

```auto
"color": {
	"anyOf": [
		{ "type": "string", "format": "color" },
		{ "type": "array", "minItems": 1, "items": { "type": "string", "format": "color" } }
	],
	"description": "the background color(s) of rectangle (cycles if an array)",
	"default": "#0F0"
}

```

Thanks,  
Dillon

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 13, 2020, 1:26pm UTC](https://forum.inductiveautomation.com/t/perspective-creating-a-color-property/33861/4 "2020-04-13T13:26:43Z")

</div>

Hm, our internal parsing logic doesn’t walk down `anyOf`; it’s just checking that the top level `format` prop is `color` on the schema object. You might just have to always mark it as an array property.