Radzen Blazor Components

API Reference About Radzen GitHub

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-base

--rz-base-lighter

--rz-base-light

--rz-base-dark

--rz-base-darker

--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

Save $100 with our Black Friday deals!