Skip to content

Overview

Generating an accessible 50–950 color palette from a single brand color is tedious and error-prone. Aura Filament v2.3 ships a first-class palette generator that:

  • Accepts any hex input.
  • Produces an 11-shade OKLCH palette (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).
  • Tunes lightness and chroma for readability on both light and dark backgrounds.
  • Outputs in php, json, or css format, ready to drop into your panel.

CLI usage

php artisan aura-filament:palette "#7c3aed"

The command accepts the hex color with or without the leading #.

Output formats

# Default — PHP array ready for ->primaryColor()
php artisan aura-filament:palette "#7c3aed"

# JSON
php artisan aura-filament:palette "#7c3aed" --format=json

# CSS custom properties
php artisan aura-filament:palette "#7c3aed" --format=css

Example: PHP format

[
    50  => '245, 243, 255',
    100 => '237, 233, 254',
    200 => '221, 214, 254',
    300 => '196, 181, 253',
    400 => '167, 139, 250',
    500 => '139, 92, 246',
    600 => '124, 58, 237',
    700 => '109, 40, 217',
    800 => '91, 33, 182',
    900 => '76, 29, 149',
    950 => '46, 16, 101',
]

You can paste this directly into ->primaryColor([...]) or define it on a Color:: constant.

Example: CSS format

--color-primary-50: 245 243 255;
--color-primary-100: 237 233 254;
/* ... */
--color-primary-950: 46 16 101;

Useful when you want to override a Filament primary without touching PHP.

Using the result in a panel

use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            AuraFilamentPlugin::make()
                ->primaryColor([
                    50  => '245, 243, 255',
                    100 => '237, 233, 254',
                    200 => '221, 214, 254',
                    300 => '196, 181, 253',
                    400 => '167, 139, 250',
                    500 => '139, 92, 246',
                    600 => '124, 58, 237',
                    700 => '109, 40, 217',
                    800 => '91, 33, 182',
                    900 => '76, 29, 149',
                    950 => '46, 16, 101',
                ])
        );
}

Programmatic usage

use BlueStarSystem\AuraFilament\Support\PaletteGenerator;

$palette = PaletteGenerator::fromHex('#7c3aed');
// => ['50' => '245, 243, 255', '100' => '237, 233, 254', ...]

Useful for generating palettes on the fly from user-supplied brand colors, in a multi-tenant SaaS for example.

Why OKLCH

OKLCH gives perceptually uniform lightness steps, which means the visual distance between shade 500 and shade 600 feels the same as between 100 and 200. Palettes generated in plain HSL or RGB tend to have perceptual "cliffs" where some shades look identical or jump unevenly.

The generator uses a lightness curve tuned against the Filament defaults so contrast ratios stay WCAG-friendly at both ends of the scale.