MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Colors

Out of the box, you get access to all colors in the Material Design spec through css classes and Blazor.
You can also use the palette colors from either the default theme or your own.

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.

Using the Palette 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 one class.

.mud-info
.mud-secondary-text
.mud-theme-primary
Hide code example
Edit on TryMudBlazor
Copy Code
<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>

You can also access the colors with blazor directly like we do in this example.

Warning with Dark text
Dark with Success lighten
Hide code example
Edit on TryMudBlazor
Copy Code
<MudPaper Class="pa-4" Style="@($"color:{Theme.Palette.Dark}; background:{Theme.Palette.Warning};")">
    Warning with Dark text
</MudPaper>
<MudPaper Class="pa-4" Style="@($"color:{Theme.Palette.SuccessLighten}; background:{Theme.Palette.Dark};")">
    Dark with Success lighten
</MudPaper>

@code {
    private MudTheme Theme = new MudTheme();
}

Using Material colors

All Material colors, as well as background and text variants, are available for use in your application.

.red-text .text-accent-4
.blue .darken-1 .shades-text .text-white
Show code example
Edit on TryMudBlazor
Copy Code
<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>

You can also access the material colors with blazor directly like we did above with the MudBlazor palette colors.

Colors.Purple.Accent3
Colors.BlueGrey.Darken4 Colors.LightGreen.Accent3
Hide code example
Edit on TryMudBlazor
Copy Code
<MudPaper Class="pa-4" Style="@($"color:{Colors.Purple.Accent3};")">
    Colors.Purple.Accent3
</MudPaper>
<MudPaper Class="pa-4" Style="@($"color:{Colors.LightGreen.Accent3}; background:{Colors.BlueGrey.Darken4};")">
    Colors.BlueGrey.Darken4 Colors.LightGreen.Accent3
</MudPaper>

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

BlueGrey

Default

#607D8B

Lighten5

#ECEFF1

Lighten4

#CFD8DC

Lighten3

#B0BEC5

Lighten2

#90A4AE

Lighten1

#78909C

Darken1

#546E7A

Darken2

#455A64

Darken3

#37474F

Darken4

#263238

Grey

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
An error has occurred. This application may no longer respond until reloaded. Reload 🗙