Skip to main content

​
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')
The entry displays a colored square or circle representing the color value stored in your data.

​
Available Methods

​
Copy to Clipboard

​
copyable()
bool|Closure
Enable copying the color value to clipboard when clicked.
ColorEntry::make('brand_color')
    ->copyable()
​
copyMessage()
string|Closure
Set a custom message shown when the color is copied.
ColorEntry::make('brand_color')
    ->copyable()
    ->copyMessage('Color copied!')
​
copyMessageDuration()
int|Closure
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:
​
state()
Closure
Manually set the color value state.
ColorEntry::make('computed_color')
    ->state(fn ($record) => $record->primary_color ?? '#000000')

​
Supported Color Formats

The color entry supports all standard CSS color formats:
  • 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()

​
Color with Tooltip

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()

Build docs developers (and LLMs) love

Get started for freeTalk to us