Material-UI Colors
Use Material-ui colours utility classes to apply colour to the background of elements, text, and borders. Includes support for styling links with hover states, too.
Note
Since we’ve used JSS like our friends from Material-UI, to make it a bit more easier for you to customize our template, we’ve added all of our colors inside:
-
src/assets/theme/colors.js
-
src/assets/theme/theme.js
(inside thepalette
object of thecreateMuiTheme
function) -
src/assets/theme/box-shadow.js
(for shadows and their colors) -
src/assets/theme/hex-to-rgb.js
(we’ve made all of our colors in hex format, but some of our components needed colors with opacity on them, so we use this function to transform a color from the hex format to the rgb format) -
PRO
src/assets/scss/custom/_variables.scss
you will also find some variables here, these are for the plugins used in the PRO template
Primary colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
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.
Gray 100 |
Hex
#f6f9fc
|
Gray 200 |
Hex
#e9ecef
|
Gray 300 |
Hex
#dee2e6
|
Gray 400 |
Hex
#ced4da
|
Gray 500 |
Hex
#adb5bd
|
Gray 600 |
Hex
#8898aa
|
Gray 700 |
Hex
#525f7f
|
Gray 800 |
Hex
#32325d
|
Gray 900 |
Hex
#212529
|