Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Color Picker
A visual color selection interface with a saturation/brightness area, hue slider, optional alpha channel, hex/RGB inputs, and preset color swatches. Use it in theme builders, design tools, or any form that requires precise color input.
Default
The default
ColorPicker opens a popover with a color area, hue slider, hex/RGB inputs, and preset swatches. Bind to a hex string with @bind-Value for two-way data binding. The trigger button displays a swatch preview alongside the current hex value.
Loading example…
With Alpha Channel
Enable the
ShowAlpha parameter to add an alpha transparency slider and an alpha percentage input. The output includes an alpha hex suffix (e.g. #3b82f680), which is useful for semi-transparent overlays and glass effects.
Loading example…
RGB Format
Set
Format to ColorFormat.RGB to output the selected color as an rgb() or rgba() string. The HSL format is also available for hue-based workflows. Regardless of the output format, the picker always displays hex and RGB inputs internally.
Loading example…
HSL Format
Set
Format to ColorFormat.HSL to output the selected color as an hsl() string. This is particularly useful for CSS custom properties and design tokens that use hue-saturation-lightness representation.
Loading example…
Custom Presets
Provide a
PresetColors array to replace the default swatches with brand-specific or project-specific colors. Each preset is a clickable swatch that instantly sets the selected color, making it easy for users to choose from a curated palette.
Loading example…
Compact Mode
Set both
ShowInputs and ShowPresets to false for a minimal picker that only shows the color area and hue slider. This compact mode works well in space-constrained interfaces like inline editors or toolbar popovers.
Loading example…
Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes to the trigger button. This example demonstrates a wider trigger with a gradient border and rounded-full shape, useful for branding-focused color pickers in design tools.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The trigger button renders with reduced opacity and the popover does not open on click, making it suitable for read-only color displays or locked fields.
Loading example…
Theme Color Picker
A real-world composition showing multiple
ColorPicker instances for a theme customisation panel. Each picker is labelled with a Label component and controls a different design token, demonstrating how the component integrates into larger form layouts.
Loading example…