PHPackages awcodes/preset-color-picker - 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/preset-color-picker Abandoned → [awcodes/palette](/?search=awcodes%2Fpalette)Library[Utility & Helpers](/categories/utility) awcodes/preset-color-picker =========================== A color picker field for Filament Forms that uses preset color palettes. v0.3.0(1y ago)1913.6k↓46.8%4[1 issues](https://github.com/awcodes/preset-color-picker/issues)MITPHPPHP ^8.1CI passing Since Mar 22Pushed 4mo ago1 watchersCompare [ Source](https://github.com/awcodes/preset-color-picker)[ Packagist](https://packagist.org/packages/awcodes/preset-color-picker)[ Docs](https://github.com/awcodes/preset-color-picker)[ GitHub Sponsors](https://github.com/awcodes)[ RSS](/packages/awcodes-preset-color-picker/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (10)Versions (7)Used By (0) Preset Color Picker =================== [](#preset-color-picker) [![Latest Version on Packagist](https://camo.githubusercontent.com/1ceb4d7bec498b2260d76925ac4c66b1512774dd2e7869e9204a07763eccbc38/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6177636f6465732f7072657365742d636f6c6f722d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/awcodes/preset-color-picker)[![Total Downloads](https://camo.githubusercontent.com/5e749848c348b92f31cccbb6196590285c24b2f9b23af81768ef77a13cddb7a1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6177636f6465732f7072657365742d636f6c6f722d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/awcodes/preset-color-picker) A color picker field for Filament Forms that uses preset color palettes. [![Screenshot 2024-03-22 at 2 11 13 PM](https://private-user-images.githubusercontent.com/3596800/316143008-e0c162db-6e21-4929-bbb5-f82f1a2e8f20.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NjAwMTksIm5iZiI6MTc3NDc1OTcxOSwicGF0aCI6Ii8zNTk2ODAwLzMxNjE0MzAwOC1lMGMxNjJkYi02ZTIxLTQ5MjktYmJiNS1mODJmMWEyZThmMjAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDQ0ODM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDgyMDdkMjdkZTBkNzg0NzA1ZmY0YjdhZjA1MDk0ZTNkZTg3YTJkY2RkOTgxYTg0OTM2MTFmMDAxYzI1ZDFlOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.8EwsrdSDrPYIIVGavOPlEbLqvnQ5ihaF_AxYlIHSDnk)](https://private-user-images.githubusercontent.com/3596800/316143008-e0c162db-6e21-4929-bbb5-f82f1a2e8f20.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NjAwMTksIm5iZiI6MTc3NDc1OTcxOSwicGF0aCI6Ii8zNTk2ODAwLzMxNjE0MzAwOC1lMGMxNjJkYi02ZTIxLTQ5MjktYmJiNS1mODJmMWEyZThmMjAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDQ0ODM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDgyMDdkMjdkZTBkNzg0NzA1ZmY0YjdhZjA1MDk0ZTNkZTg3YTJkY2RkOTgxYTg0OTM2MTFmMDAxYzI1ZDFlOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.8EwsrdSDrPYIIVGavOPlEbLqvnQ5ihaF_AxYlIHSDnk) Installation ------------ [](#installation) You can install the package via composer: ``` composer require awcodes/preset-color-picker ``` Important If you have not set up a custom theme and are using a Panel follow the instructions in the [Filament Docs](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) first. The following applies to both the Panels Package and the standalone Forms package. Add the plugin's views to your `tailwind.config.js` file. ``` content: [ './vendor/awcodes/preset-color-picker/resources/views/**/*.blade.php', ] ``` Rebuild your custom theme. ``` npm run build ``` Usage ----- [](#usage) Simply add the field to your form using the `PresetColorPicker` 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. ``` PresetColorPicker::make('color') ->colors([ // array of Filament Color objects ]) ->size('sm') // optional 'xs', 'sm', 'md', 'lg' ->withBlack(swap: '#111111') ->withWhite(swap: '#f5f5f5'), ``` Hook Classes ------------ [](#hook-classes) These are the available classes for css coustmizations: - for the main container: `pcp-preset-color-picker` - for items: `pcp-preset-color-picker-item` - for active/selected item: `pcp-preset-color-picker-item-active` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) 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 40 — FairBetter than 88% of packages Maintenance56 Moderate activity, may be stable Popularity35 Limited adoption so far Community14 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits 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 ~32 days Total 5 Last Release 656d ago ### 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 (21 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (13 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (6 commits)")[![atmonshi](https://avatars.githubusercontent.com/u/1952412?v=4)](https://github.com/atmonshi "atmonshi (4 commits)") --- Tags plugincolor pickerfilamentawcodespreset-color-picker ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/awcodes-preset-color-picker/health.svg) ``` [![Health](https://phpackages.com/badges/awcodes-preset-color-picker/health.svg)](https://phpackages.com/packages/awcodes-preset-color-picker) ``` ### Alternatives [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-badgeable-column Filament Tables column to append and prepend badges. 142419.3k3](/packages/awcodes-filament-badgeable-column)[codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[awcodes/palette A color picker field for Filament Forms that uses preset color palettes. 2552.6k5](/packages/awcodes-palette)[awcodes/filament-curator A media picker plugin for FilamentPHP. 434297.7k19](/packages/awcodes-filament-curator) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)