Change colors for gauge card?

I’ve tried to modify the color and have more than three colors for a gauge like described in this thread.

Modifying the colors works fine, but when I have the blue line in the severity configuration, the gauge is always blue. The theme is like in this thread.
The cards config:

type: gauge
entity: sensor.temperatur
min: 0
max: 100
theme: th_gauge_3
severity:
  blue: 5
  green: 16
  yellow: 18
  red: 20

Current value is 23, so i would expect the gauge to be red, but it is blue.
Questions:

  • What’s wrong?
  • How many colors are supported?
  • Which colors names do I have to use?

The gauge card severity has only green, yellow and red.
Every value lower than defined will be blue.

BTW: Your links above show the same topic.

1 Like

Yep, pasted the wrong link. Changed it now. Thanks for clarifying the severity to have only three colors plus blue for all below. Which kind of meter card would you suggest to have more or even continuous colors like that? image

Hi,

I expected more colours could be customized and so have faced the same situation. Maybe these custom gauges could come in handy.

use segments instead of severity, see documentation. you can specifiy your own colors


Is it possible to change the color of the needle? Many thanx in advance

Macke…would ya mind to share this segment colors?
Thank you…

I was struggling on the same problem and generated gradient colors using the colorRampPalette in R. Here are the colors from red to yellow to red in 50 steps:
β€œ#00FF00” β€œ#0AFF00” β€œ#14FF00” β€œ#1FFF00” β€œ#29FF00” β€œ#34FF00” β€œ#3EFF00” β€œ#48FF00” β€œ#53FF00” β€œ#5DFF00” β€œ#68FF00” β€œ#72FF00” β€œ#7CFF00” β€œ#87FF00” β€œ#91FF00” β€œ#9CFF00” β€œ#A6FF00” β€œ#B0FF00” β€œ#BBFF00” β€œ#C5FF00” β€œ#D0FF00” β€œ#DAFF00” β€œ#E4FF00” β€œ#EFFF00” β€œ#F9FF00” β€œ#FFF900” β€œ#FFEF00” β€œ#FFE400” β€œ#FFDA00” β€œ#FFD000” β€œ#FFC500” β€œ#FFBB00” β€œ#FFB000” β€œ#FFA600” β€œ#FF9C00” β€œ#FF9100” β€œ#FF8700” β€œ#FF7C00” β€œ#FF7200” β€œ#FF6800” β€œ#FF5D00” β€œ#FF5300” β€œ#FF4800” β€œ#FF3E00” β€œ#FF3400” β€œ#FF2900” β€œ#FF1F00” β€œ#FF1400” β€œ#FF0A00” β€œ#FF0000”

And here is the R-Code to generate these colors and to plug them into the yaml code for color segments:

# Colors can be exchanged
colfunc <- colorRampPalette(c("#00FF00", "#FFFF00", "#FF0000"))
# Scale range can be changed
Scale.Values <- seq(1, 50)
Colors <- colfunc(length(Scale.Values))

Code <- paste0("  - from: ", Scale.Values[1],
               "\n    color: '", Colors[1],"'\n")
for(s in 2:length(Scale.Values)) {
  Code <- paste0(Code, "  - from: ", Scale.Values[s],
                 "\n    color: '", Colors[s],"'\n")
}
cat(Code)

Resulting in

  - from: 1
    color: '#00FF00'
  - from: 2
    color: '#0AFF00'
  - from: 3
    color: '#14FF00'
  - from: 4
    color: '#1FFF00'
  - from: 5
    color: '#29FF00'
  - from: 6
    color: '#34FF00'
  - from: 7
    color: '#3EFF00'
  - from: 8
    color: '#48FF00'
  - from: 9
    color: '#53FF00'
  - from: 10
    color: '#5DFF00'
  - from: 11
    color: '#68FF00'
  - from: 12
    color: '#72FF00'
  - from: 13
    color: '#7CFF00'
  - from: 14
    color: '#87FF00'
  - from: 15
    color: '#91FF00'
  - from: 16
    color: '#9CFF00'
  - from: 17
    color: '#A6FF00'
  - from: 18
    color: '#B0FF00'
  - from: 19
    color: '#BBFF00'
  - from: 20
    color: '#C5FF00'
  - from: 21
    color: '#D0FF00'
  - from: 22
    color: '#DAFF00'
  - from: 23
    color: '#E4FF00'
  - from: 24
    color: '#EFFF00'
  - from: 25
    color: '#F9FF00'
  - from: 26
    color: '#FFF900'
  - from: 27
    color: '#FFEF00'
  - from: 28
    color: '#FFE400'
  - from: 29
    color: '#FFDA00'
  - from: 30
    color: '#FFD000'
  - from: 31
    color: '#FFC500'
  - from: 32
    color: '#FFBB00'
  - from: 33
    color: '#FFB000'
  - from: 34
    color: '#FFA600'
  - from: 35
    color: '#FF9C00'
  - from: 36
    color: '#FF9100'
  - from: 37
    color: '#FF8700'
  - from: 38
    color: '#FF7C00'
  - from: 39
    color: '#FF7200'
  - from: 40
    color: '#FF6800'
  - from: 41
    color: '#FF5D00'
  - from: 42
    color: '#FF5300'
  - from: 43
    color: '#FF4800'
  - from: 44
    color: '#FF3E00'
  - from: 45
    color: '#FF3400'
  - from: 46
    color: '#FF2900'
  - from: 47
    color: '#FF1F00'
  - from: 48
    color: '#FF1400'
  - from: 49
    color: '#FF0A00'
  - from: 50
    color: '#FF0000'

That’s awesome Johannes!!!
Kuddo’s!!

Just wanted to say thanks! It looks much better this way, soon my weather dashboard looks like yours :slight_smile:

Did you find a solution how to change the needle color?

Suggest to ask in the main card-mod thread

        type: gauge
        entity: sensor.system_monitor_processor_use
        needle: true
        card_mod:
          style:
            ha-gauge $: |
              .needle {
                fill: red !important;
              }

image

1 Like