Lovelace Card Mod w Conditional Color Formatting

Configuration Frontend
43

So for things like battery level, there’s an even shorter way of doing this if you’re cool with a gradual color change rather than a hard cut to the new color beyond certain thresholds. The HSL color model actually goes from red to green on a roughly 0 - 100 scale (it’s really closer to 0 - 130, but it just looks like a slightly yellow-ish green at 100). You can see it animating from 0 - 100 in this codepen I made here as an example of what the color would look like: https://codepen.io/ytilis/pen/LYwRLgY

So instead of doing all this:

{% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
  color: red !important;
{% elif battery < 50 %}
  color: orange !important;
{% elif battery < 70 %}
  color: yellow !important;
{% else %}
  color: green !important;
{% endif %}

You should just be able do this:

{% set battery = states('sensor.back_door_lock_battery') | int(0) %}
color: hsl({{ battery }}, 100%, 40%);
1 Like