• Filament Image Color Picker 🎨
  • Features
  • Installation
• Usage
  • License
• Preview

#Filament Image Color Picker 🎨

Filament Image Color Picker is a Filament plugin that provides a custom color picker input based on an image. This tool allows users to select colors directly from an image, making it perfect for applications that require precise color selection.

#Features

✅ Select colors from any uploaded image
✅ Seamless integration with Filament forms
✅ User-friendly and highly customizable
✅ Supports multiple image formats

#Installation

composer require wallacemaxters/filament-image-color-picker

#Usage

To use the Filament Image Color Picker, simply include it in your Filament form field configuration:

use WallaceMaxters\FilamentImageColorPicker\ImageColorPicker;
 
//
 
return $form->schema([
    TextInput::make('image_url')->url()->live(),
    ImageColorPicker::make('color')
        ->columnSpanFull()
        ->image(fn ($get) => $get('image_url')),
]);

Use ImageColorPicker as Action:

Forms\Components\ColorPicker::make('color')
   ->suffixAction(fn ($get) =>
       Forms\Components\Actions\Action::make('color-from-image')
           ->action(function ($set, array $data) {
               $set('color', $data['color']);
           })
           ->icon('heroicon-o-eye-dropper')
           ->form([
               ImageColorPicker::make('color')
                   ->format('hsl')
                   ->image(fn() => $get('image_url'))
           ])
 
   ),

You can capture the image from FileUpload component.

 
$uploadedFile = FileUpload::make('image');
 
return $form->schema([
    $uploadedFile,
    ImageColorPicker::make('color')->fromComponent($uploadedFile),
]);

#License

This package is open-source and available under the MIT License.

#Preview