MudBlazor

Color Picker

A short description of the component.

Basic Usage

<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 DisableToolbar="DisableToolbar" DisableAlpha="DisableAlpha" DisableColorField="DisableColorField" DisablePreview="DisablePreview" DisableSliders="DisableSliders" DisableInputs="DisableInputs" DisableModeSwitch="DisableModeSwitch" 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-Checked="@DisableToolbar" Label="Disable Toolbar" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableAlpha" Label="Disable Alpha" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableColorField" Label="Disable Color Field" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisablePreview" Label="Disable Preview" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableSliders" Label="Disable Sliders" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableInputs" Label="Disable Inputs" Color="Color.Primary" Dense="true" />
            <MudCheckBox @bind-Checked="@DisableModeSwitch" Label="Disable Mode Switch" Color="Color.Primary" Dense="true" />
            <MudSelect Label="Color Picker Mode" Variant="Variant.Outlined" OffsetY="true" 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 DisableToolbar { get; set; } = true;
    public bool DisableAlpha { get; set; }
    public bool DisableColorField { get; set; }
    public bool DisablePreview { get; set; }
    public bool DisableSliders { get; set; }
    public bool DisableInputs { get; set; }
    public bool DisableModeSwitch { get; set; }

    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.

<MudGrid>
    <MudItem xs="12" sm="6" md="3">
        <MudColorPicker Label="Spectrum" ColorPickerView="ColorPickerView.Spectrum" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudColorPicker Label="Palette" ColorPickerView="ColorPickerView.Palette" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudColorPicker Label="Grid" ColorPickerView="ColorPickerView.Grid" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudColorPicker Label="Compact Grid" ColorPickerView="ColorPickerView.GridCompact" />
    </MudItem>
</MudGrid>

Color Picker Mode

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

<MudColorPicker Label="HSL" ColorPickerMode="ColorPickerMode.HSL" DisableModeSwitch="true" />

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 DisableAlpha to true, doing so will remove any transparency from the color and output RGB, HSL, HEX instead of RGBA, HSLA and HEXA.

<MudColorPicker Label="Disabled Alpha" DisableAlpha="true" />

Switch Mode

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

<MudColorPicker Label="Switch Disabled" DisableModeSwitch="true" />

Dialog Mode

<MudColorPicker DisableToolbar="false" Label="Dialog Picker" PickerVariant="PickerVariant.Dialog" />

Inline Mode

<MudColorPicker DisableToolbar="false" 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" DisableModeSwitch="true" Value="_pickerColor" ValueChanged="UpdateSelectedColor" />
        <div class="pa-2">
            <MudText Typo="Typo.h6" Class="mx-1">Gradient Colors</MudText>

            <MudList Clickable="true" SelectedItemChanged="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 {
    public MudColor _gradientPrimary = "#594AE2";
    public MudColor _gradientSecondary = "#FF4081";
    public MudColor _pickerColor = "#594AE2";

    int degrees = 90;

    bool _isFirstColor = true;

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

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

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

Disable Drag effect

R

G

B

A

<MudColorPicker DisableDragEffect="true" PickerVariant="PickerVariant.Static" />
An error has occurred. This application may no longer respond until reloaded. Reload 🗙