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:
If you want to have a needle as pointer just set the option needle: true
, with this result:
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.