Colour bands

A colour band says “from this value up, use this colour”. Bands are set in the editor’s Colours section, and every style uses them the same way — a bar’s fill, a ring’s arc, a needle gauge’s scale.

severity:
  - from: 0
    color: red
    label: Low
  - from: 20
    color: amber
  - from: 50
    color: green

from is the lower bound of the band, in the entity’s own units. A value takes the colour of the last band whose from is at or below it; a value below the first band takes the first band’s colour. Bands can be set on the card, or on a single entity to override the card’s.

When you set nothing

With no bands, everything is drawn in one colour, your theme’s primary colour. There is no traffic-light colouring unless you ask for it.

Presets

Some sensors are good when high (battery, signal) and some when low (disk use, CO₂). Rather than flipping anything, pick the preset that matches, then adjust the numbers. The Preset drop-down in the Colours section offers four:

Preset	Bands
Battery (low is bad)	0 red “Low”, 20 amber, 50 green
Usage (high is bad)	0 green, 60 amber, 85 red “High”
Temperature	−50 blue “Cold”, 16 green, 24 amber, 28 red “Hot”
None	No bands: one colour, the theme’s primary

Changing a band by hand switches the preset to Custom.

Colours

A band’s color can be a palette name, any CSS colour, or a theme variable.

Name	Theme variable it follows	Used if the theme has none
`primary`	`--primary-color`	`#2f6fe4`
`green`	`--success-color`	`#1fae7a`
`amber`	`--warning-color`	`#f59e0b`
`red`	`--error-color`	`#ef3b5a`
`blue`	`--info-color`	`#2f6fe4`
`purple`	`--purple-color`	`#8b6cff`
`grey`	`--grey-color`	`#8e919a`

Because the names follow your theme’s variables, the colours change with the theme and with light and dark mode. Where the theme does not define a variable, the colour in the last column is used.

Custom colours

Anything else is used as written. In the editor, choose Custom… in a band’s colour drop-down and type into the CSS colour field.

severity:
  - from: 0
    color: '#7b1fa2'
  - from: 50
    color: rgb(0, 150, 136)
  - from: 80
    color: var(--accent-color)

Thresholds from an entity (v1.1.0+)

A band’s from can be another entity, the same way min, max and target can, so a threshold can live in an input number or be set by an automation. The colours and the legend follow it as it changes.

severity:
  - from: 0
    color: red
  - from: input_number.battery_warning
    color: amber
  - from: 70
    color: green

In the editor, press a band’s link button (Start from an entity) and pick the entity; the From box then shows its current value, greyed out. If the entity is unavailable or not a number, that band is left out until it has a value again.

Icons that follow the band (v1.1.0+)

Give a band an icon to swap the icon while the value is in it, and turn on Colour icons to match their band (color_icon: true) to colour the icon with the band’s colour.

color_icon: true
severity:
  - from: 0
    color: red
    icon: mdi:battery-alert-variant-outline
  - from: 20
    color: amber
  - from: 50
    color: green
    icon: mdi:battery

The legend

Turn on Show legend (show.legend: true) to list the bands under the card. Each band is shown by its label if it has one, and otherwise by its range, generated from the bands: “0–20 %”, “20–50 %”, “50 %+”. The legend uses the card’s own bands and the first entity’s unit and decimals.

show:
  legend: true
severity:
  - from: 0
    color: red
    label: Low
  - from: 20
    color: amber
  - from: 50
    color: green

This reads “Low”, “20–50 %” and “50 %+” in the legend above, in red, amber and green.

See also Options for the full list of keys.