Appearance¶

Appearance controls how a card looks after you have decided what information and controls the card should contain. It covers the shared visual choices that can be used by many different tools, rather than the behavior of one specific tool.

This section shows how to style items, change colors from values or states, reuse palettes, and transform existing colors with filters.

Change the normal appearance¶

Use Styling for fixed colors, fills, borders, text size, opacity, and Home Assistant theme variables.

Change color with a value or state¶

Use Color stops when the color should follow a numeric value or named state.

Reuse the same colors on several cards¶

Use Palettes when several cards should use one shared external color set, including light and dark variants.

Transform existing colors¶

Use Color filters to make existing colors lighter, darker, less saturated, monochrome, grayscale, or otherwise adjusted without redefining every color.

Use these options on a tool¶

Each tool page shows the short example that belongs to that tool. For example, the Rectangle page shows how to color a Rectangle from an entity value, while this section explains the shared color system once.