Color usage

All of the below colors are used in the same way. Both SCSS variables and css classes and color codes are named.

You can easily change the colors you use. In the settings you can remove all colors you don't use NOTE* that you need to recompile with SCSS. In SCSS the variables for each color will remain accessible. Therefore it's recommended to remove each color when using SCSS unless you need to use a class in HTML.

Theme

With SMaterial and SCSS you're also able to choose between a light and dark theme. You can define the theme in the _settings.scss file or by overwriting the $theme variable. The variable can either be light or dark.

		
$theme: light;
$theme: dark;
		

Red

$red
#F44336
.red-text
.red
$red-50
#FFEBEE
.red-50-text
.red-50
$red-100
#FFCDD2
.red-100-text
.red-100
$red-200
#EF9A9A
.red-200-text
.red-200
$red-300
#E57373
.red-300-text
.red-300
$red-400
#EF5350
.red-400-text
.red-400
$red-500
#F44336
.red-500-text
.red-500
$red-600
#E53935
.red-600-text
.red-600
$red-700
#D32F2F
.red-700-text
.red-700
$red-800
#C62828
.red-800-text
.red-800
$red-900
#B71C1C
.red-900-text
.red-900
$red-a100
#FF8A80
.red-a100-text
.red-a100
$red-a200
#FF8A80
.red-a200-text
.red-a200
$red-a400
#FF1744
.red-a400-text
.red-a400
$red-a700
#D50000
.red-a700-text
.red-a700

Pink

$pink
#E91E63
.pink-text
.pink
$pink-50
#FCE4EC
.pink-50-text
.pink-50
$pink-100
#F8BBD0
.pink-100-text
.pink-100
$pink-200
#F48FB1
.pink-200-text
.pink-200
$pink-300
#F06292
.pink-300-text
.pink-300
$pink-400
#EC407A
.pink-400-text
.pink-400
$pink-500
#E91E63
.pink-500-text
.pink-500
$pink-600
#D81B60
.pink-600-text
.pink-600
$pink-700
#C2185B
.pink-700-text
.pink-700
$pink-800
#AD1457
.pink-800-text
.pink-800
$pink-900
#880E4F
.pink-900-text
.pink-900
$pink-a100
#FF80AB
.pink-a100-text
.pink-a100
$pink-a200
#FF4081
.pink-a200-text
.pink-a200
$pink-a400
#F50057
.pink-a400-text
.pink-a400
$pink-a700
#C51162
.pink-a700-text
.pink-a700

Purple

$purple
#9C27B0
.purple-text
.purple
$purple-50
#F3E5F5
.purple-50-text
.purple-50
$purple-100
#E1BEE7
.purple-100-text
.purple-100
$purple-200
#CE93D8
.purple-200-text
.purple-200
$purple-300
#BA68C8
.purple-300-text
.purple-300
$purple-400
#AB47BC
.purple-400-text
.purple-400
$purple-500
#9C27B0
.purple-500-text
.purple-500
$purple-600
#8E24AA
.purple-600-text
.purple-600
$purple-700
#7B1FA2
.purple-700-text
.purple-700
$purple-800
#6A1B9A
.purple-800-text
.purple-800
$purple-900
#4A148C
.purple-900-text
.purple-900
$purple-a100
#EA80FC
.purple-a100-text
.purple-a100
$purple-a200
#E040FB
.purple-a200-text
.purple-a200
$purple-a400
#D500F9
.purple-a400-text
.purple-a400
$purple-a700
#AA00FF
.purple-a700-text
.purple-a700

Deep purple

$deep-purple
#673AB7
.deep-purple-text
.deep-purple
$deep-purple-50
#EDE7F6
.deep-purple-50-text
.deep-purple-50
$deep-purple-100
#D1C4E9
.deep-purple-100-text
.deep-purple-100
$deep-purple-200
#B39DDB
.deep-purple-200-text
.deep-purple-200
$deep-purple-300
#9575CD
.deep-purple-300-text
.deep-purple-300
$deep-purple-400
#7E57C2
.deep-purple-400-text
.deep-purple-400
$deep-purple-500
#673AB7
.deep-purple-500-text
.deep-purple-500
$deep-purple-600
#5E35B1
.deep-purple-600-text
.deep-purple-600
$deep-purple-700
#512DA8
.deep-purple-700-text
.deep-purple-700
$deep-purple-800
#4527A0
.deep-purple-800-text
.deep-purple-800
$deep-purple-900
#311B92
.deep-purple-900-text
.deep-purple-900
$deep-purple-a100
#B388FF
.deep-purple-a100-text
.deep-purple-a100
$deep-purple-a200
#7C4DFF
.deep-purple-a200-text
.deep-purple-a200
$deep-purple-a400
#651FFF
.deep-purple-a400-text
.deep-purple-a400
$deep-purple-a700
#6200EA
.deep-purple-a700-text
.deep-purple-a700

Indigo

$indigo
#3F51B5
.indigo-text
.indigo
$indigo-50
#E8EAF6
.indigo-50-text
.indigo-50
$indigo-100
#C5CAE9
.indigo-100-text
.indigo-100
$indigo-200
#9FA8DA
.indigo-200-text
.indigo-200
$indigo-300
#7986CB
.indigo-300-text
.indigo-300
$indigo-400
#5C6BC0
.indigo-400-text
.indigo-400
$indigo-500
#3F51B5
.indigo-500-text
.indigo-500
$indigo-600
#3949AB
.indigo-600-text
.indigo-600
$indigo-700
#303F9F
.indigo-700-text
.indigo-700
$indigo-800
#283593
.indigo-800-text
.indigo-800
$indigo-900
#1A237E
.indigo-900-text
.indigo-900
$indigo-a100
#8C9EFF
.indigo-a100-text
.indigo-a100
$indigo-a200
#536DFE
.indigo-a200-text
.indigo-a200
$indigo-a400
#3D5AFE
.indigo-a400-text
.indigo-a400
$indigo-a700
#304FFE
.indigo-a700-text
.indigo-a700

Blue

$blue
#2196F3
.blue-text
.blue
$blue-50
#E3F2FD
.blue-50-text
.blue-50
$blue-100
#BBDEFB
.blue-100-text
.blue-100
$blue-200
#90CAF9
.blue-200-text
.blue-200
$blue-300
#64B5F6
.blue-300-text
.blue-300
$blue-400
#42A5F5
.blue-400-text
.blue-400
$blue-500
#2196F3
.blue-500-text
.blue-500
$blue-600
#1E88E5
.blue-600-text
.blue-600
$blue-700
#1976D2
.blue-700-text
.blue-700
$blue-800
#1565C0
.blue-800-text
.blue-800
$blue-900
#0D47A1
.blue-900-text
.blue-900
$blue-a100
#82B1FF
.blue-a100-text
.blue-a100
$blue-a200
#448AFF
.blue-a200-text
.blue-a200
$blue-a400
#2979FF
.blue-a400-text
.blue-a400
$blue-a700
#2962FF
.blue-a700-text
.blue-a700

Light blue

$light-blue
#03A9F4
.light-blue-text
.light-blue
$light-blue-50
#E1F5FE
.light-blue-50-text
.light-blue-50
$light-blue-100
#B3E5FC
.light-blue-100-text
.light-blue-100
$light-blue-200
#81D4FA
.light-blue-200-text
.light-blue-200
$light-blue-300
#4FC3F7
.light-blue-300-text
.light-blue-300
$light-blue-400
#29B6F6
.light-blue-400-text
.light-blue-400
$light-blue-500
#03A9F4
.light-blue-500-text
.light-blue-500
$light-blue-600
#039BE5
.light-blue-600-text
.light-blue-600
$light-blue-700
#0288D1
.light-blue-700-text
.light-blue-700
$light-blue-800
#0277BD
.light-blue-800-text
.light-blue-800
$light-blue-900
#01579B
.light-blue-900-text
.light-blue-900
$light-blue-a100
#80D8FF
.light-blue-a100-text
.light-blue-a100
$light-blue-a200
#40C4FF
.light-blue-a200-text
.light-blue-a200
$light-blue-a400
#00B0FF
.light-blue-a400-text
.light-blue-a400
$light-blue-a700
#0091EA
.light-blue-a700-text
.light-blue-a700

Cyan

$cyan
#00BCD4
.cyan-text
.cyan
$cyan-50
#E0F7FA
.cyan-50-text
.cyan-50
$cyan-100
#B2EBF2
.cyan-100-text
.cyan-100
$cyan-200
#80DEEA
.cyan-200-text
.cyan-200
$cyan-300
#4DD0E1
.cyan-300-text
.cyan-300
$cyan-400
#26C6DA
.cyan-400-text
.cyan-400
$cyan-500
#00BCD4
.cyan-500-text
.cyan-500
$cyan-600
#00ACC1
.cyan-600-text
.cyan-600
$cyan-700
#0097A7
.cyan-700-text
.cyan-700
$cyan-800
#00838F
.cyan-800-text
.cyan-800
$cyan-900
#006064
.cyan-900-text
.cyan-900
$cyan-a100
#84FFFF
.cyan-a100-text
.cyan-a100
$cyan-a200
#18FFFF
.cyan-a200-text
.cyan-a200
$cyan-a400
#00E5FF
.cyan-a400-text
.cyan-a400
$cyan-a700
#00B8D4
.cyan-a700-text
.cyan-a700

Teal

$teal
#009688
.teal-text
.teal
$teal-50
#E0F2F1
.teal-50-text
.teal-50
$teal-100
#B2DFDB
.teal-100-text
.teal-100
$teal-200
#80CBC4
.teal-200-text
.teal-200
$teal-300
#4DB6AC
.teal-300-text
.teal-300
$teal-400
#26A69A
.teal-400-text
.teal-400
$teal-500
#009688
.teal-500-text
.teal-500
$teal-600
#00897B
.teal-600-text
.teal-600
$teal-700
#00796B
.teal-700-text
.teal-700
$teal-800
#00695C
.teal-800-text
.teal-800
$teal-900
#004D40
.teal-900-text
.teal-900
$teal-a100
#A7FFEB
.teal-a100-text
.teal-a100
$teal-a200
#64FFDA
.teal-a200-text
.teal-a200
$teal-a400
#1DE9B6
.teal-a400-text
.teal-a400
$teal-a700
#00BFA5
.teal-a700-text
.teal-a700

Green

$green
#4CAF50
.green-text
.green
$green-50
#E8F5E9
.green-50-text
.green-50
$green-100
#C8E6C9
.green-100-text
.green-100
$green-200
#A5D6A7
.green-200-text
.green-200
$green-300
#81C784
.green-300-text
.green-300
$green-400
#66BB6A
.green-400-text
.green-400
$green-500
#4CAF50
.green-500-text
.green-500
$green-600
#43A047
.green-600-text
.green-600
$green-700
#388E3C
.green-700-text
.green-700
$green-800
#2E7D32
.green-800-text
.green-800
$green-900
#1B5E20
.green-900-text
.green-900
$green-a100
#B9F6CA
.green-a100-text
.green-a100
$green-a200
#64FFDA
.green-a200-text
.green-a200
$green-a400
#00E676
.green-a400-text
.green-a400
$green-a700
#00C853
.green-a700-text
.green-a700

Light green

$light-green
#8BC34A
.light-green-text
.light-green
$light-green-50
#F1F8E9
.light-green-50-text
.light-green-50
$light-green-100
#DCEDC8
.light-green-100-text
.light-green-100
$light-green-200
#C5E1A5
.light-green-200-text
.light-green-200
$light-green-300
#AED581
.light-green-300-text
.light-green-300
$light-green-400
#9CCC65
.light-green-400-text
.light-green-400
$light-green-500
#8BC34A
.light-green-500-text
.light-green-500
$light-green-600
#7CB342
.light-green-600-text
.light-green-600
$light-green-700
#689F38
.light-green-700-text
.light-green-700
$light-green-800
#558B2F
.light-green-800-text
.light-green-800
$light-green-900
#33691E
.light-green-900-text
.light-green-900
$light-green-a100
#CCFF90
.light-green-a100-text
.light-green-a100
$light-green-a200
#B2FF59
.light-green-a200-text
.light-green-a200
$light-green-a400
#76FF03
.light-green-a400-text
.light-green-a400
$light-green-a700
#64DD17
.light-green-a700-text
.light-green-a700

Lime

$lime
#CDDC39
.lime-text
.lime
$lime-50
#F9FBE7
.lime-50-text
.lime-50
$lime-100
#F0F4C3
.lime-100-text
.lime-100
$lime-200
#E6EE9C
.lime-200-text
.lime-200
$lime-300
#DCE775
.lime-300-text
.lime-300
$lime-400
#D4E157
.lime-400-text
.lime-400
$lime-500
#CDDC39
.lime-500-text
.lime-500
$lime-600
#C0CA33
.lime-600-text
.lime-600
$lime-700
#AFB42B
.lime-700-text
.lime-700
$lime-800
#9E9D24
.lime-800-text
.lime-800
$lime-900
#827717
.lime-900-text
.lime-900
$lime-a100
#F4FF81
.lime-a100-text
.lime-a100
$lime-a200
#EEFF41
.lime-a200-text
.lime-a200
$lime-a400
#C6FF00
.lime-a400-text
.lime-a400
$lime-a700
#AEEA00
.lime-a700-text
.lime-a700

Yellow

$yellow
#FFEB3B
.yellow-text
.yellow
$yellow-50
#FFFDE7
.yellow-50-text
.yellow-50
$yellow-100
#FFF9C4
.yellow-100-text
.yellow-100
$yellow-200
#FFF59D
.yellow-200-text
.yellow-200
$yellow-300
#FFF176
.yellow-300-text
.yellow-300
$yellow-400
#FFEE58
.yellow-400-text
.yellow-400
$yellow-500
#FFEB3B
.yellow-500-text
.yellow-500
$yellow-600
#FDD835
.yellow-600-text
.yellow-600
$yellow-700
#FBC02D
.yellow-700-text
.yellow-700
$yellow-800
#F9A825
.yellow-800-text
.yellow-800
$yellow-900
#F57F17
.yellow-900-text
.yellow-900
$yellow-a100
#FFFF8D
.yellow-a100-text
.yellow-a100
$yellow-a200
#FFFF00
.yellow-a200-text
.yellow-a200
$yellow-a400
#FFEA00
.yellow-a400-text
.yellow-a400
$yellow-a700
#FFD600
.yellow-a700-text
.yellow-a700

Amber

$amber
#FFC107
.amber-text
.amber
$amber-50
#FFF8E1
.amber-50-text
.amber-50
$amber-100
#FFECB3
.amber-100-text
.amber-100
$amber-200
#FFE082
.amber-200-text
.amber-200
$amber-300
#FFD54F
.amber-300-text
.amber-300
$amber-400
#FFCA28
.amber-400-text
.amber-400
$amber-500
#FFC107
.amber-500-text
.amber-500
$amber-600
#FFB300
.amber-600-text
.amber-600
$amber-700
#FFA000
.amber-700-text
.amber-700
$amber-800
#FF8F00
.amber-800-text
.amber-800
$amber-900
#FF6F00
.amber-900-text
.amber-900
$amber-a100
#FFE57F
.amber-a100-text
.amber-a100
$amber-a200
#FFD740
.amber-a200-text
.amber-a200
$amber-a400
#FFC400
.amber-a400-text
.amber-a400
$amber-a700
#FFAB00
.amber-a700-text
.amber-a700

Orange

$orange
#FF9800
.orange-text
.orange
$orange-50
#FFF3E0
.orange-50-text
.orange-50
$orange-100
#FFE0B2
.orange-100-text
.orange-100
$orange-200
#FFCC80
.orange-200-text
.orange-200
$orange-300
#FFB74D
.orange-300-text
.orange-300
$orange-400
#FFA726
.orange-400-text
.orange-400
$orange-500
#FF9800
.orange-500-text
.orange-500
$orange-600
#FB8C00
.orange-600-text
.orange-600
$orange-700
#F57C00
.orange-700-text
.orange-700
$orange-800
#EF6C00
.orange-800-text
.orange-800
$orange-900
#E65100
.orange-900-text
.orange-900
$orange-a100
#FFD180
.orange-a100-text
.orange-a100
$orange-a200
#FFAB40
.orange-a200-text
.orange-a200
$orange-a400
#FF9100
.orange-a400-text
.orange-a400
$orange-a700
#FF6D00
.orange-a700-text
.orange-a700

Deep orange

$deep-orange
#FF5722
.deep-orange-text
.deep-orange
$deep-orange-50
#FBE9E7
.deep-orange-50-text
.deep-orange-50
$deep-orange-100
#FFCCBC
.deep-orange-100-text
.deep-orange-100
$deep-orange-200
#FFAB91
.deep-orange-200-text
.deep-orange-200
$deep-orange-300
#FF8A65
.deep-orange-300-text
.deep-orange-300
$deep-orange-400
#FF7043
.deep-orange-400-text
.deep-orange-400
$deep-orange-500
#FF5722
.deep-orange-500-text
.deep-orange-500
$deep-orange-600
#F4511E
.deep-orange-600-text
.deep-orange-600
$deep-orange-700
#E64A19
.deep-orange-700-text
.deep-orange-700
$deep-orange-800
#D84315
.deep-orange-800-text
.deep-orange-800
$deep-orange-900
#BF360C
.deep-orange-900-text
.deep-orange-900
$deep-orange-a100
#FF9E80
.deep-orange-a100-text
.deep-orange-a100
$deep-orange-a200
#FF6E40
.deep-orange-a200-text
.deep-orange-a200
$deep-orange-a400
#FF3D00
.deep-orange-a400-text
.deep-orange-a400
$deep-orange-a700
#DD2C00
.deep-orange-a700-text
.deep-orange-a700

Brown

$brown
#795548
.brown-text
.brown
$brown-50
#EFEBE9
.brown-50-text
.brown-50
$brown-100
#D7CCC8
.brown-100-text
.brown-100
$brown-200
#BCAAA4
.brown-200-text
.brown-200
$brown-300
#A1887F
.brown-300-text
.brown-300
$brown-400
#8D6E63
.brown-400-text
.brown-400
$brown-500
#795548
.brown-500-text
.brown-500
$brown-600
#6D4C41
.brown-600-text
.brown-600
$brown-700
#5D4037
.brown-700-text
.brown-700
$brown-800
#4E342E
.brown-800-text
.brown-800
$brown-900
#3E2723
.brown-900-text
.brown-900

Grey

$grey
#9E9E9E
.grey-text
.grey
$grey-50
#FAFAFA
.grey-50-text
.grey-50
$grey-100
#F5F5F5
.grey-100-text
.grey-100
$grey-200
#EEEEEE
.grey-200-text
.grey-200
$grey-300
#E0E0E0
.grey-300-text
.grey-300
$grey-400
#BDBDBD
.grey-400-text
.grey-400
$grey-500
#9E9E9E
.grey-500-text
.grey-500
$grey-600
#757575
.grey-600-text
.grey-600
$grey-700
#616161
.grey-700-text
.grey-700
$grey-800
#424242
.grey-800-text
.grey-800
$grey-900
#212121
.grey-900-text
.grey-900

Blue grey

$blue-grey
#607D8B
.blue-grey-text
.blue-grey
$blue-grey-50
#ECEFF1
.blue-grey-50-text
.blue-grey-50
$blue-grey-100
#CFD8DC
.blue-grey-100-text
.blue-grey-100
$blue-grey-200
#B0BEC5
.blue-grey-200-text
.blue-grey-200
$blue-grey-300
#90A4AE
.blue-grey-300-text
.blue-grey-300
$blue-grey-400
#78909C
.blue-grey-400-text
.blue-grey-400
$blue-grey-500
#607D8B
.blue-grey-500-text
.blue-grey-500
$blue-grey-600
#546E7A
.blue-grey-600-text
.blue-grey-600
$blue-grey-700
#455A64
.blue-grey-700-text
.blue-grey-700
$blue-grey-800
#37474F
.blue-grey-800-text
.blue-grey-800
$blue-grey-900
#263238
.blue-grey-900-text
.blue-grey-900

Shade

$black
#000000
.black-text
.black
$white
#FFFFFF
.white-text
.white

Resources