Created custom colorizable hue icons as a lovelace resource

In the YAML (possibly in the UI too) there’s an option for state_color. Set that to true.

Eg:

type: entities
title: Mx Lake’s Room
state_color: true
entities:
  - entity: your_light_here

Also the UI:

Standard Entities card (per video)

Or with Mushroom plug-in, here:

Other dash plugins possibly move or call it something different, but that should get you going.

Awesome! I’m actually looking for the code that gets executed once you set that to true. So one level deeper, how you translate from the Hue light’s colour values to a hex value. Any idea who might know?

Well, I guess like most colour LEDs, the hue lamps use Red, Green and Blue emitters
addressable as 8bit values (0-255) so really you just need to find those values, eg: pure red is 255, 0,0 and then convert each to hex (FF,00,00) and lose the commas FF0000

Home assistant does all of this for you, anyway. If you wanted to write your own, that’s how, though.

Unfortunately, that’s not how it works. Philips returns a ct value which stands for ‘colour temperature’ and it’s akin to a Mired value.

Long story short: warm/cold light doesn’t map cleanly to a linear range of RGB values. There’s some maths that goes into that. That maths is what I’m looking for :slight_smile:

Ok. We are probably a fair distance off topic here, then. I expect you can find the conversion to XY in the SDK for Hue and derive RGB from there. My bets are it’s not a linear response (particularly for your eyes) so there’s most likely a lookup table to use for known inputs.

Think gamma correction matrix, but on three channels.

Edit: yep: https://github.com/johnciech/PhilipsHueSDK/blob/69d4170cc47c9fb177d391e903cb72fcc5be375c/ApplicationDesignNotes/RGB%20to%20xy%20Color%20conversion.md

And

javascript - Philips hue, convert xy from api to HEX or RGB - Stack Overflow For sample code.

Does anyone know if it’s possible to get the SVG as an HTML path on the fly from these hue custom icons?
E.g. like this which is the HTML version of mdi:lightbulb

url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22mdi-lightbulb%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12%2C2A7%2C7%200%200%2C0%205%2C9C5%2C11.38%206.19%2C13.47%208%2C14.74V17A1%2C1%200%200%2C0%209%2C18H15A1%2C1%200%200%2C0%2016%2C17V14.74C17.81%2C13.47%2019%2C11.38%2019%2C9A7%2C7%200%200%2C0%2012%2C2M9%2C21A1%2C1%200%200%2C0%2010%2C22H14A1%2C1%200%200%2C0%2015%2C21V20H9V21Z%22%20%2F%3E%3C%2Fsvg%3E")

For context, I need this to use with https://github.com/bokub/rgb-light-card