🎉 Material UI v4 is out now! Check out the announcement blog post →
Palette
Edit this page

Palette

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color 

<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="text.primary">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.hint">…
primary.main
secondary.main
error.main
text.primary
text.secondary
text.disabled
text.hint

Background color 

<Box bgcolor="primary.main">…
<Box bgcolor="secondary.main">…
<Box bgcolor="error.main">…
<Box bgcolor="text.primary">…
<Box bgcolor="text.secondary">…
<Box bgcolor="text.disabled">…
<Box bgcolor="text.hint">…
primary.main
secondary.main
error.main
text.primary
text.secondary
text.disabled
text.hint

API 

import { palette } from '@material-ui/system';
Import name Prop CSS property Theme key
color color color palette
bgcolor bgcolor backgroundColor palette