> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Color column
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/docs/5.x/tables/columns/color).
The color column allows you to show the color preview from a CSS color definition, typically entered using the color picker field, in one of the supported formats (HEX, HSL, RGB, RGBA).
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ColorColumn;
ColorColumn::make('color')
```
## Allowing the color to be copied to the clipboard
You may make the color copyable, such that clicking on the preview copies the CSS value to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ColorColumn;
ColorColumn::make('color')
->copyable()
->copyMessage('Color code copied')
->copyMessageDuration(1500)
```
### Customizing the text that is copied to the clipboard
You can customize the text that gets copied to the clipboard using the \`copyableState() method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ColorColumn;
ColorColumn::make('color')
->copyable()
->copyableState(fn (string $state): string => "Color: {$state}")
```
In this function, you can access the whole table row with `$record`:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Post;
use Filament\Tables\Columns\ColorColumn;
ColorColumn::make('color')
->copyable()
->copyableState(fn (Post $record): string => "Color: {$record->color}")
```
)}
Your logo here