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.0.0(3mo ago)2552.6k↑18.2%54MITPHPPHP ^8.2CI passing Since Aug 30Pushed 1mo 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 1mo ago READMEChangelog (10)Dependencies (9)Versions (15)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.x5.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 54 — FairBetter than 97% of packages Maintenance84 Actively maintained with recent releases Popularity41 Moderate usage in the ecosystem Community20 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 73.1% 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 ~42 days Recently: every ~64 days Total 14 Last Release 77d 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 (38 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (9 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 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 [pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[awcodes/filament-badgeable-column Filament Tables column to append and prepend badges. 142419.3k3](/packages/awcodes-filament-badgeable-column)[awcodes/filament-table-repeater A modified version of the Filament Forms Repeater to display it as a table. 262815.1k5](/packages/awcodes-filament-table-repeater)[awcodes/filament-curator A media picker plugin for FilamentPHP. 434297.7k19](/packages/awcodes-filament-curator)[awcodes/light-switch Plugin to add theme switching (light/dark/system) to the auth pages for Filament Panels 4789.9k2](/packages/awcodes-light-switch)[awcodes/recently Easily track and access recently viewed records in your filament panels. 4224.3k](/packages/awcodes-recently) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)