> Markdown version of [Color](https://vaadin.com/docs/v24/styling/legacy/material-theme/color). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Material Color (deprecated since V24.7)

See the "Material Design" documentation for [the color system](https://material.io/design/color/the-color-system.html) to learn more about creating and applying a consistent color theme.

## <a id="palette"></a>Palette

The "Material" theme defines the following colors:

### <a id="general"></a>General

| Description              | CSS Custom Property                   |
| ------------------------ | ------------------------------------- |
| **Main Background**      | --material-background-color           |
| **Secondary Background** | --material-secondary-background-color |
| **Divider**              | --material-divider-color              |
| **Disabled**             | --material-disabled-color             |

### <a id="text"></a>Text

| Description        | CSS Custom Property             |
| ------------------ | ------------------------------- |
| **Body Text**      | --material-body-text-color      |
| **Secondary Text** | --material-secondary-text-color |
| **Disabled Text**  | --material-disabled-text-color  |

### <a id="primary"></a>Primary

| Description          | CSS Custom Property               |
| -------------------- | --------------------------------- |
| **Primary**          | --material-primary-color          |
| **Primary Text**     | --material-primary-text-color     |
| **Primary Contrast** | --material-primary-contrast-color |

### <a id="error"></a>Error

| Description    | CSS Custom Property         |
| -------------- | --------------------------- |
| **Error**      | --material-error-color      |
| **Error Text** | --material-error-text-color |

`9C39A3FF-1E62-46A9-BA3B-C90C932A273F`