Blazorise Color Utilities

Use Blazorise color utilities to visually convey meaning, highlight important content, and maintain consistent design across your application. These utilities work seamlessly with all contextual variants and include built-in support for link styling and hover states.

Below is a list of available contextual color classes that can be applied to most Blazorise components to customize their appearance and improve user experience.

Background

The Background utility allows you to quickly set contextual background colors for any component. It supports the same color palette used across all Blazorise themes.

Background colors can be applied through the Background parameter on components such as Div, Card, or Alert. Each color corresponds to a contextual variant that adapts automatically to the selected theme.

  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • White
  • Transparent
  • Body

Primary
Primary Subtle
Secondary
Secondary Subtle
Success
Success Subtle
Danger
Danger Subtle
Warning
Warning Subtle 
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Primary" TextColor="TextColor.White">
    Primary
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis">
    Primary Subtle
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Secondary" TextColor="TextColor.White">
    Secondary
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Secondary.Subtle" TextColor="TextColor.Secondary.Emphasis">
    Secondary Subtle
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Success" TextColor="TextColor.White">
    Success
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Success.Subtle" TextColor="TextColor.Success.Emphasis">
    Success Subtle
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Danger" TextColor="TextColor.White">
    Danger
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Danger.Subtle" TextColor="TextColor.Danger.Emphasis">
    Danger Subtle
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Warning" TextColor="TextColor.Dark">
    Warning
</Div>
<Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Warning.Subtle" TextColor="TextColor.Warning.Emphasis">
    Warning Subtle
</Div>

Text Colors

The TextColor utility provides an easy way to apply contextual color to text elements. These color variants are consistent with the overall theme and can be used to emphasize status, importance, or hierarchy in your content.

You can assign text colors using the TextColor parameter on any component that renders text, such as Paragraph, Span, or Div.

The available text color values include:

  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • Body
  • Muted
  • White
  • Black50
  • White50

Some frameworks, such as Bootstrap 5, also support additional text variants like Emphasis, allowing you to write TextColor.Success.Emphasis for softer, more modern tone variations that align with the current theme palette.

Primary

Primary Emphasis

Secondary

Secondary Emphasis

Success

Success Emphasis

Danger

Danger Emphasis

Warning

Warning Emphasis

Info

Info Emphasis

Light

Light Emphasis

Dark

Dark Emphasis

Body

Body Emphasis 

<Paragraph TextColor="TextColor.Primary">
    Primary
</Paragraph>
<Paragraph TextColor="TextColor.Primary.Emphasis">
    Primary Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Secondary">
    Secondary
</Paragraph>
<Paragraph TextColor="TextColor.Secondary.Emphasis">
    Secondary Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Success">
    Success
</Paragraph>
<Paragraph TextColor="TextColor.Success.Emphasis">
    Success Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Danger">
    Danger
</Paragraph>
<Paragraph TextColor="TextColor.Danger.Emphasis">
    Danger Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Warning">
    Warning
</Paragraph>
<Paragraph TextColor="TextColor.Warning.Emphasis">
    Warning Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Info" Background="Background.Dark">
    Info
</Paragraph>
<Paragraph TextColor="TextColor.Info.Emphasis">
    Info Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Light">
    Light
</Paragraph>
<Paragraph TextColor="TextColor.Light.Emphasis" Background="Background.Dark">
    Light Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Dark">
    Dark
</Paragraph>
<Paragraph TextColor="TextColor.Dark.Emphasis">
    Dark Emphasis
</Paragraph>
<Paragraph TextColor="TextColor.Body">
    Body
</Paragraph>
<Paragraph TextColor="TextColor.Body.Emphasis">
    Body Emphasis
</Paragraph>

SnackbarColor

  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
On this page