I am trying to dynamically change the background color of a tank in my Home Assistant dashboard based on a manually selected color via an input_select.
The input_select is defined in configuration.yaml as follows:
input_select:
deposito_color:
name: Tank Color
options:
- red
- green
- blue
- orange
- yellow
- purple
- cyan
- gray
- white
- black
I created a template sensor that converts the selected option into a CSS-compatible value. I have tried multiple configurations:
Option 1: using rgb() format
sensor:
- platform: template
sensors:
color_deposito_rgb:
friendly_name: "Tank Color RGB"
value_template: >-
{% set color = states('input_select.deposito_color') | default('orange') %}
{% if color == 'red' %}rgb(255,0,0)
{% elif color == 'green' %}rgb(0,255,0)
{% elif color == 'blue' %}rgb(0,0,255)
{% elif color == 'orange' %}rgb(255,165,0)
{% elif color == 'yellow' %}rgb(255,255,0)
{% elif color == 'purple' %}rgb(128,0,128)
{% elif color == 'cyan' %}rgb(0,255,255)
{% elif color == 'gray' %}rgb(128,128,128)
{% elif color == 'white' %}rgb(255,255,255)
{% elif color == 'black' %}rgb(0,0,0)
{% else %}rgb(155,155,0)
{% endif %}
Option 2: using HEX format:
sensor:
- platform: template
sensors:
color_deposito_rgb:
friendly_name: "Tank Color RGB"
value_template: >-
{% set color = states('input_select.deposito_color') | default('orange') %}
{% if color == 'red' %}#FF0000
{% elif color == 'green' %}#00FF00
{% elif color == 'blue' %}#0000FF
{% elif color == 'orange' %}#FFA500
{% elif color == 'yellow' %}#FFFF00
{% elif color == 'purple' %}#800080
{% elif color == 'cyan' %}#00FFFF
{% elif color == 'gray' %}#808080
{% elif color == 'white' %}#FFFFFF
{% elif color == 'black' %}#000000
{% else %}#9B9B00
{% endif %}
In both cases, the sensor itself works correctly: for example, if “orange” is selected, the state returns rgb(255,165,0) or #FFA500.
However, when I attempt to use this sensor in my card via card_mod and level_color, it always displays the default color, regardless of the selected color:
card_mod:
style: |
ha-card {
background-color: [[[
return hass.states["sensor.color_deposito_rgb"].state || "rgb(155,155,0)";
]]];
}
level_color: |
[[[
return hass.states["sensor.color_deposito_rgb"].state || "rgb(155,155,0)";
]]]
full_value: "100"
No matter which color I select in the input_select, the tank always appears in the default color.
Question:
What format should the sensor return (rgb(...), #HEX, [R,G,B]) for card_mod and level_color to correctly interpret it?
Am I incorrectly accessing the sensor state in the card template?
Any advice on how to make the tank dynamically reflect the chosen color would be greatly appreciated.