#Gauge card color gradients

1 messages · Page 1 of 1 (latest)

faint tendon
#

Red to green```yaml

  • type: gauge
    entity: sensor.s22_ultra_battery_level
    name: Red-to-green
    min: 0
    max: 100
    needle: true
    segments:
    • from: 0
      color: '#FF0000'
    • from: 3
      color: '#FF1100'
    • from: 7
      color: '#FF2200'
    • from: 10
      color: '#FF3300'
    • from: 13
      color: '#FF4400'
    • from: 17
      color: '#FF5500'
    • from: 20
      color: '#FF6600'
    • from: 23
      color: '#FF7700'
    • from: 27
      color: '#FF8800'
    • from: 30
      color: '#FF9900'
    • from: 33
      color: '#FFAA00'
    • from: 37
      color: '#FFBB00'
    • from: 40
      color: '#FFCC00'
    • from: 43
      color: '#FFDD00'
    • from: 47
      color: '#FFEE00'
    • from: 50
      color: '#FFFF00'
    • from: 53
      color: '#EEFF00'
    • from: 57
      color: '#DDFF00'
    • from: 60
      color: '#CCFF00'
    • from: 63
      color: '#BBFF00'
    • from: 67
      color: '#AAFF00'
    • from: 70
      color: '#99FF00'
    • from: 73
      color: '#88FF00'
    • from: 77
      color: '#77FF00'
    • from: 80
      color: '#66FF00'
    • from: 83
      color: '#55FF00'
    • from: 87
      color: '#44FF00'
    • from: 90
      color: '#33FF00'
    • from: 93
      color: '#22FF00'
    • from: 97
      color: '#11FF00'
    • from: 100
      color: '#00FF00'```
image.png
#

Green to red```yaml

  • type: gauge
    entity: sensor.s22_ultra_battery_level
    name: Green-to-red
    min: 0
    max: 100
    needle: true
    segments:
    • from: 0
      color: '#00FF00'
    • from: 3
      color: '#11FF00'
    • from: 7
      color: '#22FF00'
    • from: 10
      color: '#33FF00'
    • from: 13
      color: '#44FF00'
    • from: 17
      color: '#55FF00'
    • from: 20
      color: '#66FF00'
    • from: 23
      color: '#77FF00'
    • from: 27
      color: '#88FF00'
    • from: 30
      color: '#99FF00'
    • from: 33
      color: '#AAFF00'
    • from: 37
      color: '#BBFF00'
    • from: 40
      color: '#CCFF00'
    • from: 43
      color: '#DDFF00'
    • from: 47
      color: '#EEFF00'
    • from: 50
      color: '#FFFF00'
    • from: 53
      color: '#FFEE00'
    • from: 57
      color: '#FFDD00'
    • from: 60
      color: '#FFCC00'
    • from: 63
      color: '#FFBB00'
    • from: 67
      color: '#FFAA00'
    • from: 70
      color: '#FF9900'
    • from: 73
      color: '#FF8800'
    • from: 77
      color: '#FF7700'
    • from: 80
      color: '#FF6600'
    • from: 83
      color: '#FF5500'
    • from: 87
      color: '#FF4400'
    • from: 90
      color: '#FF3300'
    • from: 93
      color: '#FF2200'
    • from: 97
      color: '#FF1100'
    • from: 100
      color: '#FF0000'```
image.png
#

@west haven I put these together a while back. Not as efficient as the SVG color gradients but get the job done.

west haven
#

thanks