ComponentsPickers and uploads
Color picker
A field that opens a spectrum, a grid or a palette of colors and returns a MudColor. Choose it for themes, labels and drawing tools; offer a short palette when only a few colors make sense.
Basic usage
Bind a MudColor with @bind-Value. MudColor converts from and to hex, RGB and HSL strings.
#1f5f5b
rgb(31,95,91)
Spectrum, palette and grids
ColorPickerView picks the starting surface. The toolbar lets people switch between views unless it is hidden.
Spectrum
Palette
Grid
GridCompact
Modes, alpha and slimmer pickers
ColorPickerMode chooses the input fields. Hide alpha when transparency makes no sense, and hide sliders, inputs or preview for a compact picker.
HSL inputs, no mode switch
Hex input, alpha hidden
Color field only
Shared value: rgba(224,184,92,0.8)
A custom palette
Palette replaces the quick colors with your own. MudColor can generate tints, shades and gradients.
Shelf label inks
Five tints and shades of each of the bookshop's three inks, generated with
MudColor.GenerateTintShadePalette.
Every variant and adornment
Closed, the picker is a text field showing the color value, with the same Variant and adornment options.
| Variant ↓ · Adornment → | None | Start | End |
|---|---|---|---|
| Text | |||
| Filled | |||
| Outlined |
Binding to a live preview
Two pickers drive a poster preview and its contrast ratio, recalculated as you drag.
Contrast 6.2:1 · passes WCAG AA for body text (4.5:1)
Saturn at opposition
The rings tilt toward us this autumn. Telescopes on the roof from 20:00; free entry, warm coats advised.
Typing, disabled and read-only
Editable fields accept a typed color such as #1F5F5B or rgb(31, 95, 91).
Value: #1f5f5bff
<MudColorPicker @bind-Value="_color" PickerVariant="PickerVariant.Static" />