Radzen Blazor Components

Colors

List of colors and utility CSS classes.

Theme Colors link

These are the root theme colors. Each theme has its own color values assigned. Change the theme to preview them.

--rz-white
--rz-base-50
--rz-base-100
--rz-base-200
--rz-base-300
--rz-base-400
--rz-base-500
--rz-base-600
--rz-base-700
--rz-base-800
--rz-base-900
--rz-black
--rz-primary
--rz-primary-lighter
--rz-primary-light
--rz-primary-dark
--rz-primary-darker
--rz-secondary
--rz-secondary-lighter
--rz-secondary-light
--rz-secondary-dark
--rz-secondary-darker
--rz-info
--rz-info-lighter
--rz-info-light
--rz-info-dark
--rz-info-darker
--rz-success
--rz-success-lighter
--rz-success-light
--rz-success-dark
--rz-success-darker
--rz-warning
--rz-warning-lighter
--rz-warning-light
--rz-warning-dark
--rz-warning-darker
--rz-danger
--rz-danger-lighter
--rz-danger-light
--rz-danger-dark
--rz-danger-darker
--rz-series-1
--rz-series-2
--rz-series-3
--rz-series-4
--rz-series-5
--rz-series-6
--rz-series-7
--rz-series-8

Utility CSS Classes link

Use these classes to set background, text or border colors. E.g. class="rz-background-color-secondary"

Background-color
.rz-background-color-white
.rz-background-color-base-50
.rz-background-color-base-100
.rz-background-color-base-200
.rz-background-color-base-300
.rz-background-color-base-400
.rz-background-color-base-500
.rz-background-color-base-600
.rz-background-color-base-700
.rz-background-color-base-800
.rz-background-color-base-900
.rz-background-color-black
.rz-background-color-primary-lighter
.rz-background-color-primary-light
.rz-background-color-primary
.rz-background-color-primary-dark
.rz-background-color-primary-darker
.rz-background-color-secondary-lighter
.rz-background-color-secondary-light
.rz-background-color-secondary
.rz-background-color-secondary-dark
.rz-background-color-secondary-darker
.rz-background-color-info-lighter
.rz-background-color-info-light
.rz-background-color-info
.rz-background-color-info-dark
.rz-background-color-info-darker
.rz-background-color-success-lighter
.rz-background-color-success-light
.rz-background-color-success
.rz-background-color-success-dark
.rz-background-color-success-darker
.rz-background-color-warning-lighter
.rz-background-color-warning-light
.rz-background-color-warning
.rz-background-color-warning-dark
.rz-background-color-warning-darker
.rz-background-color-danger-lighter
.rz-background-color-danger-light
.rz-background-color-danger
.rz-background-color-danger-dark
.rz-background-color-danger-darker
.rz-background-color-series-1
.rz-background-color-series-2
.rz-background-color-series-3
.rz-background-color-series-4
.rz-background-color-series-5
.rz-background-color-series-6
.rz-background-color-series-7
.rz-background-color-series-8
Color on white
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Color on black
.rz-color-white
.rz-color-base-50
.rz-color-base-100
.rz-color-base-200
.rz-color-base-300
.rz-color-base-400
.rz-color-base-500
.rz-color-base-600
.rz-color-base-700
.rz-color-base-800
.rz-color-base-900
.rz-color-black
.rz-color-primary-lighter
.rz-color-primary-light
.rz-color-primary
.rz-color-primary-dark
.rz-color-primary-darker
.rz-color-secondary-lighter
.rz-color-secondary-light
.rz-color-secondary
.rz-color-secondary-dark
.rz-color-secondary-darker
.rz-color-info-lighter
.rz-color-info-light
.rz-color-info
.rz-color-info-dark
.rz-color-info-darker
.rz-color-success-lighter
.rz-color-success-light
.rz-color-success
.rz-color-success-dark
.rz-color-success-darker
.rz-color-warning-lighter
.rz-color-warning-light
.rz-color-warning
.rz-color-warning-dark
.rz-color-warning-darker
.rz-color-danger-lighter
.rz-color-danger-light
.rz-color-danger
.rz-color-danger-dark
.rz-color-danger-darker
.rz-color-series-1
.rz-color-series-2
.rz-color-series-3
.rz-color-series-4
.rz-color-series-5
.rz-color-series-6
.rz-color-series-7
.rz-color-series-8
Border-color
.rz-border-color-white
.rz-border-color-base-50
.rz-border-color-base-100
.rz-border-color-base-200
.rz-border-color-base-300
.rz-border-color-base-400
.rz-border-color-base-500
.rz-border-color-base-600
.rz-border-color-base-700
.rz-border-color-base-800
.rz-border-color-base-900
.rz-border-color-black
.rz-border-color-primary-lighter
.rz-border-color-primary-light
.rz-border-color-primary
.rz-border-color-primary-dark
.rz-border-color-primary-darker
.rz-border-color-secondary-lighter
.rz-border-color-secondary-light
.rz-border-color-secondary
.rz-border-color-secondary-dark
.rz-border-color-secondary-darker
.rz-border-color-info-lighter
.rz-border-color-info-light
.rz-border-color-info
.rz-border-color-info-dark
.rz-border-color-info-darker
.rz-border-color-success-lighter
.rz-border-color-success-light
.rz-border-color-success
.rz-border-color-success-dark
.rz-border-color-success-darker
.rz-border-color-warning-lighter
.rz-border-color-warning-light
.rz-border-color-warning
.rz-border-color-warning-dark
.rz-border-color-warning-darker
.rz-border-color-danger-lighter
.rz-border-color-danger-light
.rz-border-color-danger
.rz-border-color-danger-dark
.rz-border-color-danger-darker
.rz-border-color-series-1
.rz-border-color-series-2
.rz-border-color-series-3
.rz-border-color-series-4
.rz-border-color-series-5
.rz-border-color-series-6
.rz-border-color-series-7
.rz-border-color-series-8

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙