PHPackages awcodes/palette - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. awcodes/palette ActiveLibrary[Utility & Helpers](/categories/utility) awcodes/palette =============== A color picker field for Filament Forms that uses preset color palettes. v3.1.0(4w ago)2472.5k—0.5%54MITPHPPHP ^8.2CI passing Since Aug 30Pushed 4w ago1 watchersCompare [ Source](https://github.com/awcodes/palette)[ Packagist](https://packagist.org/packages/awcodes/palette)[ Docs](https://github.com/awcodes/palette)[ GitHub Sponsors](https://github.com/awcodes)[ RSS](/packages/awcodes-palette/feed)WikiDiscussions 3.x Synced 2w ago READMEChangelog (10)Dependencies (18)Versions (16)Used By (4) Palette ======= [](#palette) A color picker field for Filament Forms that uses preset color palettes. [![Latest Version](https://camo.githubusercontent.com/988546d9e3dc361305d3b3ff241e2a68eec37a1d7ada5be155f908000f58e190/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6177636f6465732f70616c657474652e7376673f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d52656c65617365)](https://github.com/awcodes/palette/releases)[![MIT Licensed](https://camo.githubusercontent.com/a7e65aee57b11d28e4caff8b945729a66be0bb663f7f93bd24c5aa65699f148e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Total Downloads](https://camo.githubusercontent.com/9c3738758e19dd975e1aef338b2316cebe6a6c7f88917cc3facb46814482158a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6177636f6465732f70616c657474652e7376673f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d446f776e6c6f616473)](https://packagist.org/packages/awcodes/palette)[![GitHub Repo stars](https://camo.githubusercontent.com/48b5b3950e34e9f7195866191e11fb6a914468e42e7a07a09f45f3d978e83eaf/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6177636f6465732f70616c657474653f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d5374617273)](https://github.com/awcodes/palette/stargazers) Compatibility ------------- [](#compatibility) Package VersionFilament Version1.x3.x2.x4.x3.x4.x & 5.xInstallation ------------ [](#installation) You can install the package via composer: ``` composer require awcodes/palette ``` Important If you have not set up a custom theme and are using Filament Panels follow the instructions in the [Filament Docs](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) first. After setting up a custom theme add the plugin's views to your theme css file or your app's css file if using the standalone packages. ``` @source '../../../../vendor/awcodes/palette/resources/**/*.blade.php'; ``` Config ------ [](#config) The plugin will work without publishing the config, but should you need to change any of the default settings you can publish the config file with the following Artisan command: ``` php artisan vendor:publish --tag="palette-config" ``` Preparing your model -------------------- [](#preparing-your-model) By default, Palette will store the selected color in your db as an array of data. Because of this you must cast the column in your model as `array` or `json`. ``` protected $casts = [ 'content' => 'array', // or 'json' ]; ``` The stored content will take the following shape: ``` [ 'key' => 'primary', 'property' => '--primary-500', 'label' => 'Primary', 'type' => 'rgb', 'value' => '238, 246, 213', ] ``` ### Storing the data as the color's key [](#storing-the-data-as-the-colors-key) Should you prefer to store only the key for the color you can do so either by using the `storeAsKey()` modifier on the `ColorPicker` or `ColorPickerSelect` fields or globally via the `palette.php` config file. ``` use Awcodes\Palette\Forms\Components\ColorPicker; use Filament\Support\Colors\Color; ColorPicker::make('color') ->storeAsKey(), ``` Color Picker Field ------------------ [](#color-picker-field) Simply add the field to your form using the `ColorPicker` field and pass in an array of Filament Color objects. Should you need to include black and white in your color palette, you can use the `withWhite` and `withBlack` methods. This will include black and white at the end of the color options. You can also use the 'swap' argument to swap out the hex value used for black and white. Note Shades only work with Filament Color objects ``` use Awcodes\Palette\Forms\Components\ColorPicker; use Filament\Support\Colors\Color; ColorPicker::make('color') ->colors([ 'indigo' => Color::Indigo, 'badass' => Color::hex('#bada55'), 'salmon' => '#fa8072', 'bg-gradient-secondary' => 'bg-gradient-secondary' ]) ->shades([ 'badass' => 300 ]) ->labels([ 'bg-gradient-secondary' => 'Gradient Secondary' ]) ->size('sm') // optional 'xs', 'sm', 'md', 'lg', 'xl' ->withBlack(swap: '#111111') ->withWhite(swap: '#f5f5f5'), ``` Color Picker Select ------------------- [](#color-picker-select) Simply add the field to your form using the `ColorPickerSelect` field and pass in an array of Filament Color objects. Should you need to include black and white in your color palette, you can use the `withWhite` and `withBlack` methods. This will include black and white at the end of the color options. You can also use the 'swap' argument to swap out the hex value used for black and white. Note Shades only work with Filament Color objects ``` use Awcodes\Palette\Forms\Components\ColorPickerSelect; use Filament\Support\Colors\Color; ColorPickerSelect::make('color') ->colors([ 'indigo' => Color::Indigo, 'badass' => Color::hex('#bada55'), 'salmon' => '#fa8072', 'bg-gradient-secondary' => 'bg-gradient-secondary' ]) ->shades([ 'badass' => 300 ]) ->labels([ 'bg-gradient-secondary' => 'Gradient Secondary' ]) ->withBlack(swap: '#111111') ->withWhite(swap: '#f5f5f5'), ``` Color Entry ----------- [](#color-entry) Simply add the `ColorEntry` to your infolist schema. ``` use Awcodes\Palette\Infolists\Components\ColorEntry; ColorEntry::make('color') ->size('sm') // optional 'xs', 'sm', 'md', 'lg', 'xl' ``` Style Hook Classes ------------------ [](#style-hook-classes) Available classes for css customizations on the ColorPicker: - for the main container: `palette-color-picker` - for items: `palette-color-picker-item` - for active/selected item: `palette-color-picker-item-active` Available classes for css customizations on the ColorEntry: - for the main container: `palette-entry-item` Testing ------- [](#testing) ``` composer test ``` Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities. Credits ------- [](#credits) - [Adam Weston](https://github.com/awcodes) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 58 — FairBetter than 98% of packages Maintenance94 Actively maintained with recent releases Popularity42 Moderate usage in the ecosystem Community21 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 71% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~49 days Recently: every ~86 days Total 15 Last Release 29d ago Major Versions v1.1.2 → v2.0.0-beta.12025-06-20 2.x-dev → v3.0.02026-01-19 PHP version history (2 changes)v1.0.0PHP ^8.1 v2.0.0-beta.1PHP ^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3596800?v=4)[Adam Weston](/maintainers/awcodes)[@awcodes](https://github.com/awcodes) --- Top Contributors [![awcodes](https://avatars.githubusercontent.com/u/3596800?v=4)](https://github.com/awcodes "awcodes (44 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (12 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (4 commits)")[![A909M](https://avatars.githubusercontent.com/u/119125167?v=4)](https://github.com/A909M "A909M (2 commits)") --- Tags filamentfilament-pluginpluginlaravelcolor pickerfilamentpaletteawcodes ### Code Quality TestsPest Static AnalysisRector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/awcodes-palette/health.svg) ``` [![Health](https://phpackages.com/badges/awcodes-palette/health.svg)](https://phpackages.com/packages/awcodes-palette) ``` ### Alternatives [awcodes/filament-curator A media picker plugin for FilamentPHP. 440384.7k28](/packages/awcodes-filament-curator)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3915.5k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16429.7k](/packages/backstage-mails)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 85240.3k9](/packages/stephenjude-filament-two-factor-authentication)[awcodes/filament-badgeable-column Filament Tables column to append and prepend badges. 146581.0k27](/packages/awcodes-filament-badgeable-column)[awcodes/recently Easily track and access recently viewed records in your filament panels. 4341.0k](/packages/awcodes-recently) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)