ColorPicker Component
Color selection with multiple format support (Hex, RGB, HSL) and preset color swatches.
Minimal Picker
Canvas and sliders only - no RGB inputs or preset swatches.
Selected: #10B981
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. Better for dedicated color selection.
Selected: #EC4899
Canvas + Presets Only
No RGB inputs, just canvas gradient and quick color swatches.
Selected: #F59E0B
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%)