# Using color-picker in UI Template

**URL:** https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764
**Category:** Dashboard
**Created:** [16 October 2019 08:59 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764 "2019-10-16T08:59:20Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [16 October 2019 08:59 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764/1 "2019-10-16T08:59:20Z")

</div>

Has anyone managed to get color-picker working in a Dashboard Template node?

`<color-picker ng-model="myColor" options="{format:'rgb', round:true, hue:false, lightness:false, alpha:false}"></color-picker>`

This displays the picker, ng-change doesn't seem to be available for color-picker, so I'm not sure how to get a message out of it.

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [16 October 2019 14:25 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764/2 "2019-10-16T14:25:29Z")

</div>

So apparently [this](https://ruhley.github.io/angular-color-picker/) is the color-picker used in Node-RED dashboard. Documentation says;

```auto
<color-picker
    ng-model="color"
    options="options"
    api="api"
    event-api="eventApi"
></color-picker>

```

Presumably I need to add an `event-api` parameter? Here's the documentation for that:

```auto
// api event handlers
$scope.eventApi = {
    onChange: function(api, color, $event) {},
    onBlur: function(api, color, $event) {},
    onOpen: function(api, color, $event) {},
    onClose: function(api, color, $event) {},
    onClear: function(api, color, $event) {},
    onReset: function(api, color, $event) {},
    onDestroy: function(api, color) {},
};

```

I've tried something like this, in the Dashboard Template node (just to see if it sends anything back when I change the colour):

`<color-picker ng-model="myColor" event-api="onChange: function() {send({action: 'colchange'})}"></color-picker>`

... but it breaks the color-picker element:

 ![Clipboard01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fb1e8a32fb5919fe7b58f44334e3c43637cd654f.jpeg)

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [26 January 2020 18:39 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764/3 "2020-01-26T18:39:47Z")

</div>

Sorry to bump, but can anyone help on this?

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [27 January 2020 21:59 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764/4 "2020-01-27T21:59:47Z")

</div>

Can you live with the html color picker? Not as sexy but often does the job.

```auto
<input type="color" ng-model="msg.payload" ng-change="send(msg)"> 

```

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [27 January 2020 23:24 UTC](https://discourse.nodered.org/t/using-color-picker-in-ui-template/16764/5 "2020-01-27T23:24:18Z")

</div>

Thanks, that works for me.

Incidentally, it is pretty sexy on the iphone, as it brings up a nice palette which sends values as you tap around the palette.

But on Chrome in Windows it brings up the old school color selection dialog, which requires clicking on a color then pressing okay (3 clicks).

Is there some cool jquery plugin that could be used to make it marginally nicer?