Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Primary Colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
Name
Primary
Hex
#e91e63
Name
Secondary
Hex
#7b809a
Name
Info
Hex
#1A73E8
Name
Success
Hex
#4CAF50
Name
Warning
Hex
#fb8c00
Name
Error
Hex
#f44335
Name
Light
Hex
#f0f2f5
Name
Dark
Hex
#344767
Gradient Colors
Our gradient palette is a mixed of two colors for creating beautiful gradient colors.
Name
Primary
Hex
#EC407A | #D81B60
Name
Secondary
Hex
#747b8a | #495361
Name
Info
Hex
#49a3f1 | #1A73E8
Name
Success
Hex
#66BB6A | #43A047
Name
Warning
Hex
#FFA726 | #FB8C00
Name
Error
Hex
#EF5350 | #E53935
Name
Light
Hex
#EBEFF4 | #CED4DA
Name
Dark
Hex
#42424a | #191919
Light Neutrals
Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.
| 100 | Hex #f8f9fa |
| 200 | Hex #f0f2f5 |
| 300 | Hex #dee2e6 |
| 400 | Hex #ced4da |
| 500 | Hex #adb5bd |
| 600 | Hex #6c757d |
| 700 | Hex #495057 |
| 800 | Hex #343a40 |
| 900 | Hex #212529 |
Material Dashboard 2 React contains different sets of colors and you can customize them using the following file: src/asssets/theme/base/colors.js