Nevermind, I found a way to suit my needs, in case someone needs this:
Example code for the Temperature:
- entity: sensor.openweathermap_temperature
name: Temperatura
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border: solid 3px;
color: orange;
background-color:
{%- from 'interpolate_rgb.jinja' import interpolate_rgb -%}
{%- set temp = states(config.entity) | float(0) -%}
{%- set temp_map = {
0: "3498db",
22: "70a03c",
26: "ff9800",
32: "e74c3c"
} -%}
{%- set keys = temp_map | sort -%}
{%- set index = keys | select("lt", temp) | list | length -%}
{%- if index == 0 -%}
#{{ temp_map[keys | first] }}
{%- elif index == keys | length -%}
#{{ temp_map[keys | last] }}
{%- else -%}
{%- set start = (keys[index - 1], temp_map[keys[index - 1]]) -%}
{%- set stop = (keys[index], temp_map[keys[index]]) -%}
{{ interpolate_rgb(temp, start, stop) }}
{%- endif -%};
}
.badge-container .label-badge .value {
color: white;
}
.badge-container .label-badge .label span {
background-color: orange;
}
.: |
:host {
--ha-label-badge-border-radius: 30%;
--ha-label-badge-size: 50px;
--ha-label-badge-title-width: 56px;
--ha-label-badge-font-size: 22px;
}
PS: Using macro interpolate_rgb() in a separate file, interpolate_rgb.jinja, inside custom-templates folder, with:
{%- macro interpolate_rgb(temp, start, stop) -%}
{%- set (start_temp, start_color) = start -%}
{%- set (stop_temp, stop_color) = stop -%}
{%- set (start_r, start_g, start_b) = (int(start_color[0:2], base=16), int(start_color[2:4], base=16), int(start_color[4:6], base=16)) -%}
{%- set (stop_r, stop_g, stop_b) = (int(stop_color[0:2], base=16), int(stop_color[2:4], base=16), int(stop_color[4:6], base=16)) -%}
{%- set s = ((temp - start_temp)/(stop_temp - start_temp)) -%}
{# some channels might be negative; most browsers are probably tolerant, but in case not #}
{%- set r = max(int(start_r + s*(stop_r - start_r)), 0) -%}
{%- set g = max(int(start_g + s*(stop_g - start_g)), 0) -%}
{%- set b = max(int(start_b + s*(stop_b - start_b)), 0) -%}
rgb({{ r }}, {{ g }}, {{ b }});
{%- endmacro -%}
(copied from onother post here: Dynamic badge label (text) colours by parautenbach. )
