Theme Palette Colors
Each palette color gets converted to a class with the color as background and its contrast, but also separate classes for only background or text color. The CSS class is bound to the MudBlazor theme and updated if you change the theme dynamicly.
You can read more about theming MudBlazor here.
CSS and Theme colors
Here we add each class to the divs to change the background color, text color and both background and text color with one class only.
<MudPaper Class="pa-4 mud-info">.mud-info</MudPaper> <MudPaper Class="pa-4 mud-secondary-text">.mud-secondary-text</MudPaper> <MudPaper Class="pa-4 mud-theme-primary">.mud-theme-primary</MudPaper>
CSharp and Theme colors
You can also access the colors with blazor directly like we do in this example.
<MudPaper Class="pa-4" Style="@($"color:{Theme.PaletteLight.Dark}; background:{Theme.PaletteLight.Warning};")"> Warning with Dark text </MudPaper> <MudPaper Class="pa-4" Style="@($"color:{Theme.PaletteLight.SuccessLighten}; background:{Theme.PaletteLight.Dark};")"> Dark with Success lighten </MudPaper>
@code { private MudTheme Theme = new MudTheme(); }
Material Colors
All Material colors, as well as background and text variants, are available for use in your application.
CSS and Material colors
Here we add each class to the divs to change the background color, text color and both background and text color with one class only.
<MudPaper Class="pa-4 red-text text-accent-4"> .red-text .text-accent-4 </MudPaper> <MudPaper Class="pa-4 blue darken-1 shades-text text-white"> .blue .darken-1 .shades-text .text-white </MudPaper>
CSharp and Material colors
You can also access the material colors with blazor directly like we did above with the MudBlazor palette colors.
<MudPaper Class="pa-4" Style="@($"color:{Colors.Purple.Accent3};")"> Colors.Purple.Accent3 </MudPaper> <MudPaper Class="pa-4" Style="@($"color:{Colors.LightGreen.Accent3}; background:{Colors.BlueGray.Darken4};")"> Colors.BlueGray.Darken4 Colors.LightGreen.Accent3 </MudPaper>
List of Material Colors
Below is a list of the Material design color palette grouped by primary color
Red
Default
#F44336
Lighten5
#FFEBEE
Lighten4
#FFCDD2
Lighten3
#EF9A9A
Lighten2
#E57373
Lighten1
#EF5350
Darken1
#E53935
Darken2
#D32F2F
Darken3
#C62828
Darken4
#B71C1C
Accent1
#FF8A80
Accent2
#FF5252
Accent3
#FF1744
Accent4
#D50000
Pink
Default
#E91E63
Lighten5
#FCE4EC
Lighten4
#F8BBD0
Lighten3
#F48FB1
Lighten2
#F06292
Lighten1
#EC407A
Darken1
#D81B60
Darken2
#C2185B
Darken3
#AD1457
Darken4
#880E4F
Accent1
#FF80AB
Accent2
#FF4081
Accent3
#F50057
Accent4
#C51162
Purple
Default
#9C27B0
Lighten5
#F3E5F5
Lighten4
#E1BEE7
Lighten3
#CE93D8
Lighten2
#BA68C8
Lighten1
#AB47BC
Darken1
#8E24AA
Darken2
#7B1FA2
Darken3
#6A1B9A
Darken4
#4A148C
Accent1
#EA80FC
Accent2
#E040FB
Accent3
#D500F9
Accent4
#AA00FF
DeepPurple
Default
#673AB7
Lighten5
#EDE7F6
Lighten4
#D1C4E9
Lighten3
#B39DDB
Lighten2
#9575CD
Lighten1
#7E57C2
Darken1
#5E35B1
Darken2
#512DA8
Darken3
#4527A0
Darken4
#311B92
Accent1
#B388FF
Accent2
#7C4DFF
Accent3
#651FFF
Accent4
#6200EA
Indigo
Default
#3F51B5
Lighten5
#E8EAF6
Lighten4
#C5CAE9
Lighten3
#9FA8DA
Lighten2
#7986CB
Lighten1
#5C6BC0
Darken1
#3949AB
Darken2
#303F9F
Darken3
#283593
Darken4
#1A237E
Accent1
#8C9EFF
Accent2
#536DFE
Accent3
#3D5AFE
Accent4
#304FFE
Blue
Default
#2196F3
Lighten5
#E3F2FD
Lighten4
#BBDEFB
Lighten3
#90CAF9
Lighten2
#64B5F6
Lighten1
#42A5F5
Darken1
#1E88E5
Darken2
#1976D2
Darken3
#1565C0
Darken4
#0D47A1
Accent1
#82B1FF
Accent2
#448AFF
Accent3
#2979FF
Accent4
#2962FF
LightBlue
Default
#03A9F4
Lighten5
#E1F5FE
Lighten4
#B3E5FC
Lighten3
#81D4FA
Lighten2
#4FC3F7
Lighten1
#29B6F6
Darken1
#039BE5
Darken2
#0288D1
Darken3
#0277BD
Darken4
#01579B
Accent1
#80D8FF
Accent2
#40C4FF
Accent3
#00B0FF
Accent4
#0091EA
Cyan
Default
#00BCD4
Lighten5
#E0F7FA
Lighten4
#B2EBF2
Lighten3
#80DEEA
Lighten2
#4DD0E1
Lighten1
#26C6DA
Darken1
#00ACC1
Darken2
#0097A7
Darken3
#00838F
Darken4
#006064
Accent1
#84FFFF
Accent2
#18FFFF
Accent3
#00E5FF
Accent4
#00B8D4
Teal
Default
#009688
Lighten5
#E0F2F1
Lighten4
#B2DFDB
Lighten3
#80CBC4
Lighten2
#4DB6AC
Lighten1
#26A69A
Darken1
#00897B
Darken2
#00796B
Darken3
#00695C
Darken4
#004D40
Accent1
#A7FFEB
Accent2
#64FFDA
Accent3
#1DE9B6
Accent4
#00BFA5
Green
Default
#4CAF50
Lighten5
#E8F5E9
Lighten4
#C8E6C9
Lighten3
#A5D6A7
Lighten2
#81C784
Lighten1
#66BB6A
Darken1
#43A047
Darken2
#388E3C
Darken3
#2E7D32
Darken4
#1B5E20
Accent1
#B9F6CA
Accent2
#69F0AE
Accent3
#00E676
Accent4
#00C853
LightGreen
Default
#8BC34A
Lighten5
#F1F8E9
Lighten4
#DCEDC8
Lighten3
#C5E1A5
Lighten2
#AED581
Lighten1
#9CCC65
Darken1
#7CB342
Darken2
#689F38
Darken3
#558B2F
Darken4
#33691E
Accent1
#CCFF90
Accent2
#B2FF59
Accent3
#76FF03
Accent4
#64DD17
Lime
Default
#CDDC39
Lighten5
#F9FBE7
Lighten4
#F0F4C3
Lighten3
#E6EE9C
Lighten2
#DCE775
Lighten1
#D4E157
Darken1
#C0CA33
Darken2
#AFB42B
Darken3
#9E9D24
Darken4
#827717
Accent1
#F4FF81
Accent2
#EEFF41
Accent3
#C6FF00
Accent4
#AEEA00
Yellow
Default
#FFEB3B
Lighten5
#FFFDE7
Lighten4
#FFF9C4
Lighten3
#FFF59D
Lighten2
#FFF176
Lighten1
#FFEE58
Darken1
#FDD835
Darken2
#FBC02D
Darken3
#F9A825
Darken4
#F57F17
Accent1
#FFFF8D
Accent2
#FFFF00
Accent3
#FFEA00
Accent4
#FFD600
Amber
Default
#FFC107
Lighten5
#FFF8E1
Lighten4
#FFECB3
Lighten3
#FFE082
Lighten2
#FFD54F
Lighten1
#FFCA28
Darken1
#FFB300
Darken2
#FFA000
Darken3
#FF8F00
Darken4
#FF6F00
Accent1
#FFE57F
Accent2
#FFD740
Accent3
#FFC400
Accent4
#FFAB00
Orange
Default
#FF9800
Lighten5
#FFF3E0
Lighten4
#FFE0B2
Lighten3
#FFCC80
Lighten2
#FFB74D
Lighten1
#FFA726
Darken1
#FB8C00
Darken2
#F57C00
Darken3
#EF6C00
Darken4
#E65100
Accent1
#FFD180
Accent2
#FFAB40
Accent3
#FF9100
Accent4
#FF6D00
DeepOrange
Default
#FF5722
Lighten5
#FBE9E7
Lighten4
#FFCCBC
Lighten3
#FFAB91
Lighten2
#FF8A65
Lighten1
#FF7043
Darken1
#F4511E
Darken2
#E64A19
Darken3
#D84315
Darken4
#BF360C
Accent1
#FF9E80
Accent2
#FF6E40
Accent3
#FF3D00
Accent4
#DD2C00
Brown
Default
#795548
Lighten5
#EFEBE9
Lighten4
#D7CCC8
Lighten3
#BCAAA4
Lighten2
#A1887F
Lighten1
#8D6E63
Darken1
#6D4C41
Darken2
#5D4037
Darken3
#4E342E
Darken4
#3E2723
BlueGray
Default
#607D8B
Lighten5
#ECEFF1
Lighten4
#CFD8DC
Lighten3
#B0BEC5
Lighten2
#90A4AE
Lighten1
#78909C
Darken1
#546E7A
Darken2
#455A64
Darken3
#37474F
Darken4
#263238
Gray
Default
#9E9E9E
Lighten5
#FAFAFA
Lighten4
#F5F5F5
Lighten3
#EEEEEE
Lighten2
#E0E0E0
Lighten1
#BDBDBD
Darken1
#757575
Darken2
#616161
Darken3
#424242
Darken4
#212121
Shades
Black
#000000
White
#FFFFFF
Transparent
transparent