Skip to main content
FlexColorPickerField ← Back to Table of Contents

​
Summary

Full-featured color picker with two distinct layouts: Advanced (HSV square + hue/alpha sliders + eyedropper) and Grid (preset swatches). Supports multiple output formats (Hex, RGB, HSL, RGBA) and features a modern, compact UI.
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\FlexColorPickerField
State typestring|null — color in the configured output format
FieldTypeflex_color_picker
Playgroundflex-color-picker slug in Flex Fields playground

​
Basic usage

​
Advanced HSV Picker

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexColorPickerField;

FlexColorPickerField::make('brand_color')
    ->label('Brand color')
    ->alpha() // Enable opacity
    ->required();

​
Grid Palette

FlexColorPickerField::make('accent')
    ->layout(FlexColorPickerField::LAYOUT_GRID)
    ->gridColumns(10)
    ->gridRows(5)
    ->rgba();

​
State & validation

​
Stored value

State is a CSS color string in the format selected via hex(), rgb(), hsl(), or rgba(). 
$record->brand_color; // '#6366F1' or 'rgba(99, 102, 241, 0.8)'

​
Validation rules (built-in)

Ensures the input is a valid color string matching the expected format.

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
layout(string $layout)Setup'advanced'advanced or grid
hex()FormatactiveSet output format to Hex
rgb()Format—Set output format to RGB
hsl()Format—Set output format to HSL
rgba()Format—Set output format to RGBA
format(string $format)Setup'hex'hex, rgb, hsl, rgba
alpha(bool $enabled)SetupfalseEnable opacity slider and inputs
eyedropper(bool $enabled)SetuptrueShow browser EyeDropper button
gridColumns(int $cols)Setup17Grid columns (generated palette)
gridRows(int $rows)Setup11Grid rows (generated palette)
gridColors(array $colors)SetupnullCustom hex list for grid layout
variant(string $variant)Setup'primary'primary, secondary, flat
size(string $size)Setup'md'sm, md, lg
rounding(string $rounding)SetupconfigBorder radius token

​
Real-world examples

​
Transparent Background Color

FlexColorPickerField::make('bg_color')
    ->rgba()
    ->alpha()
    ->label('Background Color')
    ->helperText('Select a color with transparency');

​
Fixed Palette Selection

FlexColorPickerField::make('theme')
    ->layout('grid')
    ->gridColors([
        '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff'
    ])
    ->withoutPrefix();

​
Playground

/admin/flex-fields-playground/flex-color-picker See Playground for setup.
ComponentWhen to use instead
ColorSwatchFieldSimple preset selection with keys
FlexTextInputStandard text input for hex codes

​
CSS classes (reference)

ClassRole
fff-flex-color-pickerRoot wrapper
fff-flex-color-picker__shellTrigger + panel container
fff-flex-color-picker__triggerOpens picker panel
fff-flex-color-picker__previewColor swatch in trigger
fff-flex-color-picker__panelDropdown panel
fff-flex-color-picker__saturationS/V square (advanced)
fff-flex-color-picker__eyedropperScreen color picker button
fff-flex-color-picker__hueHue slider
fff-flex-color-picker__alphaOpacity slider track
fff-flex-color-picker__gridGrid swatch container
fff-flex-color-picker__bottom-barFormat + value + opacity inputs