www.radzen.com

Radzen Blazor Components

Colors

List of colors and utility CSS classes.

This page showcases root theme colors (base/primary/secondary/info/success/warning/danger/series) with theme-specific values, and comprehensive utility CSS classes for background colors (rz-background-color-*), text colors (rz-color-*), and border colors (rz-border-color-*) with multiple shade variations (lighter/light/default/dark/darker).

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

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation