Color Picker

A sophisticated and customizable pop-up for choosing a color.

API
Basic Usage

@using MudBlazor.Utilities

<MudColorPicker Label="Basic Color Picker" @bind-Text="_colorValue" Style="@($"color: {_colorValue};")" Placeholder="Select Color" />

@code {
    private string _colorValue;
}
Parts

All parts of the color picker can be removed individually if you just want certain functionality.

R
G
B
A
Options
<MudGrid>
    <MudItem md="8" Class="d-flex justify-center">
        <MudColorPicker ShowToolbar="ShowToolbar" ShowAlpha="ShowAlpha" ShowColorField="ShowColorField" ShowPreview="ShowPreview" ShowSliders="ShowSliders" ShowInputs="ShowInputs" ShowModeSwitch="ShowModeSwitch" 
                ColorPickerMode="ColorPickerMode" PickerVariant="PickerVariant.Static" />
    </MudItem>
    <MudItem md="4">
        <MudPaper Height="400px" Class="px-4 pt-2 pb-4">
            <MudText Typo="Typo.h6">Options</MudText>
            <MudCheckBox @bind-Value="ShowToolbar" Label="Show Toolbar" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowAlpha" Label="Show Alpha" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowColorField" Label="Show Color Field" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowPreview" Label="Show Preview" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowSliders" Label="Show Sliders" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowInputs" Label="Show Inputs" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Value="ShowModeSwitch" Label="Show Mode Switch" Color="Color.Primary" Dense="true" />
            <MudSelect Label="Color Picker Mode" Variant="Variant.Outlined" Dense="true" Margin="Margin.Dense" @bind-Value="ColorPickerMode" Class="mt-4">
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.RGB">RGB</MudSelectItem>
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HSL">HSL</MudSelectItem>
                <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HEX">HEX</MudSelectItem>
            </MudSelect>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    public bool ShowToolbar { get; set; } = true;
    public bool ShowAlpha { get; set; } = true;
    public bool ShowColorField { get; set; } = true;
    public bool ShowPreview { get; set; } = true;
    public bool ShowSliders { get; set; } = true;
    public bool ShowInputs { get; set; } = true;
    public bool ShowModeSwitch { get; set; } = true;

    public ColorPickerMode ColorPickerMode { get; set; }
}
Color Picker View

The default view can be changed with ColorPickerView and can be useful when you want a minimalistic color picker or force the use of certain colors.

<MudColorPicker Label="Spectrum" ColorPickerView="ColorPickerView.Spectrum" />
<MudColorPicker Label="Palette" ColorPickerView="ColorPickerView.Palette" />
<MudColorPicker Label="Grid" ColorPickerView="ColorPickerView.Grid" />
<MudColorPicker Label="Compact Grid" ColorPickerView="ColorPickerView.GridCompact" />
Color Picker Mode

You can set the default mode of the colorpicker with the ColorPickerMode prop. This can be useful combined with ShowModeSwitch="false" to force the usage of a specific color mode.

<MudColorPicker Label="HSL" ColorPickerMode="ColorPickerMode.HSL" ShowModeSwitch="false" />
Custom Palette

The default palette can be changed with Palette property. The first five colors show up in the quick view when clicking the color preview dot.

R
G
B
A
@using MudBlazor.Utilities

<MudColorPicker PickerVariant="PickerVariant.Static" ColorPickerView="ColorPickerView.Palette" Palette="CustomPalette" />

@code {
    public IEnumerable<MudColor> CustomPalette { get; set; } = new MudColor[]
    {
        "#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5",
        "#FFEBEE", "#FCE4EC", "#F3E5F5", "#EDE7F6", "#E8EAF6",
        "#FFCDD2", "#F8BBD0", "#E1BEE7", "#D1C4E9", "#C5CAE9",
        "#EF9A9A", "#F48FB1", "#CE93D8", "#B39DDB", "#9FA8DA",
        "#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB",
        "#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0",
        "#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB"
    };
}
Alpha

You can disable the alpha slider and its textfield counterpart by setting ShowAlpha="false". Doing so will remove any transparency from the color and output RGB, HSL, HEX instead of RGBA, HSLA and HEXA.

<MudColorPicker Label="Disabled Alpha" ShowAlpha="false" />
Switch Mode

Switch Mode lets the user switch betwen RGB, HSL and HEX the button can be disabled with ShowModeSwitch="false", this can be useful if you want to control what type of input/output should be used.

<MudColorPicker Label="Switch Disabled" ShowModeSwitch="false" />
Dialog Mode

<MudColorPicker ShowToolbar="true" Label="Dialog Picker" PickerVariant="PickerVariant.Dialog" />
Inline Mode

<MudColorPicker ShowToolbar="true" Label="Dialog Picker" PickerVariant="PickerVariant.Inline" />
Static Mode

R
G
B
A
<MudColorPicker PickerVariant="PickerVariant.Static" />
Elevation

You can change the elevation with the Elevation parameter. The default value is 0 for static and 8 for inline.

R
G
B
A
R
G
B
A
<MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="1"/>
<MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="12" />
Example Usage
R
G
B
A
Gradient Colors

Degrees

@using MudBlazor.Utilities


<MudPaper Elevation="0" Class="mud-width-full mud-height-full d-flex justify-center align-end pb-8" MinHeight="600px" Style="@($"background-image:linear-gradient({_degrees}deg, {_gradientPrimary.ToString(MudColorOutputFormats.RGBA)} 0%, {_gradientSecondary.ToString(MudColorOutputFormats.RGBA)} 100%);")">
    <MudPaper Class="d-flex">
        <MudColorPicker Rounded="true" Class="rounded-tr-0" PickerVariant="PickerVariant.Static" ShowModeSwitch="false" Value="_pickerColor" ValueChanged="UpdateSelectedColor" />
        <div class="pa-2">
            <MudText Typo="Typo.h6" Class="mx-1">Gradient Colors</MudText>

            <MudList T="string" SelectedValueChanged="ChangeSelectedColor">
                <MudListItem Text="1">
                    <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientPrimary};")"></div>
                </MudListItem>
                <MudListItem Text="2">
                    <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientSecondary};")"></div>
                </MudListItem>
            </MudList>
            <MudSlider Min="0" Max="360" Step="1" @bind-Value="_degrees" Class="px-2">Degrees</MudSlider>
        </div>
    </MudPaper>
</MudPaper>

@code {
    private MudColor _gradientPrimary = "#594AE2";
    private MudColor _gradientSecondary = "#FF4081";
    private MudColor _pickerColor = "#594AE2";

    private int _degrees = 90;

    bool _isFirstColor = true;

    public void ChangeSelectedColor(string item)
    {
        if (item == "1")
        {
            _isFirstColor = true;
            _pickerColor = _gradientPrimary;
            UpdateSelectedColor(_gradientPrimary);
        }
        else if (item == "2")
        {
            _isFirstColor = false;
            _pickerColor = _gradientSecondary;
            UpdateSelectedColor(_gradientSecondary);
        }
    }

    public void UpdateSelectedColor(MudColor value)
    {
        _pickerColor = value;

        if (_isFirstColor)
        {
            _gradientPrimary = value;
        }
        else
        {
            _gradientSecondary = value;
        }
    }
}
Drag Interaction

The ThrottleInterval property controls how long to wait until the color is updated while dragging the pointer in the spectrum view. If the DragEffect property is set to false, the color selector (circle) will no longer follow the pointer.

R
G
B
A
<MudStack>
    <MudColorPicker ThrottleInterval="Interval" DragEffect="@Draggable" PickerVariant="PickerVariant.Static" />

    <MudNumericField T="int" @bind-Value="Interval" Label="Throttle interval" />

    <MudCheckBox T="bool" @bind-Value="Draggable" Label="Allow dragging the pointer" />
</MudStack>

@code {
    public int Interval { get; set; } = 100;
    public bool Draggable { get; set; } = true;
}
An unhandled error has occurred. Reload 🗙