Filament HUB
Hero background

Color Entry

The color entry provides an elegant way to display color values in your info lists, showing visual color previews alongside the actual CSS color values. Supporting all major color formats including HEX, HSL, RGB, and RGBA, it transforms raw color data into meaningful visual information that users can instantly understand and interact with. With built-in copy functionality and dynamic color calculation capabilities, color entries make color management intuitive and efficient.

# Basic color display

Basic color display

Show color previews from CSS color definitions stored in your database. The color entry automatically renders a visual preview alongside the color value, making it instantly recognizable. Perfect for theme management, brand color displays, or any interface where color visualization is essential.

use Filament\Infolists\Components\ColorEntry;

ColorEntry::make('accent_color')
    ->label('Accent Color'),

# Copyable color values

Copyable color values

Enable one-click copying of color values to the clipboard with custom confirmation messages. Essential for designers and developers who need to quickly copy color codes for use in other applications. SSL is required for the copy functionality to work properly.

use Filament\Infolists\Components\ColorEntry;

ColorEntry::make('primary_color')
    ->copyable()
    ->copyMessage('Color copied to clipboard!')
    ->copyMessageDuration(2000), // 2 seconds