Forms

TwColorPicker

TwColorPicker is a Blazor colour picker component. Bind Value, choose an OutputFormat, and toggle ShowAlpha and ShowModeSwitch. Supports input variants.

Last updated 25 September 2026

Basic Color Picker

Bind Value to let users pick a color from a labeled color picker input.

Choose Color

With Mode Switch

Set ShowModeSwitch to let users toggle between color input modes (e.g. hex and RGB).

Primary Color

With Alpha Channel

Set ShowAlpha to add an alpha channel slider for transparency.

Overlay Color

Razor

<TwColorPicker Label="Overlay Color" @bind-Value="OverlayColor" ShowAlpha ShowModeSwitch />

CSHARP

@code {
    private string OverlayColor { get; set; } = "#f59e0bff";
}

Input Variants

Use the Variant property to switch between default, outlined and filled input styles.

Primary Color

Accent Color

Theme Color

Razor

<div class="grid gap-4">
    <TwColorPicker Label="Primary Color" @bind-Value="PrimaryColor" Variant="InputVariant.Default" ShowModeSwitch />
    <TwColorPicker Label="Accent Color" @bind-Value="AccentColor" Variant="InputVariant.Outlined" ShowModeSwitch />
    <TwColorPicker Label="Theme Color" @bind-Value="ThemeColor" Variant="InputVariant.Filled" />
</div>

CSHARP

@code {
    private string ThemeColor { get; set; } = "#8b5cf6";
    private string AccentColor { get; set; } = "#ec4899";
}

Dense Color Picker

Set Dense for a more compact input with a smaller height and text size. Every single-line input shares the same dense height, so they line up when used side by side.

Dense Color

Razor

<TwColorPicker Label="Dense Color" @bind-Value="PrimaryColor" Dense />

Disabled State

Use the Disabled property to prevent interaction with the color picker.

Disabled Color

Razor

<TwColorPicker Label="Disabled Color" Value="#cccccc" Disabled />

Output Format

Use OutputFormat to control whether the bound value is emitted as hex or RGB, regardless of the input format.

Hex (default)

Value: #3b82f6

RGB with Alpha

Value: rgba(16, 185, 129, 0.8)

HSL Input → RGB Output

Value: hsl(262, 83%, 58%)

Razor

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    @* Output as Hex (default) *@
    <div>
        <TwColorPicker Label="Hex (default)" @bind-Value="HexColor" />
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Value: @HexColor</p>
    </div>

    @* Output as RGB with alpha *@
    <div>
        <TwColorPicker Label="RGB with Alpha"
                       @bind-Value="RgbColor"
                       OutputFormat="ColorMode.Rgb"
                       ShowAlpha="true" />
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Value: @RgbColor</p>
    </div>

    @* Input format is auto-detected, independent of output format *@
    <div>
        <TwColorPicker Label="HSL Input → RGB Output"
                       @bind-Value="HslToRgbColor"
                       OutputFormat="ColorMode.Rgb" />
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Value: @HslToRgbColor</p>
    </div>
</div>

CSHARP

@code {
    private string HexColor { get; set; } = "#3b82f6";
    private string RgbColor { get; set; } = "rgba(16, 185, 129, 0.8)";
    private string HslToRgbColor { get; set; } = "hsl(262, 83%, 58%)";
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwColorPickerTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Swatch`	string
`SwatchDisabled`	string
`SwatchHover`	string
`InputContainer`	string
`DialogPosition`	string
`PreviewSwatch`	string
`SelectorSquare`	string
`SelectorThumb`	string
`SliderTrack`	string
`SliderThumb`	string
`AlphaLabel`	string
`ActionBar`	string
`ControlRow`	string
`Body`	string
`SliderRow`	string
`HueSliderTouch`	string
`InputColumn`	string
`ModeSwitchButton`	string
`AlphaReadoutAlign`	string

Full reference: TwColorPickerTheme on the API docs.