Documentation Index
Fetch the complete documentation index at: https://mintlify.com/filamentphp/filament/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Color entries display a visual preview of CSS color values. They work with colors in HEX, HSL, RGB, and RGBA formats, typically used alongside the color picker field.
use Filament\Infolists\Components\ColorEntry;
ColorEntry::make('brand_color')
Available Methods
Copy to Clipboard
Enable copying the color value to clipboard when clicked.ColorEntry::make('brand_color')
->copyable()
Set a custom message shown when the color is copied.ColorEntry::make('brand_color')
->copyable()
->copyMessage('Color copied!')
Set the duration in milliseconds for the copy confirmation message.ColorEntry::make('brand_color')
->copyable()
->copyMessage('Color copied!')
->copyMessageDuration(1500)
State Management
Color entries inherit all base entry methods for working with state:
Manually set the color value state.ColorEntry::make('computed_color')
->state(fn ($record) => $record->primary_color ?? '#000000')
- HEX:
#FF5733, #F57
- RGB:
rgb(255, 87, 51)
- RGBA:
rgba(255, 87, 51, 0.5)
- HSL:
hsl(9, 100%, 60%)
- HSLA:
hsla(9, 100%, 60%, 0.5)
Examples
Basic Color Preview
ColorEntry::make('brand_color')
->label('Brand Color')
Copyable Color
ColorEntry::make('primary_color')
->label('Primary Color')
->copyable()
->copyMessage('Color code copied!')
->copyMessageDuration(2000)
Multiple Colors
ColorEntry::make('colors')
->label('Color Palette')
Computed Color
ColorEntry::make('accent_color')
->state(fn ($record) => $record->theme?->accent_color ?? '#3B82F6')
->copyable()
ColorEntry::make('background_color')
->label('Background')
->tooltip(fn ($state) => "Color: {$state}")
->copyable()
Color Scheme Preview
use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\ColorEntry;
Section::make('Theme Colors')
->schema([
ColorEntry::make('primary_color')
->label('Primary')
->copyable(),
ColorEntry::make('secondary_color')
->label('Secondary')
->copyable(),
ColorEntry::make('accent_color')
->label('Accent')
->copyable(),
])
->columns(3)
Conditional Display
ColorEntry::make('custom_color')
->label('Custom Brand Color')
->visible(fn ($record) => $record->has_custom_branding)
->copyable()
->copyMessage('Custom color copied!')
Working with Arrays
When the state contains an array of colors, the color entry will display multiple color previews:
ColorEntry::make('palette')
->label('Color Palette')
->state(fn ($record) => [
$record->primary_color,
$record->secondary_color,
$record->accent_color,
])
Best Practices
Color Validation
Ensure color values are in valid CSS format before storing:
// In your form field
ColorPicker::make('brand_color')
->required()
->regex('/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/'),
// Display in infolist
ColorEntry::make('brand_color')
->copyable()
Accessibility
Provide descriptive labels and tooltips:
ColorEntry::make('primary_color')
->label('Primary Brand Color')
->tooltip(fn ($state) => "HEX: {$state}")
->copyable()
->copyMessage('Color code copied to clipboard')
Default Values
ColorEntry::make('theme_color')
->state(fn ($record) => $record->theme_color ?? '#6366F1')
->copyable()