Content Color
BasMaterial UI logo

© BasMaterial UI - v0.2.8

Notifications
View All

Color

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.

Normal

To apply a background color, add the color name grey-900. To apply a text color, add the color name light-green-text-700

Sample color usage 

<div class="bas-ui-card grey-900 light-green-text-700">
    <div class="bas-ui-card-supporting-text">
        Sample color usage
    </div>
</div>

Hover

To apply a hover for background color and text color, add -hover after the name color.

Sample hover color usage 

<div class="bas-ui-card grey-900-hover light-green-text-700-hover">
    <div class="bas-ui-card-supporting-text">
        Sample hover color usage
    </div>
</div>

Sass

You can apply the color simply by extending the classes like the example below


.custom-container {
    @extend .grey-900;
}

Material Palette (Background)

red-50 #FFEBEE
red-100 #FFCDD2
red-200 #EF9A9A
red-300 #E57373
red-400 #EF5350
red-500 #F44336
red-600 #E53935
red-700 #D32F2F
red-800 #C62828
red-900 #B71C1C
red-A100 #FF8A80
red-A200 #FF5252
red-A400 #FF1744
red-A700 #D50000
pink-50 #fce4ec
pink-100 #f8bbd0
pink-200 #f48fb1
pink-300 #f06292
pink-400 #ec407a
pink-500 #e91e63
pink-600 #d81b60
pink-700 #c2185b
pink-800 #ad1457
pink-900 #880e4f
pink-A100 #ff80ab
pink-A200 #ff4081
pink-A400 #f50057
pink-A700 #c51162
purple-50 #f3e5f5
purple-100 #e1bee7
purple-200 #ce93d8
purple-300 #ba68c8
purple-400 #ab47bc
purple-500 #9c27b0
purple-600 #8e24aa
purple-700 #7b1fa2
purple-800 #6a1b9a
purple-900 #4a148c
purple-A100 #ea80fc
purple-A200 #e040fb
purple-A400 #d500f9
purple-A700 #aa00ff
deep-purple-50 #ede7f6
deep-purple-100 #d1c4e9
deep-purple-200 #b39ddb
deep-purple-300 #9575cd
deep-purple-400 #7e57c2
deep-purple-500 #673ab7
deep-purple-600 #5e35b1
deep-purple-700 #512da8
deep-purple-800 #4527a0
deep-purple-900 #311b92
deep-purple-A100 #b388ff
deep-purple-A200 #7c4dff
deep-purple-A400 #651fff
deep-purple-A700 #6200ea
indigo-50 #e8eaf6
indigo-100 #c5cae9
indigo-200 #9fa8da
indigo-300 #7986cb
indigo-400 #5c6bc0
indigo-500 #3f51b5
indigo-600 #3949ab
indigo-700 #303f9f
indigo-800 #283593
indigo-900 #1a237e
indigo-A100 #8c9eff
indigo-A200 #536dfe
indigo-A400 #3d5afe
indigo-A700 #304ffe
blue-50 #E3F2FD
blue-100 #BBDEFB
blue-200 #90CAF9
blue-300 #64B5F6
blue-400 #42A5F5
blue-500 #2196F3
blue-600 #1E88E5
blue-700 #1976D2
blue-800 #1565C0
blue-900 #0D47A1
blue-A100 #82B1FF
blue-A200 #448AFF
blue-A400 #2979FF
blue-A700 #2962FF
light-blue-50 #e1f5fe
light-blue-100 #b3e5fc
light-blue-200 #81d4fa
light-blue-300 #4fc3f7
light-blue-400 #29b6f6
light-blue-500 #03a9f4
light-blue-600 #039be5
light-blue-700 #0288d1
light-blue-800 #0277bd
light-blue-900 #01579b
light-blue-A100 #80d8ff
light-blue-A200 #40c4ff
light-blue-A400 #00b0ff
light-blue-A700 #0091ea
cyan-50 #e0f7fa
cyan-100 #b2ebf2
cyan-200 #80deea
cyan-300 #4dd0e1
cyan-400 #26c6da
cyan-500 #00bcd4
cyan-600 #00acc1
cyan-700 #0097a7
cyan-800 #00838f
cyan-900 #006064
cyan-A100 #84ffff
cyan-A200 #18ffff
cyan-A400 #00e5ff
cyan-A700 #00b8d4
teal-50 #e0f2f1
teal-100 #b2dfdb
teal-200 #80cbc4
teal-300 #4db6ac
teal-400 #26a69a
teal-500 #009688
teal-600 #00897b
teal-700 #00796b
teal-800 #00695c
teal-900 #004d40
teal-A100 #a7ffeb
teal-A200 #64ffda
teal-A400 #1de9b6
teal-A700 #00bfa5
green-50 #E8F5E9
green-100 #C8E6C9
green-200 #A5D6A7
green-300 #81C784
green-400 #66BB6A
green-500 #4CAF50
green-600 #43A047
green-700 #388E3C
green-800 #2E7D32
green-900 #1B5E20
green-A100 #B9F6CA
green-A200 #69F0AE
green-A400 #00E676
green-A700 #00C853
light-green-50 #f1f8e9
light-green-100 #dcedc8
light-green-200 #c5e1a5
light-green-300 #aed581
light-green-400 #9ccc65
light-green-500 #8bc34a
light-green-600 #7cb342
light-green-700 #689f38
light-green-800 #558b2f
light-green-900 #33691e
light-green-A100 #ccff90
light-green-A200 #b2ff59
light-green-A400 #76ff03
light-green-A700 #64dd17
lime-50 #f9fbe7
lime-100 #f0f4c3
lime-200 #e6ee9c
lime-300 #dce775
lime-400 #d4e157
lime-500 #cddc39
lime-600 #c0ca33
lime-700 #afb42b
lime-800 #9e9d24
lime-900 #827717
lime-A100 #f4ff81
lime-A200 #eeff41
lime-A400 #c6ff00
lime-A700 #aeea00
yellow-50 #fffde7
yellow-100 #fff9c4
yellow-200 #fff59d
yellow-300 #fff176
yellow-400 #ffee58
yellow-500 #ffeb3b
yellow-600 #fdd835
yellow-700 #fbc02d
yellow-800 #f9a825
yellow-900 #f57f17
yellow-A100 #ffff8d
yellow-A200 #ffff00
yellow-A400 #ffea00
yellow-A700 #ffd600
amber-50 #fff8e1
amber-100 #ffecb3
amber-200 #ffe082
amber-300 #ffd54f
amber-400 #ffca28
amber-500 #ffc107
amber-600 #ffb300
amber-700 #ffa000
amber-800 #ff8f00
amber-900 #ff6f00
amber-A100 #ffe57f
amber-A200 #ffd740
amber-A400 #ffc400
amber-A700 #ffab00
orange-50 #fff3e0
orange-100 #ffe0b2
orange-200 #ffcc80
orange-300 #ffb74d
orange-400 #ffa726
orange-500 #ff9800
orange-600 #fb8c00
orange-700 #f57c00
orange-800 #ef6c00
orange-900 #e65100
orange-A100 #ffd180
orange-A200 #ffab40
orange-A400 #ff9100
orange-A700 #ff6d00
deep-orange-50 #fbe9e7
deep-orange-100 #ffccbc
deep-orange-200 #ffab91
deep-orange-300 #ff8a65
deep-orange-400 #ff7043
deep-orange-500 #ff5722
deep-orange-600 #f4511e
deep-orange-700 #e64a19
deep-orange-800 #d84315
deep-orange-900 #bf360c
deep-orange-A100 #ff9e80
deep-orange-A200 #ff6e40
deep-orange-A400 #ff3d00
deep-orange-A700 #dd2c00
brown-50 #efebe9
brown-100 #d7ccc8
brown-200 #bcaaa4
brown-300 #a1887f
brown-400 #8d6e63
brown-500 #795548
brown-600 #6d4c41
brown-700 #5d4037
brown-800 #4e342e
brown-900 #3e2723
blue-grey-50 #eceff1
blue-grey-100 #cfd8dc
blue-grey-200 #b0bec5
blue-grey-300 #90a4ae
blue-grey-400 #78909c
blue-grey-500 #607d8b
blue-grey-600 #546e7a
blue-grey-700 #455a64
blue-grey-800 #37474f
blue-grey-900 #263238
grey-50 #fafafa
grey-100 #f5f5f5
grey-200 #eeeeee
grey-300 #e0e0e0
grey-400 #bdbdbd
grey-500 #9e9e9e
grey-600 #757575
grey-700 #616161
grey-800 #424242
grey-900 #212121
shades-black #000000
shades-white #FFFFFF
shades-transparent transparent

Material Palette (Text)

red-text-50 #FFEBEE
red-text-100 #FFCDD2
red-text-200 #EF9A9A
red-text-300 #E57373
red-text-400 #EF5350
red-text-500 #F44336
red-text-600 #E53935
red-text-700 #D32F2F
red-text-800 #C62828
red-text-900 #B71C1C
red-text-A100 #FF8A80
red-text-A200 #FF5252
red-text-A400 #FF1744
red-text-A700 #D50000
pink-text-50 #fce4ec
pink-text-100 #f8bbd0
pink-text-200 #f48fb1
pink-text-300 #f06292
pink-text-400 #ec407a
pink-text-500 #e91e63
pink-text-600 #d81b60
pink-text-700 #c2185b
pink-text-800 #ad1457
pink-text-900 #880e4f
pink-text-A100 #ff80ab
pink-text-A200 #ff4081
pink-text-A400 #f50057
pink-text-A700 #c51162
purple-text-50 #f3e5f5
purple-text-100 #e1bee7
purple-text-200 #ce93d8
purple-text-300 #ba68c8
purple-text-400 #ab47bc
purple-text-500 #9c27b0
purple-text-600 #8e24aa
purple-text-700 #7b1fa2
purple-text-800 #6a1b9a
purple-text-900 #4a148c
purple-text-A100 #ea80fc
purple-text-A200 #e040fb
purple-text-A400 #d500f9
purple-text-A700 #aa00ff
deep-purple-text-50 #ede7f6
deep-purple-text-100 #d1c4e9
deep-purple-text-200 #b39ddb
deep-purple-text-300 #9575cd
deep-purple-text-400 #7e57c2
deep-purple-text-500 #673ab7
deep-purple-text-600 #5e35b1
deep-purple-text-700 #512da8
deep-purple-text-800 #4527a0
deep-purple-text-900 #311b92
deep-purple-text-A100 #b388ff
deep-purple-text-A200 #7c4dff
deep-purple-text-A400 #651fff
deep-purple-text-A700 #6200ea
indigo-text-50 #e8eaf6
indigo-text-100 #c5cae9
indigo-text-200 #9fa8da
indigo-text-300 #7986cb
indigo-text-400 #5c6bc0
indigo-text-500 #3f51b5
indigo-text-600 #3949ab
indigo-text-700 #303f9f
indigo-text-800 #283593
indigo-text-900 #1a237e
indigo-text-A100 #8c9eff
indigo-text-A200 #536dfe
indigo-text-A400 #3d5afe
indigo-text-A700 #304ffe
blue-text-50 #E3F2FD
blue-text-100 #BBDEFB
blue-text-200 #90CAF9
blue-text-300 #64B5F6
blue-text-400 #42A5F5
blue-text-500 #2196F3
blue-text-600 #1E88E5
blue-text-700 #1976D2
blue-text-800 #1565C0
blue-text-900 #0D47A1
blue-text-A100 #82B1FF
blue-text-A200 #448AFF
blue-text-A400 #2979FF
blue-text-A700 #2962FF
light-blue-text-50 #e1f5fe
light-blue-text-100 #b3e5fc
light-blue-text-200 #81d4fa
light-blue-text-300 #4fc3f7
light-blue-text-400 #29b6f6
light-blue-text-500 #03a9f4
light-blue-text-600 #039be5
light-blue-text-700 #0288d1
light-blue-text-800 #0277bd
light-blue-text-900 #01579b
light-blue-text-A100 #80d8ff
light-blue-text-A200 #40c4ff
light-blue-text-A400 #00b0ff
light-blue-text-A700 #0091ea
cyan-text-50 #e0f7fa
cyan-text-100 #b2ebf2
cyan-text-200 #80deea
cyan-text-300 #4dd0e1
cyan-text-400 #26c6da
cyan-text-500 #00bcd4
cyan-text-600 #00acc1
cyan-text-700 #0097a7
cyan-text-800 #00838f
cyan-text-900 #006064
cyan-text-A100 #84ffff
cyan-text-A200 #18ffff
cyan-text-A400 #00e5ff
cyan-text-A700 #00b8d4
teal-text-50 #e0f2f1
teal-text-100 #b2dfdb
teal-text-200 #80cbc4
teal-text-300 #4db6ac
teal-text-400 #26a69a
teal-text-500 #009688
teal-text-600 #00897b
teal-text-700 #00796b
teal-text-800 #00695c
teal-text-900 #004d40
teal-text-A100 #a7ffeb
teal-text-A200 #64ffda
teal-text-A400 #1de9b6
teal-text-A700 #00bfa5
green-text-50 #E8F5E9
green-text-100 #C8E6C9
green-text-200 #A5D6A7
green-text-300 #81C784
green-text-400 #66BB6A
green-text-500 #4CAF50
green-text-600 #43A047
green-text-700 #388E3C
green-text-800 #2E7D32
green-text-900 #1B5E20
green-text-A100 #B9F6CA
green-text-A200 #69F0AE
green-text-A400 #00E676
green-text-A700 #00C853
light-green-text-50 #f1f8e9
light-green-text-100 #dcedc8
light-green-text-200 #c5e1a5
light-green-text-300 #aed581
light-green-text-400 #9ccc65
light-green-text-500 #8bc34a
light-green-text-600 #7cb342
light-green-text-700 #689f38
light-green-text-800 #558b2f
light-green-text-900 #33691e
light-green-text-A100 #ccff90
light-green-text-A200 #b2ff59
light-green-text-A400 #76ff03
light-green-text-A700 #64dd17
lime-text-50 #f9fbe7
lime-text-100 #f0f4c3
lime-text-200 #e6ee9c
lime-text-300 #dce775
lime-text-400 #d4e157
lime-text-500 #cddc39
lime-text-600 #c0ca33
lime-text-700 #afb42b
lime-text-800 #9e9d24
lime-text-900 #827717
lime-text-A100 #f4ff81
lime-text-A200 #eeff41
lime-text-A400 #c6ff00
lime-text-A700 #aeea00
yellow-text-50 #fffde7
yellow-text-100 #fff9c4
yellow-text-200 #fff59d
yellow-text-300 #fff176
yellow-text-400 #ffee58
yellow-text-500 #ffeb3b
yellow-text-600 #fdd835
yellow-text-700 #fbc02d
yellow-text-800 #f9a825
yellow-text-900 #f57f17
yellow-text-A100 #ffff8d
yellow-text-A200 #ffff00
yellow-text-A400 #ffea00
yellow-text-A700 #ffd600
amber-text-50 #fff8e1
amber-text-100 #ffecb3
amber-text-200 #ffe082
amber-text-300 #ffd54f
amber-text-400 #ffca28
amber-text-500 #ffc107
amber-text-600 #ffb300
amber-text-700 #ffa000
amber-text-800 #ff8f00
amber-text-900 #ff6f00
amber-text-A100 #ffe57f
amber-text-A200 #ffd740
amber-text-A400 #ffc400
amber-text-A700 #ffab00
orange-text-50 #fff3e0
orange-text-100 #ffe0b2
orange-text-200 #ffcc80
orange-text-300 #ffb74d
orange-text-400 #ffa726
orange-text-500 #ff9800
orange-text-600 #fb8c00
orange-text-700 #f57c00
orange-text-800 #ef6c00
orange-text-900 #e65100
orange-text-A100 #ffd180
orange-text-A200 #ffab40
orange-text-A400 #ff9100
orange-text-A700 #ff6d00
deep-orange-text-50 #fbe9e7
deep-orange-text-100 #ffccbc
deep-orange-text-200 #ffab91
deep-orange-text-300 #ff8a65
deep-orange-text-400 #ff7043
deep-orange-text-500 #ff5722
deep-orange-text-600 #f4511e
deep-orange-text-700 #e64a19
deep-orange-text-800 #d84315
deep-orange-text-900 #bf360c
deep-orange-text-A100 #ff9e80
deep-orange-text-A200 #ff6e40
deep-orange-text-A400 #ff3d00
deep-orange-text-A700 #dd2c00
brown-text-50 #efebe9
brown-text-100 #d7ccc8
brown-text-200 #bcaaa4
brown-text-300 #a1887f
brown-text-400 #8d6e63
brown-text-500 #795548
brown-text-600 #6d4c41
brown-text-700 #5d4037
brown-text-800 #4e342e
brown-text-900 #3e2723
blue-grey-text-50 #eceff1
blue-grey-text-100 #cfd8dc
blue-grey-text-200 #b0bec5
blue-grey-text-300 #90a4ae
blue-grey-text-400 #78909c
blue-grey-text-500 #607d8b
blue-grey-text-600 #546e7a
blue-grey-text-700 #455a64
blue-grey-text-800 #37474f
blue-grey-text-900 #263238
grey-text-50 #fafafa
grey-text-100 #f5f5f5
grey-text-200 #eeeeee
grey-text-300 #e0e0e0
grey-text-400 #bdbdbd
grey-text-500 #9e9e9e
grey-text-600 #757575
grey-text-700 #616161
grey-text-800 #424242
grey-text-900 #212121
shades-text-black #000000
shades-text-white #FFFFFF
shades-text-transparent transparent