Skip to main content
The color picker component provides an interface for selecting colors.

​
Basic Usage

use Filament\Forms\Components\ColorPicker;

ColorPicker::make('color')

​
Available Methods

​
format
method
Sets the color format (hex, rgb, rgba, hsl, hsla).
ColorPicker::make('color')
    ->format('rgba')
​
swatches
method
Adds preset color swatches.
ColorPicker::make('color')
    ->swatches([
        '#ff0000',
        '#00ff00',
        '#0000ff',
    ])

​
Common Patterns

​
Brand Color

ColorPicker::make('primary_color')
    ->label('Primary Brand Color')
    ->default('#3b82f6')
    ->required()

​
Theme Colors

ColorPicker::make('theme_color')
    ->swatches([
        '#ef4444', // Red
        '#f59e0b', // Orange
        '#10b981', // Green
        '#3b82f6', // Blue
        '#8b5cf6', // Purple
    ])

​
RGBA Color

ColorPicker::make('overlay_color')
    ->format('rgba')
    ->default('rgba(0, 0, 0, 0.5)')

​
Background Color

ColorPicker::make('background_color')
    ->swatches([
        '#ffffff',
        '#f3f4f6',
        '#e5e7eb',
        '#d1d5db',
    ])
    ->default('#ffffff')

Build docs developers (and LLMs) love

Get started for freeTalk to us