Color Picker
Color selection with multiple format support (Hex, RGB, HSL) and preset color swatches.
Compact Size (Default)
Space-efficient picker with smaller canvas and fewer presets. Ideal for forms.
Selected: #3B82F6
Large Size
Full-featured picker with larger canvas and more presets.
Selected: #EC4899
Canvas + Presets Only
No RGB inputs, just canvas gradient and quick color swatches.
Selected: #F59E0B
Minimal Picker
Canvas and sliders only - no RGB inputs or preset swatches.
Selected: #10B981
RGB Format
Returns color in RGB format: rgb(r, g, b).
Selected: rgb(239, 68, 68)
HSL Format
Returns color in HSL format: hsl(h, s%, l%).
Selected: hsl(142, 71%, 45%)
With Alpha Channel
Includes opacity slider for transparent colors.
Selected: #8B5CF6AA
RGBA Format
RGB with alpha: rgba(r, g, b, a).
Selected: rgba(236, 72, 153, 0.75)
Disabled State
A disabled color picker that cannot be changed.
With Form Validation
Color picker integrated with Blazor form validation.
All Formats Side by Side
Compare different color format outputs with the same visual picker.
Hex
#EC4899
RGB
rgb(236, 72, 153)
HSL
hsl(330, 81%, 60%)
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Color | string? | — | The current color value in the selected format. |
| Format | ColorFormat | Hex | Output color format. Options: Hex, RGB, HSL. |
| Size | ColorPickerSize | Compact | Picker size. Options: Compact, Large. |
| ShowInputs | bool | true | When false, hides the RGB/Hex text inputs. |
| ShowPresets | bool | true | When false, hides the color preset swatches. |
| ShowAlpha | bool | false | When true, shows an opacity/alpha slider. |
| Disabled | bool | false | When true, the picker is non-interactive. |
| Required | bool | false | When true, marks the field as required for validation. |
| ShowValidationError | bool | false | When true, shows validation error messages. |
| Class | string? | — | Additional CSS classes appended to the root element. |