Skip to content

Overview

AuraColorPicker extends Filament\Forms\Components\ColorPicker and adds a single opt-in method: ->showPalette(). When enabled, an 11-shade OKLCH strip renders below the input and updates whenever the field state changes.

This is the fastest way to let end-users pick a brand color and preview the full palette that will drive your primary before they commit.

Usage

use BlueStarSystem\AuraFilament\Forms\Components\AuraColorPicker;

AuraColorPicker::make('brand_color')
    ->label('Brand color')
    ->showPalette()
    ->live(onBlur: true)
    ->helperText('Commits on blur and refreshes the palette below.');

Because the field extends Filament's own ColorPicker, every upstream method still works: ->hex(), ->hsl(), ->rgb(), ->placeholder(), ->prefix(), ->suffixAction(), and so on.

->showPalette()

AuraColorPicker::make('brand_color')->showPalette();        // enabled
AuraColorPicker::make('brand_color')->showPalette(false);   // explicitly off
AuraColorPicker::make('brand_color')->showPalette(fn () => auth()->user()?->is_admin); // closure

When the palette is enabled and the state is a valid 3- or 6-digit hex, 11 swatches render below the input keyed 50 to 950. When the state is empty or invalid, a muted "Pick a color to preview the full palette" hint appears instead.

Invalid input never throws — the field degrades gracefully.

Combining with ->live()

The palette reads the field state at render time, so to update it as the user types or commits a new color, add one of Filament's live modifiers:

AuraColorPicker::make('brand_color')
    ->showPalette()
    ->live(onBlur: true);              // refresh on blur (recommended)

AuraColorPicker::make('brand_color')
    ->showPalette()
    ->live(debounce: 500);             // refresh 500ms after last keystroke

Without ->live() the palette still renders on the initial load and after a full form submit — perfect for read-only review screens.

Palette source: PaletteGenerator

The swatches use the same OKLCH-based algorithm as the palette generator CLI command, so what the user sees in the form is exactly what php artisan aura-filament:palette would emit. Copy it into ->primaryColor([...]) and you get a 1-to-1 match.

If you need the palette array programmatically (for example to validate a saved color or render it elsewhere):

use BlueStarSystem\AuraFilament\Forms\Components\AuraColorPicker;

$shades = AuraColorPicker::paletteFromValue($request->brand_color);
// => [50 => 'oklch(...)', 100 => '...', ..., 950 => '...']
// or => [] when the value is empty/invalid

This static helper is the pure, testable core of the field — no Filament schema container required.

Styling

The palette strip is styled by resources/css/components/color-picker.css shipped with Aura Filament. Key tokens you can override in your own theme CSS:

  • --aura-radius-md / --aura-radius-lg — corner radius of each swatch and the strip container
  • --aura-blur — glass blur on the strip container
  • --primary-500 — color of the focus ring on each swatch

Hover a swatch to reveal its shade number (50, 100, …) as a muted caption below.

Example: brand settings page

use BlueStarSystem\AuraFilament\Forms\Components\AuraColorPicker;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make('Brand')
    ->columns(2)
    ->components([
        TextInput::make('name')->required(),

        AuraColorPicker::make('brand_color')
            ->label('Brand color')
            ->showPalette()
            ->live(onBlur: true)
            ->required()
            ->helperText('Your primary. Saved as the full 50..950 palette at form submit.'),
    ]);

See the field running on demo.aura-ui.com/admin/components-showcase.