@page "/colors"

<PageTitle>Blazor Color Utilities | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="List of colors and utility CSS classes available in Radzen Blazor Components library.">
</HeadContent>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Colors
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    List of colors and utility CSS classes.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    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 (<code>rz-background-color-*</code>), text colors (<code>rz-color-*</code>), and border colors (<code>rz-border-color-*</code>) with multiple shade variations (lighter/light/default/dark/darker).
</RadzenText>

<RadzenText Anchor="colors#theme-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Theme Colors
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    These are the root theme colors. Each theme has its own color values assigned. Change the theme to preview them.
</RadzenText>
<RadzenRow RowGap="2rem">
    <RadzenColumn Size="12" SizeSM="3">
        <div class="colors rz-shadow-2 rz-border-radius-2">
            <div class="rz-background-color-white"><span class="rz-color-black">--rz-white</span></div>
            <div class="rz-background-color-base-50"><span class="rz-color-black">--rz-base-50</span></div>
            <div class="rz-background-color-base-100"><span class="rz-color-black">--rz-base-100</span></div>
            <div class="rz-background-color-base-200"><span class="rz-color-black">--rz-base-200</span></div>
            <div class="rz-background-color-base-300"><span class="rz-color-black">--rz-base-300</span></div>
            <div class="rz-background-color-base-400"><span class="rz-color-black">--rz-base-400</span></div>
            <div class="rz-background-color-base-500"><span class="rz-color-white">--rz-base-500</span></div>
            <div class="rz-background-color-base-600"><span class="rz-color-white">--rz-base-600</span></div>
            <div class="rz-background-color-base-700"><span class="rz-color-white">--rz-base-700</span></div>
            <div class="rz-background-color-base-800"><span class="rz-color-white">--rz-base-800</span></div>
            <div class="rz-background-color-base-900"><span class="rz-color-white">--rz-base-900</span></div>
            <div class="rz-background-color-black"><span class="rz-color-white">--rz-black</span></div>
        </div>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeSM="9">
        <RadzenRow>
            <RadzenColumn Size="12" SizeSM="4">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-base"><span class="rz-color-on-base">--rz-base</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-base-lighter"><span class="rz-color-on-base-lighter">--rz-base-lighter</span></div>
                    <div class="rz-background-color-base-light"><span class="rz-color-on-base-light">--rz-base-light</span></div>
                    <div class="rz-background-color-base-dark"><span class="rz-color-on-base-dark">--rz-base-dark</span></div>
                    <div class="rz-background-color-base-darker"><span class="rz-color-on-base-darker">--rz-base-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="4">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-primary"><span class="rz-color-on-primary">--rz-primary</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-primary-lighter"><span class="rz-color-on-primary-lighter">--rz-primary-lighter</span></div>
                    <div class="rz-background-color-primary-light"><span class="rz-color-on-primary-light">--rz-primary-light</span></div>
                    <div class="rz-background-color-primary-dark"><span class="rz-color-on-primary-dark">--rz-primary-dark</span></div>
                    <div class="rz-background-color-primary-darker"><span class="rz-color-on-primary-darker">--rz-primary-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="4">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-secondary"><span class="rz-color-on-secondary">--rz-secondary</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-secondary-lighter"><span class="rz-color-on-secondary-lighter">--rz-secondary-lighter</span></div>
                    <div class="rz-background-color-secondary-light"><span class="rz-color-on-secondary-light">--rz-secondary-light</span></div>
                    <div class="rz-background-color-secondary-dark"><span class="rz-color-on-secondary-dark">--rz-secondary-dark</span></div>
                    <div class="rz-background-color-secondary-darker"><span class="rz-color-on-secondary-darker">--rz-secondary-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="3">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-info"><span class="rz-color-on-info">--rz-info</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-info-lighter"><span class="rz-color-on-info-lighter">--rz-info-lighter</span></div>
                    <div class="rz-background-color-info-light"><span class="rz-color-on-info-light">--rz-info-light</span></div>
                    <div class="rz-background-color-info-dark"><span class="rz-color-on-info-dark">--rz-info-dark</span></div>
                    <div class="rz-background-color-info-darker"><span class="rz-color-on-info-darker">--rz-info-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="3">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-success"><span class="rz-color-on-success">--rz-success</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-success-lighter"><span class="rz-color-on-success-lighter">--rz-success-lighter</span></div>
                    <div class="rz-background-color-success-light"><span class="rz-color-on-success-light">--rz-success-light</span></div>
                    <div class="rz-background-color-success-dark"><span class="rz-color-on-success-dark">--rz-success-dark</span></div>
                    <div class="rz-background-color-success-darker"><span class="rz-color-on-success-darker">--rz-success-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="3">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-warning"><span class="rz-color-on-warning">--rz-warning</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-warning-lighter"><span class="rz-color-on-warning-lighter">--rz-warning-lighter</span></div>
                    <div class="rz-background-color-warning-light"><span class="rz-color-on-warning-light">--rz-warning-light</span></div>
                    <div class="rz-background-color-warning-dark"><span class="rz-color-on-warning-dark">--rz-warning-dark</span></div>
                    <div class="rz-background-color-warning-darker"><span class="rz-color-on-warning-darker">--rz-warning-darker</span></div>
                </div>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeSM="3">
                <div class="colors rz-shadow-2 rz-border-radius-2 rz-mb-8">
                    <div class="rz-background-color-danger"><span class="rz-color-on-danger">--rz-danger</span></div>
                </div>
                <div class="colors rz-shadow-2 rz-border-radius-2">
                    <div class="rz-background-color-danger-lighter"><span class="rz-color-on-danger-lighter">--rz-danger-lighter</span></div>
                    <div class="rz-background-color-danger-light"><span class="rz-color-on-danger-light">--rz-danger-light</span></div>
                    <div class="rz-background-color-danger-dark"><span class="rz-color-on-danger-dark">--rz-danger-dark</span></div>
                    <div class="rz-background-color-danger-darker"><span class="rz-color-on-danger-darker">--rz-danger-darker</span></div>
                </div>
            </RadzenColumn>
        </RadzenRow>
    </RadzenColumn>
</RadzenRow>
<RadzenRow class="rz-mt-8">
    <RadzenColumn Size="12">
        <div class="colors series-colors rz-shadow-2 rz-border-radius-2">
            <div class="rz-background-color-series-1"><span class="rz-color-white">--rz-series-1</span></div>
            <div class="rz-background-color-series-2"><span class="rz-color-white">--rz-series-2</span></div>
            <div class="rz-background-color-series-3"><span class="rz-color-white">--rz-series-3</span></div>
            <div class="rz-background-color-series-4"><span class="rz-color-white">--rz-series-4</span></div>
            <div class="rz-background-color-series-5"><span class="rz-color-white">--rz-series-5</span></div>
            <div class="rz-background-color-series-6"><span class="rz-color-white">--rz-series-6</span></div>
            <div class="rz-background-color-series-7"><span class="rz-color-white">--rz-series-7</span></div>
            <div class="rz-background-color-series-8"><span class="rz-color-white">--rz-series-8</span></div>
        </div>
    </RadzenColumn>
</RadzenRow>
<RadzenText Anchor="colors#utility-css-classes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Utility CSS Classes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use these classes to set background, text or border colors. E.g. <code>class="rz-background-color-secondary"</code>
</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="3">
    <RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Background-color</RadzenText>
    <div class="color-classes rz-shadow-2 rz-border-radius-2">
        <div class="rz-background-color-white"><span class="rz-color-black">.rz-background-color-white</span></div>
        <div class="rz-background-color-base-50"><span class="rz-color-black">.rz-background-color-base-50</span></div>
        <div class="rz-background-color-base-100"><span class="rz-color-black">.rz-background-color-base-100</span></div>
        <div class="rz-background-color-base-200"><span class="rz-color-black">.rz-background-color-base-200</span></div>
        <div class="rz-background-color-base-300"><span class="rz-color-black">.rz-background-color-base-300</span></div>
        <div class="rz-background-color-base-400"><span class="rz-color-black">.rz-background-color-base-400</span></div>
        <div class="rz-background-color-base-500"><span class="rz-color-white">.rz-background-color-base-500</span></div>
        <div class="rz-background-color-base-600"><span class="rz-color-white">.rz-background-color-base-600</span></div>
        <div class="rz-background-color-base-700"><span class="rz-color-white">.rz-background-color-base-700</span></div>
        <div class="rz-background-color-base-800"><span class="rz-color-white">.rz-background-color-base-800</span></div>
        <div class="rz-background-color-base-900"><span class="rz-color-white">.rz-background-color-base-900</span></div>
        <div class="rz-background-color-black"><span class="rz-color-white">.rz-background-color-black</span></div>
        <div class="rz-background-color-primary-lighter"><span class="rz-color-on-primary-lighter">.rz-background-color-primary-lighter</span></div>
        <div class="rz-background-color-primary-light"><span class="rz-color-on-primary-light">.rz-background-color-primary-light</span></div>
        <div class="rz-background-color-primary"><span class="rz-color-on-primary">.rz-background-color-primary</span></div>
        <div class="rz-background-color-primary-dark"><span class="rz-color-on-primary-dark">.rz-background-color-primary-dark</span></div>
        <div class="rz-background-color-primary-darker"><span class="rz-color-on-primary-darker">.rz-background-color-primary-darker</span></div>
        <div class="rz-background-color-secondary-lighter"><span class="rz-color-on-secondary-lighter">.rz-background-color-secondary-lighter</span></div>
        <div class="rz-background-color-secondary-light"><span class="rz-color-on-secondary-light">.rz-background-color-secondary-light</span></div>
        <div class="rz-background-color-secondary"><span class="rz-color-on-secondary">.rz-background-color-secondary</span></div>
        <div class="rz-background-color-secondary-dark"><span class="rz-color-on-secondary-dark">.rz-background-color-secondary-dark</span></div>
        <div class="rz-background-color-secondary-darker"><span class="rz-color-on-secondary-darker">.rz-background-color-secondary-darker</span></div>
        <div class="rz-background-color-info-lighter"><span class="rz-color-on-info-lighter">.rz-background-color-info-lighter</span></div>
        <div class="rz-background-color-info-light"><span class="rz-color-on-info-light">.rz-background-color-info-light</span></div>
        <div class="rz-background-color-info"><span class="rz-color-on-info">.rz-background-color-info</span></div>
        <div class="rz-background-color-info-dark"><span class="rz-color-on-info-dark">.rz-background-color-info-dark</span></div>
        <div class="rz-background-color-info-darker"><span class="rz-color-on-info-darker">.rz-background-color-info-darker</span></div>
        <div class="rz-background-color-success-lighter"><span class="rz-color-on-success-lighter">.rz-background-color-success-lighter</span></div>
        <div class="rz-background-color-success-light"><span class="rz-color-on-success-light">.rz-background-color-success-light</span></div>
        <div class="rz-background-color-success"><span class="rz-color-on-success">.rz-background-color-success</span></div>
        <div class="rz-background-color-success-dark"><span class="rz-color-on-success-dark">.rz-background-color-success-dark</span></div>
        <div class="rz-background-color-success-darker"><span class="rz-color-on-success-darker">.rz-background-color-success-darker</span></div>
        <div class="rz-background-color-warning-lighter"><span class="rz-color-on-warning-lighter">.rz-background-color-warning-lighter</span></div>
        <div class="rz-background-color-warning-light"><span class="rz-color-on-warning-light">.rz-background-color-warning-light</span></div>
        <div class="rz-background-color-warning"><span class="rz-color-on-warning">.rz-background-color-warning</span></div>
        <div class="rz-background-color-warning-dark"><span class="rz-color-on-warning-dark">.rz-background-color-warning-dark</span></div>
        <div class="rz-background-color-warning-darker"><span class="rz-color-on-warning-darker">.rz-background-color-warning-darker</span></div>
        <div class="rz-background-color-danger-lighter"><span class="rz-color-on-danger-lighter">.rz-background-color-danger-lighter</span></div>
        <div class="rz-background-color-danger-light"><span class="rz-color-on-danger-light">.rz-background-color-danger-light</span></div>
        <div class="rz-background-color-danger"><span class="rz-color-on-danger">.rz-background-color-danger</span></div>
        <div class="rz-background-color-danger-dark"><span class="rz-color-on-danger-dark">.rz-background-color-danger-dark</span></div>
        <div class="rz-background-color-danger-darker"><span class="rz-color-on-danger-darker">.rz-background-color-danger-darker</span></div>
        <div class="rz-background-color-series-1"><span class="rz-color-white">.rz-background-color-series-1</span></div>
        <div class="rz-background-color-series-2"><span class="rz-color-white">.rz-background-color-series-2</span></div>
        <div class="rz-background-color-series-3"><span class="rz-color-white">.rz-background-color-series-3</span></div>
        <div class="rz-background-color-series-4"><span class="rz-color-white">.rz-background-color-series-4</span></div>
        <div class="rz-background-color-series-5"><span class="rz-color-white">.rz-background-color-series-5</span></div>
        <div class="rz-background-color-series-6"><span class="rz-color-white">.rz-background-color-series-6</span></div>
        <div class="rz-background-color-series-7"><span class="rz-color-white">.rz-background-color-series-7</span></div>
        <div class="rz-background-color-series-8"><span class="rz-color-white">.rz-background-color-series-8</span></div>
    </div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
    <RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Color on white</RadzenText>
    <div class="color-classes rz-shadow-2 rz-border-radius-2 rz-background-color-white">
        <div><span class="rz-color-white">.rz-color-white</span></div>
        <div><span class="rz-color-base-50">.rz-color-base-50</span></div>
        <div><span class="rz-color-base-100">.rz-color-base-100</span></div>
        <div><span class="rz-color-base-200">.rz-color-base-200</span></div>
        <div><span class="rz-color-base-300">.rz-color-base-300</span></div>
        <div><span class="rz-color-base-400">.rz-color-base-400</span></div>
        <div><span class="rz-color-base-500">.rz-color-base-500</span></div>
        <div><span class="rz-color-base-600">.rz-color-base-600</span></div>
        <div><span class="rz-color-base-700">.rz-color-base-700</span></div>
        <div><span class="rz-color-base-800">.rz-color-base-800</span></div>
        <div><span class="rz-color-base-900">.rz-color-base-900</span></div>
        <div><span class="rz-color-black">.rz-color-black</span></div>
        <div><span class="rz-color-primary-lighter">.rz-color-primary-lighter</span></div>
        <div><span class="rz-color-primary-light">.rz-color-primary-light</span></div>
        <div><span class="rz-color-primary">.rz-color-primary</span></div>
        <div><span class="rz-color-primary-dark">.rz-color-primary-dark</span></div>
        <div><span class="rz-color-primary-darker">.rz-color-primary-darker</span></div>
        <div><span class="rz-color-secondary-lighter">.rz-color-secondary-lighter</span></div>
        <div><span class="rz-color-secondary-light">.rz-color-secondary-light</span></div>
        <div><span class="rz-color-secondary">.rz-color-secondary</span></div>
        <div><span class="rz-color-secondary-dark">.rz-color-secondary-dark</span></div>
        <div><span class="rz-color-secondary-darker">.rz-color-secondary-darker</span></div>
        <div><span class="rz-color-info-lighter">.rz-color-info-lighter</span></div>
        <div><span class="rz-color-info-light">.rz-color-info-light</span></div>
        <div><span class="rz-color-info">.rz-color-info</span></div>
        <div><span class="rz-color-info-dark">.rz-color-info-dark</span></div>
        <div><span class="rz-color-info-darker">.rz-color-info-darker</span></div>
        <div><span class="rz-color-success-lighter">.rz-color-success-lighter</span></div>
        <div><span class="rz-color-success-light">.rz-color-success-light</span></div>
        <div><span class="rz-color-success">.rz-color-success</span></div>
        <div><span class="rz-color-success-dark">.rz-color-success-dark</span></div>
        <div><span class="rz-color-success-darker">.rz-color-success-darker</span></div>
        <div><span class="rz-color-warning-lighter">.rz-color-warning-lighter</span></div>
        <div><span class="rz-color-warning-light">.rz-color-warning-light</span></div>
        <div><span class="rz-color-warning">.rz-color-warning</span></div>
        <div><span class="rz-color-warning-dark">.rz-color-warning-dark</span></div>
        <div><span class="rz-color-warning-darker">.rz-color-warning-darker</span></div>
        <div><span class="rz-color-danger-lighter">.rz-color-danger-lighter</span></div>
        <div><span class="rz-color-danger-light">.rz-color-danger-light</span></div>
        <div><span class="rz-color-danger">.rz-color-danger</span></div>
        <div><span class="rz-color-danger-dark">.rz-color-danger-dark</span></div>
        <div><span class="rz-color-danger-darker">.rz-color-danger-darker</span></div>
        <div><span class="rz-color-series-1">.rz-color-series-1</span></div>
        <div><span class="rz-color-series-2">.rz-color-series-2</span></div>
        <div><span class="rz-color-series-3">.rz-color-series-3</span></div>
        <div><span class="rz-color-series-4">.rz-color-series-4</span></div>
        <div><span class="rz-color-series-5">.rz-color-series-5</span></div>
        <div><span class="rz-color-series-6">.rz-color-series-6</span></div>
        <div><span class="rz-color-series-7">.rz-color-series-7</span></div>
        <div><span class="rz-color-series-8">.rz-color-series-8</span></div>
    </div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
    <RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Color on black</RadzenText>
    <div class="color-classes rz-shadow-2 rz-border-radius-2 rz-background-color-black">
        <div><span class="rz-color-white">.rz-color-white</span></div>
        <div><span class="rz-color-base-50">.rz-color-base-50</span></div>
        <div><span class="rz-color-base-100">.rz-color-base-100</span></div>
        <div><span class="rz-color-base-200">.rz-color-base-200</span></div>
        <div><span class="rz-color-base-300">.rz-color-base-300</span></div>
        <div><span class="rz-color-base-400">.rz-color-base-400</span></div>
        <div><span class="rz-color-base-500">.rz-color-base-500</span></div>
        <div><span class="rz-color-base-600">.rz-color-base-600</span></div>
        <div><span class="rz-color-base-700">.rz-color-base-700</span></div>
        <div><span class="rz-color-base-800">.rz-color-base-800</span></div>
        <div><span class="rz-color-base-900">.rz-color-base-900</span></div>
        <div><span class="rz-color-black">.rz-color-black</span></div>
        <div><span class="rz-color-primary-lighter">.rz-color-primary-lighter</span></div>
        <div><span class="rz-color-primary-light">.rz-color-primary-light</span></div>
        <div><span class="rz-color-primary">.rz-color-primary</span></div>
        <div><span class="rz-color-primary-dark">.rz-color-primary-dark</span></div>
        <div><span class="rz-color-primary-darker">.rz-color-primary-darker</span></div>
        <div><span class="rz-color-secondary-lighter">.rz-color-secondary-lighter</span></div>
        <div><span class="rz-color-secondary-light">.rz-color-secondary-light</span></div>
        <div><span class="rz-color-secondary">.rz-color-secondary</span></div>
        <div><span class="rz-color-secondary-dark">.rz-color-secondary-dark</span></div>
        <div><span class="rz-color-secondary-darker">.rz-color-secondary-darker</span></div>
        <div><span class="rz-color-info-lighter">.rz-color-info-lighter</span></div>
        <div><span class="rz-color-info-light">.rz-color-info-light</span></div>
        <div><span class="rz-color-info">.rz-color-info</span></div>
        <div><span class="rz-color-info-dark">.rz-color-info-dark</span></div>
        <div><span class="rz-color-info-darker">.rz-color-info-darker</span></div>
        <div><span class="rz-color-success-lighter">.rz-color-success-lighter</span></div>
        <div><span class="rz-color-success-light">.rz-color-success-light</span></div>
        <div><span class="rz-color-success">.rz-color-success</span></div>
        <div><span class="rz-color-success-dark">.rz-color-success-dark</span></div>
        <div><span class="rz-color-success-darker">.rz-color-success-darker</span></div>
        <div><span class="rz-color-warning-lighte4r">.rz-color-warning-lighter</span></div>
        <div><span class="rz-color-warning-light">.rz-color-warning-light</span></div>
        <div><span class="rz-color-warning">.rz-color-warning</span></div>
        <div><span class="rz-color-warning-dark">.rz-color-warning-dark</span></div>
        <div><span class="rz-color-warning-darker">.rz-color-warning-darker</span></div>
        <div><span class="rz-color-danger-lighter">.rz-color-danger-lighter</span></div>
        <div><span class="rz-color-danger-light">.rz-color-danger-light</span></div>
        <div><span class="rz-color-danger">.rz-color-danger</span></div>
        <div><span class="rz-color-danger-dark">.rz-color-danger-dark</span></div>
        <div><span class="rz-color-danger-darker">.rz-color-danger-darker</span></div>
        <div><span class="rz-color-series-1">.rz-color-series-1</span></div>
        <div><span class="rz-color-series-2">.rz-color-series-2</span></div>
        <div><span class="rz-color-series-3">.rz-color-series-3</span></div>
        <div><span class="rz-color-series-4">.rz-color-series-4</span></div>
        <div><span class="rz-color-series-5">.rz-color-series-5</span></div>
        <div><span class="rz-color-series-6">.rz-color-series-6</span></div>
        <div><span class="rz-color-series-7">.rz-color-series-7</span></div>
        <div><span class="rz-color-series-8">.rz-color-series-8</span></div>
    </div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
    <RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Border-color</RadzenText>
    <div class="border-color-classes">
        <div class="rz-border-color-white"><span>.rz-border-color-white</span></div>
        <div class="rz-border-color-base-50"><span>.rz-border-color-base-50</span></div>
        <div class="rz-border-color-base-100"><span>.rz-border-color-base-100</span></div>
        <div class="rz-border-color-base-200"><span>.rz-border-color-base-200</span></div>
        <div class="rz-border-color-base-300"><span>.rz-border-color-base-300</span></div>
        <div class="rz-border-color-base-400"><span>.rz-border-color-base-400</span></div>
        <div class="rz-border-color-base-500"><span>.rz-border-color-base-500</span></div>
        <div class="rz-border-color-base-600"><span>.rz-border-color-base-600</span></div>
        <div class="rz-border-color-base-700"><span>.rz-border-color-base-700</span></div>
        <div class="rz-border-color-base-800"><span>.rz-border-color-base-800</span></div>
        <div class="rz-border-color-base-900"><span>.rz-border-color-base-900</span></div>
        <div class="rz-border-color-black"><span>.rz-border-color-black</span></div>
        <div class="rz-border-color-primary-lighter"><span>.rz-border-color-primary-lighter</span></div>
        <div class="rz-border-color-primary-light"><span>.rz-border-color-primary-light</span></div>
        <div class="rz-border-color-primary"><span>.rz-border-color-primary</span></div>
        <div class="rz-border-color-primary-dark"><span>.rz-border-color-primary-dark</span></div>
        <div class="rz-border-color-primary-darker"><span>.rz-border-color-primary-darker</span></div>
        <div class="rz-border-color-secondary-lighter"><span>.rz-border-color-secondary-lighter</span></div>
        <div class="rz-border-color-secondary-light"><span>.rz-border-color-secondary-light</span></div>
        <div class="rz-border-color-secondary"><span>.rz-border-color-secondary</span></div>
        <div class="rz-border-color-secondary-dark"><span>.rz-border-color-secondary-dark</span></div>
        <div class="rz-border-color-secondary-darker"><span>.rz-border-color-secondary-darker</span></div>
        <div class="rz-border-color-info-lighter"><span>.rz-border-color-info-lighter</span></div>
        <div class="rz-border-color-info-light"><span>.rz-border-color-info-light</span></div>
        <div class="rz-border-color-info"><span>.rz-border-color-info</span></div>
        <div class="rz-border-color-info-dark"><span>.rz-border-color-info-dark</span></div>
        <div class="rz-border-color-info-darker"><span>.rz-border-color-info-darker</span></div>
        <div class="rz-border-color-success-lighter"><span>.rz-border-color-success-lighter</span></div>
        <div class="rz-border-color-success-light"><span>.rz-border-color-success-light</span></div>
        <div class="rz-border-color-success"><span>.rz-border-color-success</span></div>
        <div class="rz-border-color-success-dark"><span>.rz-border-color-success-dark</span></div>
        <div class="rz-border-color-success-darker"><span>.rz-border-color-success-darker</span></div>
        <div class="rz-border-color-warning-lighter"><span>.rz-border-color-warning-lighter</span></div>
        <div class="rz-border-color-warning-light"><span>.rz-border-color-warning-light</span></div>
        <div class="rz-border-color-warning"><span>.rz-border-color-warning</span></div>
        <div class="rz-border-color-warning-dark"><span>.rz-border-color-warning-dark</span></div>
        <div class="rz-border-color-warning-darker"><span>.rz-border-color-warning-darker</span></div>
        <div class="rz-border-color-danger-lighter"><span>.rz-border-color-danger-lighter</span></div>
        <div class="rz-border-color-danger-light"><span>.rz-border-color-danger-light</span></div>
        <div class="rz-border-color-danger"><span>.rz-border-color-danger</span></div>
        <div class="rz-border-color-danger-dark"><span>.rz-border-color-danger-dark</span></div>
        <div class="rz-border-color-danger-darker"><span>.rz-border-color-danger-darker</span></div>
        <div class="rz-border-color-series-1"><span>.rz-border-color-series-1</span></div>
        <div class="rz-border-color-series-2"><span>.rz-border-color-series-2</span></div>
        <div class="rz-border-color-series-3"><span>.rz-border-color-series-3</span></div>
        <div class="rz-border-color-series-4"><span>.rz-border-color-series-4</span></div>
        <div class="rz-border-color-series-5"><span>.rz-border-color-series-5</span></div>
        <div class="rz-border-color-series-6"><span>.rz-border-color-series-6</span></div>
        <div class="rz-border-color-series-7"><span>.rz-border-color-series-7</span></div>
        <div class="rz-border-color-series-8"><span>.rz-border-color-series-8</span></div>
    </div>
</RadzenColumn>
</RadzenRow>
<RadzenRow>
    <RadzenColumn Size="12">
        <RadzenText Anchor="colors#video-theme-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
            Theme Colors in Radzen Blazor Studio
        </RadzenText>
        <RadzenText TextStyle="TextStyle.Subtitle1">
            Use Radzen Blazor Studio to theme your Blazor app with customizable colors, utility classes, and personalized palettes.
        </RadzenText>
    <RadzenCard Variant="Variant.Outlined" class="rz-p-7">
        <div class="embed-container">
            <iframe src="https://www.youtube.com/embed/aiYCz3VgCec?&rel=0" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </RadzenCard>
    </RadzenColumn>
</RadzenRow>
<style>
    .colors,
    .color-classes {
        overflow: hidden;
    }
    .colors div {
        padding: 16px;
    }
    .color-classes div {
        padding: 8px 16px;
    }
    .series-colors {
        display: flex;
    }
    .series-colors div {
        flex: 1;
    }
    .border-color-classes div {
        padding: 3px 15px;
        margin: 8px;
        border: 1px solid transparent;
        border-radius: var(--rz-border-radius-2)
    }
</style>
