> ## 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.
# Colors
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 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/docs/5.x).
## Overview
Filament uses CSS variables to define its color palette. These CSS variables are mapped to Tailwind classes in the preset file that you load when installing Filament.
## Customizing the default colors
From a service provider's `boot()` method, or middleware, you can call the `FilamentColor::register()` method, which you can use to customize which colors Filament uses for UI elements.
There are 6 default colors that are used throughout Filament that you are able to customize:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'primary' => Color::Amber,
'success' => Color::Green,
'warning' => Color::Amber,
]);
```
The `Color` class contains every [Tailwind CSS color](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) to choose from.
You can also pass in a function to `register()` which will only get called when the app is getting rendered. This is useful if you are calling `register()` from a service provider, and want to access objects like the currently authenticated user, which are initialized later in middleware.
## Using a non-Tailwind color
You can use custom colors that are not included in the [Tailwind CSS color](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) palette by passing an array of color shades from `50` to `950` in RGB format:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => [
50 => '254, 242, 242',
100 => '254, 226, 226',
200 => '254, 202, 202',
300 => '252, 165, 165',
400 => '248, 113, 113',
500 => '239, 68, 68',
600 => '220, 38, 38',
700 => '185, 28, 28',
800 => '153, 27, 27',
900 => '127, 29, 29',
950 => '69, 10, 10',
],
]);
```
### Generating a custom color from a hex code
You can use the `Color::hex()` method to generate a custom color palette from a hex code:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => Color::hex('#ff0000'),
]);
```
### Generating a custom color from an RGB value
You can use the `Color::rgb()` method to generate a custom color palette from an RGB value:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'danger' => Color::rgb('rgb(255, 0, 0)'),
]);
```
## Registering extra colors
You can register extra colors that you can use throughout Filament:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;
FilamentColor::register([
'indigo' => Color::Indigo,
]);
```
Now, you can use this color anywhere you would normally add `primary`, `danger`, etc.
)}
Your logo here