Custom Color Widget


I´m trying to write a custom widget that shows a lightbulb(or an icon of a lightbulb) according to a color item of my hue lamp. Is there a way to set the icon color to the color item, or maybe the background of the item to the according color?

Any help would be appreciated, thanks!

I doubt you can without coding a separate directive, but it’s not easy… Colors are represented in openHAB as HSV comma-separated values and in CSS you can use HSL (see,_HSV,_HSL and but this needs a conversion…

You can review the code of the standard color picker for inspiration:

For icons it’s even more complex because it’s a filter like this:

1 Like

Thanks for the help, I will have a look into that!


Did you have any success with this?


I use this

ng-style="{'color': 'rgb(' + itemValue( + '_rgb_String') + ')'}"

to control the color of a glyphicon in a container/button

1 Like

Thanks Christopher :slight_smile:

I’ll give that a try.

Just to be uber clear…
Is the item your container button is looking for named something like


And how is the RGB string presented in that string, for example, are the three values HEX or Decimal, comma separated or fixed lengths?

I did see somewhere that the Color style can accept HSL values which might save some conversion.

I have had a look at the NodeRed Dashboard, with the idea that I’d use the colourpicker there, but the HSL values are very formally presented (within the payload) so there’s a need for conversion In & Out.

I’ll let you know how I get on :slight_smile:


You could possibly change it to use directly the color item and change the RGB to hsl but I’m not sure

1 Like

Hi Chris

I’m just not having any joy with this.

Converting the values doesn’t seem to difficult, but getting a colour to change in the UI is proving beyond me.

Would you mind sharing your Widget / Container / Button so that I can have a clear look at what’s going on?



@MDAR Did you work this out as I am trying to work out the same thing? How to get the style to change based on the color inside a color item?

Possibly this is done by setting the colour info with a rule into a new string item and using that. I’m hoping there is a more elegant solution to this…

Sorry Matt

I stopped once I got the colour to change at will.

Styling it seemed less important, the more I realised that it was beyond my skilset.