FlexColorPickerField

Configure a Filament color picker with HEX, RGB and HSL output, opacity, custom palettes, compact swatches and inline controls.

Choose colors with a saturation and brightness area, preset palettes or channel sliders. Use a full-width field, a compact color circle or an inline panel, and choose how the value is saved.

Choose your controls

Four panel layouts, optional opacity and your own palette.

Choose your output

Save HEX, RGB, RGBA, HSL or HSLA strings.

Start with one field

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

FlexColorPickerField::make('brand_color')
    ->label('Brand color')
    ->default('#6366F1')
    ->required();

The default is an advanced panel with HEX output. Opacity is off. Click anywhere on the field to open the panel. The format selector offers HEX, RGB and HSL; the screen-color picker appears when the browser supports it.

Choose a panel layout

Advanced

A saturation and brightness area with a hue slider. Add opacity, channel inputs or preset swatches when needed.

FlexColorPickerField::make('accent')
    ->layout('advanced')
    ->showSwatches()
    ->alpha();

Grid

A grid of preset colors. The default generated grid has 17 columns and 11 rows. Supply your own colors to replace it.

FlexColorPickerField::make('category_color')
    ->layout('grid')
    ->gridColumns(8)
    ->gridRows(6)
    ->closeOnSelect();

Swatches

Circular swatches, with nine default colors. Custom colors wrap onto additional rows.

FlexColorPickerField::make('status_color')
    ->layout('swatches')
    ->gridColors(['#22C55E', '#F59E0B', '#EF4444'])
    ->showFields(false)
    ->closeOnSelect();

Sliders

Three RGB or HSL channel sliders without a color area or numeric input row. Switch between RGB and HSL, or keep a single representation.

FlexColorPickerField::make('surface_color')
    ->layout('sliders')
    ->hsl()
    ->allowedFormats(['hsl', 'rgb'])
    ->alpha()
    ->eyedropper(false);

showSwatches() adds circular presets to the advanced or sliders panel. On a grid panel, it changes the palette to circular swatches. Use gridColors() to choose the colors shown in any palette.

Choose the field appearance

Full field, icon or color circle

Full field

FlexColorPickerField::make('brand_color')
    ->trigger('field')
    ->showValue();

iconOnly() shows a palette icon colored with the current value. swatchOnly() shows a color circle without an outer input frame. Both omit the value text. Alternatively, use trigger('icon') or trigger('swatch') directly.

Sizes, variants and rounding

The main field shares FLEX Text Input’s appearance: three sizes, four variants, rounding and an optional focus outline. These settings affect the field; panelWidth() and panelRadius() configure the panel separately.

FlexColorPickerField::make('accent')
    ->size('sm')
    ->variant('secondary')
    ->rounding('full')
    ->focusOutline();

Setting	Choices	Default
size()	sm, md, lg	md
variant()	primary, secondary, soft, flat	primary
rounding()	native, none, sm, md, lg, xl, full	Shared field_rounding setting, normally md
focusOutline()	true, false	true

See Configuration for shared appearance settings. The picker supports light and dark themes. Its format selector uses the FLEX Select control, and its value inputs use shared FLEX input controls.

Always-visible panel

inline() displays the controls directly in the form and removes the opening trigger. closeOnSelect() does not hide an inline panel.

FlexColorPickerField::make('theme_color')
    ->inline()
    ->showSwatches()
    ->alpha()
    ->panelWidth(320)
    ->panelRadius(24);

Formats and saved values

The saved format and the editing format are separate. format() determines how new color selections are written to the field. Changing the format selector changes the editing controls without changing this setting.

HEX

FlexColorPickerField::make('accent')->hex();

Output setting	Example after selection	With opacity below 100%
hex()	#6366F1	Eight-digit HEX, such as #6366F180
rgb()	rgb(99, 102, 241)	RGBA
rgba()->alpha()	rgba(99, 102, 241, 1)	RGBA
hsl()	hsl(239, 84%, 67%)	HSLA
hsla()	hsla(239, 84%, 67%, 1)	HSLA

format('hex'), format('rgb'), format('rgba'), format('hsl') and format('hsla') are equivalent configuration choices. hsla() enables opacity automatically; rgba() does not. Use alpha() with RGBA output.

Limit the editing formats

FlexColorPickerField::make('accent')
    ->hex()
    ->allowedFormats(['hex', 'rgb']);

FlexColorPickerField::make('hex_color')
    ->allowedFormats(['hex']);

A single allowed format hides the selector. If no output format was explicitly set, the first allowed format becomes the output format. An explicitly configured output format must be included in allowedFormats().

With opacity disabled, rgba and hsla configuration choices become rgb and hsl. Duplicate choices are removed.

Existing valid color strings are not converted simply by opening a form. Conversion to the configured output happens when the user changes the color. allowedFormats() controls editing choices; it does not reject an existing color solely because it uses another supported representation.

Opacity

Opacity is off by default. Enable it to show the opacity slider and preserve transparency. opacity() is an alias for alpha().

FlexColorPickerField::make('overlay_color')
    ->rgba()
    ->alpha()
    ->default('rgba(99, 102, 241, 0.5)');

FlexColorPickerField::make('solid_color')
    ->hex()
    ->alpha(false);

With opacity off, a transparent color entered interactively becomes opaque. A transparent value submitted directly to the server fails the field’s validation. Use an opaque default when opacity is off.

Custom palettes

Show brand colors alongside the full picker:

FlexColorPickerField::make('brand_color')
    ->showSwatches()
    ->gridColors([
        '#6366F1',
        '#8B5CF6',
        '#0F172A',
        '#FFFFFF',
    ]);

Or offer only a compact preset interface:

FlexColorPickerField::make('badge_color')
    ->swatchOnly()
    ->layout('swatches')
    ->gridColors(['#22C55E', '#F59E0B', '#EF4444'])
    ->showFields(false)
    ->closeOnSelect();

gridColors() accepts up to 512 valid color strings and removes duplicate strings. null or an empty list restores the default palette. Generated grids allow 1–32 columns and 1–32 rows, with at most 512 cells in total. Grid dimensions do not generate additional colors when you supply a custom palette.

A palette configures the choices shown to the user; it is not a server-side allowlist. If your application requires one of a fixed set of saved values, add an explicit validation rule.

use Illuminate\Validation\Rule;

FlexColorPickerField::make('status_color')
    ->hex()
    ->layout('swatches')
    ->gridColors(['#22C55E', '#F59E0B', '#EF4444'])
    ->showFields(false)
    ->required()
    ->rule(Rule::in(['#22C55E', '#F59E0B', '#EF4444']));

Show only the controls you need

Hide the format selector, keep the screen-color picker

FlexColorPickerField::make('accent')
    ->hex()
    ->showFormatSelector(false)
    ->eyedropper();

The screen-color picker remains available in advanced and sliders layouts even when the selector or value fields are hidden. With a visible selector, its button sits beside that selector. Otherwise, it sits beside the sliders. It never needs a separate full-width row.

Use one color-string input instead of separate channels

FlexColorPickerField::make('accent')
    ->rgb()
    ->channelFields(false)
    ->alpha();

This displays one color-string input. When opacity is enabled, it also displays a separate opacity number input. With channelFields(true), RGB and HSL have individual channel inputs; HEX has one string input.

Hide numeric fields

FlexColorPickerField::make('accent')
    ->showFields(false)
    ->showSwatches();

This hides the numeric/string input section and its format selector. In the sliders layout, the format selector is independent of showFields(); use showFormatSelector(false) to hide it there.

Hide slider labels or the main value text

FlexColorPickerField::make('accent')
    ->showChannelLabels(false)
    ->showValue(false);

showChannelLabels(false) hides the headings and numeric readouts above sliders. showValue(false) hides the main field’s color text. Neither removes the controls’ accessible labels.

Turn off the screen-color picker

FlexColorPickerField::make('accent')
    ->eyedropper(false);

The screen-color picker is available only in advanced and sliders layouts, when enabled and supported by the browser. Unsupported browsers hide the button and retain the other controls.

Panel position and motion

FlexColorPickerField::make('accent')
    ->placement('bottom-start')
    ->panelWidth(300)
    ->panelRadius(24)
    ->animationDuration(150);

The default dropdown is aligned to the start edge of the field with a small gap. It follows the field while scrolling or resizing, stays inside the viewport, and can flip above the field when there is not enough room below.

Method	Default	Supported values
placement()	bottom-start	bottom-start, bottom-end, top-start, top-end
panelWidth()	248	220–420 pixels; dropdown width is limited by the viewport
panelRadius()	20	0–32 pixels, independent of field rounding
animationDuration()	150	0–500 milliseconds; exit takes two thirds of the entry duration

Use animationDuration(0) to disable transitions. The picker also respects reduced-motion preferences.

Validation and database storage

The field stores a color string, or an empty value when optional. Use a nullable string column for optional colors; a length of 128 accommodates every accepted value. No JSON column or color-specific model cast is required.

The built-in server rule checks color syntax and channel ranges. Supported inputs are:

Representation	Accepted form
HEX	Three, six or eight hexadecimal digits after #
RGB / RGBA	Comma-separated integer channels from 0 to 255; alpha from 0 to 1
HSL / HSLA	Hue from 0 to 360; saturation and lightness from 0% to 100%; alpha from 0 to 1

Named colors such as red, four-digit HEX, CSS variables, URLs, CSS expressions and strings longer than 128 characters are not accepted. Modern space-separated CSS color notation is not supported. Empty values are allowed unless you use required().

FlexColorPickerField::make('brand_color')
    ->label('Brand color')
    ->default('#6366F1')
    ->required()
    ->helperText('Choose the color used on your public profile.');

Invalid text in the picker shows an error and keeps the previous valid form value. Add your application’s rules with rule() or rules(); use Data & validation for form saving guidance.

Read-only and disabled fields

FlexColorPickerField::make('brand_color')->readOnly();

FlexColorPickerField::make('brand_color')->disabled();

Both prevent opening a dropdown picker or changing inline controls. Read-only keeps the field’s normal saving behavior; disabled fields follow Filament’s disabled-field saving behavior. Decide separately whether the value should be included when your form is saved.

React to a changed color

use Filament\Schemas\Components\Utilities\Set;

FlexColorPickerField::make('brand_color')
    ->live()
    ->afterStateUpdated(function (Set $set, ?string $state): void {
        $set('preview_color', $state);
    });

Dragging the color area updates its preview as you move and commits the field value on release. Sliders commit on their change event. Use the normal Filament state callbacks for application behavior.

Keyboard controls

Control	Keyboard behavior
Field trigger	Enter or Space opens the panel
Color area	Arrow keys adjust saturation or brightness; Shift uses a larger step
Color area	Home sets saturation to 0%; End sets it to 100%
Sliders	Standard range-input keyboard controls
Value inputs	Enter or leaving the input applies a valid value
Dropdown panel	Escape closes it and returns focus to the trigger

You can also drag the color area and sliders with a pointer or touch. Opening the nested format selector keeps the color picker available.

Configuration reference

These are the Color Picker’s configuration methods. Setters with a value parameter also accept a closure, so each field can resolve its settings from the current form or record.

Method	Default	Purpose
layout()	advanced	Choose advanced, grid, swatches or sliders
trigger()	field	Choose field, icon or swatch
iconOnly() / swatchOnly()	—	Select a compact trigger and hide its value text
inline()	false	Keep the panel visible in the form
format()	hex	Choose the output format
hex() / rgb() / rgba() / hsl() / hsla()	—	Output-format shortcuts; hsla() also enables opacity
allowedFormats()	hex, rgb, hsl	Editing choices; alpha adds rgba and hsla by default; 1–5 entries
alpha() / opacity()	false	Enable transparency and opacity controls
eyedropper()	true	Offer screen-color selection where supported
showValue()	true	Show the color string in a full field
showFields()	true	Show panel value inputs; sliders do not have these inputs
channelFields()	true	Separate RGB/HSL inputs instead of one color-string input
showFormatSelector()	true	Show editing-format choices when more than one is allowed
showChannelLabels()	true	Show slider headings and numeric readouts
showSwatches()	false	Show circular palette presets
closeOnSelect()	false	Close a dropdown after selecting a palette color
gridColors()	Default palette	Supply up to 512 colors, or reset with null / []
gridColumns() / gridRows()	17 / 11	Generated grid dimensions, 1–32 each, at most 512 cells
panelWidth() / panelRadius()	248 / 20	Panel dimensions in pixels
placement()	bottom-start	Preferred dropdown alignment
animationDuration()	150	Entry duration in milliseconds
variant() / size()	primary / md	Shared FLEX field appearance
rounding() / focusOutline()	Shared rounding / true	Field rounding and focus outline

Invalid layout names, unsupported formats and out-of-range panel or grid settings are rejected when the field configuration is resolved.