Colored Air quality sensor in Lovelace

[Jokerigno]

Hi all,

I live in a city with high levels of pollution so I want to monitor air quality and change my behavior accordingly.

I created a aiqn sensor (that uses data from Italian environment agency) and a template sensor to translate numbers in words (from 50 to healthy and so on).
My next goal is to create a new sensor to use it in my Lovelace home page:
There’s a way to create a square box that changes colors based on values?
Something similar to the gauge sensor but without the gauge…

Thank you in advance

[jimpower]

You could use the image card and create the images for each condition and set that in your card

- type: image
  entity: sensor.air_quality
  title: Air Quality
  image: /local/lovelace/normal.png
  state_image:
    "High": /local/lovelace/high.png
    "Medium": /local/lovelace/medium.png
    "Low": /local/lovelace/low.png
  style:
    left: 12%
    top: 1%
    transform: none
    width: 24px
    height: 24px

[jimpower]

The above is obviously part of a picture elements card in Lovelace. Here is mine I don’t use state conditions as it never goes out of green but could be easily implemented.

[Jokerigno]

It seems easy and clear. I will try and post results. Thank you!

[Jokerigno]

Works like a charm!

Thank you!