Skip to content

Color stops

Color stops connect entity values or named states to colors. Define them once and use the same visual scale on horseshoes, shapes, entity tools, and graphs.

Numeric color stops

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
color_stops:
  colors:
    - value: 0
      color: "#42a5f5"
    - value: 20
      color: "#66bb6a"
    - value: 30
      color: "#f9a825"
    - value: 40
      color: "#d32f2f"

Each value starts a new color range.

State-based color stops

Use state for named values:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
color_stops:
  colors:
    - state: low
      color: "#66bb6a"
      rank: 0
    - state: moderate
      color: "#f9a825"
      rank: 1
    - state: high
      color: "#ed8003"
      rank: 2
    - state: very_high
      color: "#d32f2f"
      rank: 3

rank gives ordered visualizations, such as graded charts and string-state horseshoes, their level order.

Color a horseshoe

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
show:
  horseshoe_style: colorstop

color_stops:
  colors:
    - value: 0
      color: green
    - value: 70
      color: orange
    - value: 90
      color: red

Common horseshoe styles are:

Style Result
colorstop One color for the current value or state
colorstopsegments Separate solid color ranges
colorstopgradient Gradient that follows the configured stop values
lineargradient All configured colors distributed evenly
minmaxgradient Continuous minimum, zero, and maximum gradient

See Horseshoe scale and state.

Color a shape or entity tool

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
show:
  item_style: colorstopinterpolated

colorstopinterpolated:
  fill: true
  stroke: false

color_stops:
  colors:
    - value: 0
      color: green
    - value: 50
      color: orange
    - value: 100
      color: red
Item style Result
colorstop One matching color
colorstopsegments Separate solid ranges where the tool supports segments
colorstopinterpolated One blended color for the current numeric value

Use the matching style block to choose whether the color affects fill, stroke, or both.

Add a gap between segments

1
2
3
4
5
6
7
8
9
color_stops:
  gap: 2
  colors:
    - value: 0
      color: green
    - value: 50
      color: orange
    - value: 100
      color: red

The tool can override the shared gap when one visualization needs different spacing.

Light and dark colors

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
color_stops:
  colors:
    0: "#838383"
    1: "#fcc449"
    2: "#ed8003"
    3: "#e73f10"

  modes:
    dark:
      0: lightgray
      1: yellow
      2: "#ed8003"
      3: "#e73f10"

The mode-specific list is used when that Home Assistant theme mode is active. The main colors list is used for other modes.

Reuse color stops

Store a shared definition as a template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
fhs_user_templates:
  templates:
    temperature_colors:
      template:
        type: color_stops
      color_stops:
        colors:
          - value: 0
            color: "#42a5f5"
          - value: 20
            color: "#66bb6a"
          - value: 30
            color: "#f9a825"
          - value: 40
            color: "#d32f2f"

Use it wherever the same scale is needed:

1
2
3
color_stops:
  template:
    name: temperature_colors