Gauge Card: how to get a gradually changing color?

I updated my gauge configuration one more time, making the color changing a little more gradual, and adding one more color.
With this gauge the color changes in 40 steps from red via yellow to green over a range from 0 % to 100 %:

type: gauge
entity: input_number.number
name: Test
unit: '%'
needle: false
min: 0
max: 100
segments:
  - from: 0
    color: '#ff0d00'
  - from: 2.5
    color: '#ff1a00'
  - from: 5
    color: '#ff2600'
  - from: 7.5
    color: '#ff3300'
  - from: 10
    color: '#ff4000'
  - from: 12.5
    color: '#ff4c00'
  - from: 15
    color: '#ff5900'
  - from: 17.5
    color: '#ff6600'
  - from: 20
    color: '#ff7300'
  - from: 22.5
    color: '#ff8000'
  - from: 25
    color: '#ff8c00'
  - from: 27.5
    color: '#ff9900'
  - from: 30
    color: '#ffa600'
  - from: 32.5
    color: '#ffb200'
  - from: 35
    color: '#ffbf00'
  - from: 37.5
    color: '#ffcc00'
  - from: 40
    color: '#ffd900'
  - from: 42.5
    color: '#ffe600'
  - from: 45
    color: '#fff200'
  - from: 47.5
    color: '#ffff00'
  - from: 50
    color: '#ffff00'
  - from: 52.5
    color: '#f2ff00'
  - from: 55
    color: '#e6ff00'
  - from: 57.5
    color: '#d9ff00'
  - from: 60
    color: '#ccff00'
  - from: 62.5
    color: '#bfff00'
  - from: 65
    color: '#b2ff00'
  - from: 67.5
    color: '#a6ff00'
  - from: 70
    color: '#99ff00'
  - from: 72.5
    color: '#8cff00'
  - from: 75
    color: '#80ff00'
  - from: 77.5
    color: '#73ff00'
  - from: 80
    color: '#66ff00'
  - from: 82.5
    color: '#59ff00'
  - from: 85
    color: '#4dff00'
  - from: 87.5
    color: '#40ff00'
  - from: 90
    color: '#33ff00'
  - from: 92.5
    color: '#26ff00'
  - from: 95
    color: '#19ff00'
  - from: 97.5
    color: '#0dff00'

And this is the result:

HA_GaugeTest_002_20221111_085127HA_GaugeTest_003_20221111_085134HA_GaugeTest_004_20221111_085140HA_GaugeTest_005_20221111_085143HA_GaugeTest_006_20221111_085147HA_GaugeTest_007_20221111_085151HA_GaugeTest_008_20221111_085156HA_GaugeTest_009_20221111_085201

If you want to have a needle as pointer just set the option needle: true, with this result:

HA_GaugeTest_010_20221111_085236

I hope this is useful to others as well.
If you want to use this with another range you just have to modify the unit:, min: and max: values, and modify the from: values accordingly.

7 Likes