# Palette

<p class="description">Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Farbgebrauchsklassen. Unterstützt auch die Gestaltung von Links mit Hover-Status.</p>

## Farbe (Color)

{{"demo": "pages/system/palette/Color.js", "defaultCodeOpen": false}}

```jsx
<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="warning.main">…
<Box color="info.main">…
<Box color="success.main">…
<Box color="text.primary">…
<Box color="text.secondary">…
<Box color="text.disabled">…
```

## Hintergrundfarbe

{{"demo": "pages/system/palette/BackgroundColor.js", "defaultCodeOpen": false}}

```jsx
<Box bgcolor="primary.main">…
<Box bgcolor="secondary.main">…
<Box bgcolor="error.main">…
<Box bgcolor="warning.main">…
<Box bgcolor="info.main">…
<Box bgcolor="success.main">…
<Box bgcolor="text.primary">…
<Box bgcolor="text.secondary">…
<Box bgcolor="text.disabled">…
```

## API

```js
import { palette } from '@material-ui/system';
```

| Inportname | Eigenschaften | CSS-Eigenschaft   | Theme-Schlüssel                                                  |
|:---------- |:------------- |:----------------- |:---------------------------------------------------------------- |
| `color`    | `color`       | `color`           | [`palette`](/customization/default-theme/?expand-path=$.palette) |
| `bgcolor`  | `bgcolor`     | `backgroundColor` | [`palette`](/customization/default-theme/?expand-path=$.palette) |