# Palette

<p class="description">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>

## Color

{{"demo": "Color.js", "defaultCodeOpen": false}}

```jsx
<Box sx={{ color: 'primary.main' }}>…
<Box sx={{ color: 'secondary.main' }}>…
<Box sx={{ color: 'error.main' }}>…
<Box sx={{ color: 'warning.main' }}>…
<Box sx={{ color: 'info.main' }}>…
<Box sx={{ color: 'success.main' }}>…
<Box sx={{ color: 'text.primary' }}>…
<Box sx={{ color: 'text.secondary' }}>…
<Box sx={{ color: 'text.disabled' }}>…
```

## Background color

{{"demo": "BackgroundColor.js", "defaultCodeOpen": false}}

```jsx
<Box sx={{ bgcolor: 'primary.main' }}>…
<Box sx={{ bgcolor: 'secondary.main' }}>…
<Box sx={{ bgcolor: 'error.main' }}>…
<Box sx={{ bgcolor: 'warning.main' }}>…
<Box sx={{ bgcolor: 'info.main' }}>…
<Box sx={{ bgcolor: 'success.main' }}>…
<Box sx={{ bgcolor: 'text.primary' }}>…
<Box sx={{ bgcolor: 'text.secondary' }}>…
<Box sx={{ bgcolor: 'text.disabled' }}>…
```

## API

```js
import { palette } from '@mui/system';
```

| Import name | Prop      | CSS property      | Theme key                                                                    |
| :---------- | :-------- | :---------------- | :--------------------------------------------------------------------------- |
| `color`     | `color`   | `color`           | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `bgcolor`   | `bgcolor` | `backgroundColor` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |