Text change colour on the value of input

Configuration
#1

I have been looking around and so far I am not been able to find this. so I hope that someone can help.
image

I would like the percentage values to change colour depending on the charge of the battery.
example from 100 to 70% to be green,
from 70 to 30% to be yellow
from 30 to 0 to be red

I have start it this off, but I am not sure on my next step

type: horizontal-stack
cards:

  • type: entity
    entity: sensor.givtcp_be2132g059_battery_soc
    name: 8.2 khw Battery
  • type: entity
    entity: sensor.givtcp_ce2142g147_soc
    name: '5.2 khw Battery ’
#2

Sadly, this is not as easy as you’d think it would be.

You’re going to want to install card-mod
thomasloven/lovelace-card-mod: :small_blue_diamond: Add CSS styles to (almost) any lovelace card (github.com)

It can be done manually but, if you’re likely to want other custom elements in the future, you should probably install HACs (if you’ve not already) and use that to install card-mod.
Home Assistant Community Store | HACS

Then go look at at the card-mod docs + this thread
:small_blue_diamond: Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

Particularly this post:
:small_blue_diamond: Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

Have fun!