hajo62
April 16, 2019, 3:00pm
1
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 .
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.
Whatβs wrong?
How many colors are supported?
Which colors names do I have to use?
VDRainer
April 16, 2019, 3:55pm
2
The gauge card severity has only green, yellow and red.
BTW: Your links above show the same topic.
1 Like
hajo62
April 16, 2019, 4:06pm
4
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?
mixpc
July 3, 2020, 5:22pm
5
Hi,
I expected more colours could be customized and so have faced the same situation. Maybe these custom gauges could come in handy.
magiva
October 7, 2022, 7:36am
6
use segments instead of severity, see documentation. you can specifiy your own colors
Macke
March 3, 2023, 6:13pm
7
Is it possible to change the color of the needle? Many thanx in advance
Tadies
April 16, 2023, 12:37pm
8
Mackeβ¦would ya mind to share this segment colors?
Varimax
April 20, 2023, 9:30am
9
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'
Tadies
April 21, 2023, 9:26am
10
Thatβs awesome Johannes!!!
jeleniain
September 8, 2023, 11:48am
11
Just wanted to say thanks! It looks much better this way, soon my weather dashboard looks like yours
scw2wi
December 5, 2024, 8:26am
12
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;
}
1 Like
coraxt
June 9, 2025, 2:33pm
14
Hi
I have try your code and it dosenΒ΄t work for me.
Thanks
type: horizontal-stack
cards:
- type: gauge
entity: sensor.solar_1
max: 800
needle: true
segments:
- from: 0
color: "#4D8DF7"
- from: 22.22
color: "#5097E3"
- from: 44.44
color: "#54A2CF"
- from: 66.67
color: "#58ADBC"
- from: 88.89
color: "#5CB8A8"
- from: 111.11
color: "#5FC295"
- from: 133.33
color: "#63CD81"
- from: 155.56
color: "#67D86E"
- from: 177.78
color: "#6BE35A"
- from: 200
color: "#6FEE47"
- from: 206.9
color: "#73ED45"
- from: 213.79
color: "#78ED43"
- from: 220.69
color: "#7CED41"
- from: 227.59
color: "#81ED3F"
- from: 234.48
color: "#85ED3D"
- from: 241.38
color: "#8AED3B"
- from: 248.28
color: "#8FED39"
- from: 255.17
color: "#93ED37"
- from: 262.07
color: "#98ED35"
- from: 268.97
color: "#9CED34"
- from: 275.86
color: "#A1ED32"
- from: 282.76
color: "#A6ED30"
- from: 289.66
color: "#AAED2E"
- from: 296.55
color: "#AFED2C"
- from: 303.45
color: "#B3EC2A"
- from: 310.34
color: "#B8EC28"
- from: 317.24
color: "#BCEC26"
- from: 324.14
color: "#C1EC24"
- from: 331.03
color: "#C6EC22"
- from: 337.93
color: "#CAEC21"
- from: 344.83
color: "#CFEC1F"
- from: 351.72
color: "#D3EC1D"
- from: 358.62
color: "#D8EC1B"
- from: 365.52
color: "#DDEC19"
- from: 372.41
color: "#E1EC17"
- from: 379.31
color: "#E6EC15"
- from: 386.21
color: "#EAEC13"
- from: 393.1
color: "#EFEC11"
- from: 400
color: "#F4EC10"
- from: 408.97
color: "#F3E711"
- from: 417.95
color: "#F3E312"
- from: 426.92
color: "#F3DE13"
- from: 435.9
color: "#F2DA14"
- from: 444.87
color: "#F2D615"
- from: 453.85
color: "#F2D116"
- from: 462.82
color: "#F2CD17"
- from: 471.79
color: "#F1C918"
- from: 480.77
color: "#F1C419"
- from: 489.74
color: "#F1C01A"
- from: 498.72
color: "#F1BC1B"
- from: 507.69
color: "#F0B71C"
- from: 516.67
color: "#F0B31D"
- from: 525.64
color: "#F0AE1E"
- from: 534.62
color: "#F0AA1F"
- from: 543.59
color: "#EFA620"
- from: 552.56
color: "#EFA121"
- from: 561.54
color: "#EF9D22"
- from: 570.51
color: "#EF9923"
- from: 579.49
color: "#EE9424"
- from: 588.46
color: "#EE9025"
- from: 597.44
color: "#EE8C26"
- from: 606.41
color: "#EE8727"
- from: 615.38
color: "#ED8328"
- from: 624.36
color: "#ED7F29"
- from: 633.33
color: "#ED7A2A"
- from: 642.31
color: "#ED762B"
- from: 651.28
color: "#EC712C"
- from: 660.26
color: "#EC6D2D"
- from: 669.23
color: "#EC692E"
- from: 678.21
color: "#EC642F"
- from: 687.18
color: "#EB6030"
- from: 696.15
color: "#EB5C31"
- from: 705.13
color: "#EB5732"
- from: 714.1
color: "#EB5333"
- from: 723.08
color: "#EA4F34"
- from: 732.05
color: "#EA4A35"
- from: 741.03
color: "#EA4636"
- from: 750
color: "#EA4237"
name: Balkonsolar
tap_action:
action: none
hold_action:
action: navigate
navigation_path: /energy
card_mod:
style:
.: |
ha-card {
background: transparent;
border: none;
}
ha-gauge $: |
.needle {
fill: red !important;
}
- type: entities
entities:
- entity: sensor.deye_wechselrichter_1_daily_production
name: TΓ€glich
- entity: sensor.deye_wechselrichter_1_total_production
name: Gesamt
- entity: sensor.deye_wechselrichter_1_on_off_enable
name: Status
state_color: false
card_mod:
style: |
ha-card {
background: transparent;
border: none;
}
1 Like
As @Ildar_Gabdullin pointed out the ha-gauge $: | has to align with .: |
1 Like
