DEV Community

Wallace Maxters
Wallace Maxters

Posted on

Filament: Image Color Picker component

Image Color Picker for Filament 3

This library contains a custom form field to pick color from a image.

Install

composer require wallacemaxters/filament-image-color-picker
Enter fullscreen mode Exit fullscreen mode

Usage

Basic Input Usage example:

use WallaceMaxters\FilamentImageColorPicker\ImageColorPicker;

// 

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

Enter fullscreen mode Exit fullscreen mode

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'))
            ])

    ),
Enter fullscreen mode Exit fullscreen mode

Preview

Filament Image Color Picker Preview

Github Source

https://github.com/wallacemaxters/filament-image-color-picker/tree/master

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay