Color Entry

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

bool|Closure

Enable copying the color value to clipboard when clicked.

ColorEntry::make('brand_color')
    ->copyable()

string|Closure

Set a custom message shown when the color is copied.

ColorEntry::make('brand_color')
    ->copyable()
    ->copyMessage('Color copied!')

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:

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

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

Form Components

Table Components

Layout Components

Infolist Components

Introduction

Available Methods

Copy to Clipboard

State Management

Supported Color Formats

Examples

Basic Color Preview

Copyable Color

Multiple Colors

Computed Color

Color with Tooltip

Color Scheme Preview

Conditional Display

Working with Arrays

Best Practices

Color Validation

Accessibility

Default Values

​Introduction

​Available Methods

​Copy to Clipboard

​State Management

​Supported Color Formats

​Examples

​Basic Color Preview

​Copyable Color

​Multiple Colors

​Computed Color

​Color with Tooltip

​Color Scheme Preview

​Conditional Display

​Working with Arrays

​Best Practices

​Color Validation

​Accessibility

​Default Values

Introduction

Available Methods

Copy to Clipboard

State Management

Supported Color Formats

Examples

Basic Color Preview

Copyable Color

Multiple Colors

Computed Color

Color with Tooltip

Color Scheme Preview

Conditional Display

Working with Arrays

Best Practices

Color Validation

Accessibility

Default Values