PHPackages                             rvxlab/filament-colorpicker - 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. rvxlab/filament-colorpicker

Abandoned → [filament/forms](/?search=filament%2Fforms)ArchivedLibrary[Utility & Helpers](/categories/utility)

rvxlab/filament-colorpicker
===========================

A color picker package for Laravel Filament

1.4.2(4y ago)156.3k2MITPHPPHP ^8.0

Since Jun 13Pushed 4y ago1 watchersCompare

[ Source](https://github.com/RVxLab/filament-colorpicker)[ Packagist](https://packagist.org/packages/rvxlab/filament-colorpicker)[ Docs](https://github.com/rvxlab/filament-colorpicker)[ RSS](/packages/rvxlab-filament-colorpicker/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (10)Dependencies (15)Versions (16)Used By (0)

Filament Color Picker
=====================

[](#filament-color-picker)

[![Filament Color Picker](./art/banner.png)](./art/banner.png)

[![Latest Version on Packagist](https://camo.githubusercontent.com/8dfbd0f403f3e60dd420571a38234bb35813228d28b8f4e3de85f7b492e440b5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7276786c61622f66696c616d656e742d636f6c6f727069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rvxlab/filament-colorpicker)[![GitHub Tests Action Status](https://camo.githubusercontent.com/5f1372789ea6a806f9ea424917a82c11ad149b25b527bccc769a8df55aaf75cf/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f7276786c61622f66696c616d656e742d636f6c6f727069636b65722f72756e2d74657374733f6c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/rvxlab/filament-colorpicker/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/16624a9833506339fa9878d072cc933de4b3286ab43606046972591ff7bc92fd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f7276786c61622f66696c616d656e742d636f6c6f727069636b65722f436865636b253230262532306669782532307374796c696e673f6c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/rvxlab/filament-colorpicker/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/109f01eede0e35a8ea709b3a0441a8418155bc62e4540b93d60c0a7237a2d9bf/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7276786c61622f66696c616d656e742d636f6c6f727069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rvxlab/filament-colorpicker)

---

Deprecated
==========

[](#deprecated)

**As of Filament v2.10.45 there's a built-in colour picker. Because of that I decided to deprecate this package and encourage everyone to use [the built-in colour picker instead](https://filamentphp.com/docs/2.x/forms/fields#color-picker). Thank you all for the support, bug reports and pull requests ❤️**

---

Filament Color Picker is a package for [Laravel Filament](https://github.com/laravel-filament/filament) that wraps [Vanilla Picker](https://github.com/Sphinxxxx/vanilla-picker) into a usable component.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require rvxlab/filament-colorpicker
```

Optionally you can publish the views:

```
php artisan vendor:publish --tag=filament-colorpicker-views
```

Usage
-----

[](#usage)

[![The color pickers in action](./art/color-pickers.png)](./art/color-pickers.png)

Reference `RVxLab\FilamentColorPicker\Forms\ColorPicker` in the `forms` method of a resource and you're good to go!

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color'),
        ]);
}
```

All options below are analogous to the ones in the [Vanilla Picker documentation](https://vanilla-picker.js.org/gen/Picker.html#setOptions__anchor).

### Editor format

[](#editor-format)

***Default:*** `EditorFormat::HEX()`

Set the editor format of the color picker.

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->editorFormat(\RVxLab\FilamentColorPicker\Enum\EditorFormat::HSL()),
        ]);
}
```

You may also pass the string values of the `EditorFormat` enum.

### Popup placement

[](#popup-placement)

***Default:*** `PopupPosition::RIGHT()`

The popup placement can be set using `popupPosition`:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->popupPosition(\RVxLab\FilamentColorPicker\Enum\PopupPosition::BOTTOM()),
        ]);
}
```

You may also pass the string values of the `PopupPosition` enum.

You can also disable the popup entirely in which the popup just becomes part of the element itself:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->disablePopup(),
        ]);
}
```

### Alpha

[](#alpha)

***Default: true***

The alpha channel can be enabled or disabled by using `alpha`:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->alpha(false),
        ]);
}
```

An important thing to note is that the alpha setting also changes the validation.

Having the alpha channel enabled will validate the output as an 8-digit hex string, disabling will validate it as a 6-digit hex string.

### Preview

[](#preview)

***Default: false***

The color preview can be enabled or disabled by using `preview`:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->preview(),
        ]);
}
```

### Layout

[](#layout)

***Default: "default"***

The layout can be changed by using `layout`:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->layout('my-layout'),
        ]);
}
```

### Cancel button

[](#cancel-button)

***Default: false***

The cancel button can be enabled or disabled by using `cancelButton`:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->cancelButton(true),
        ]);
}
```

### Template

[](#template)

***Default: null***

The default template can be found in `views/vendor/filament-colorpicker/template.blade.php` after you publish the views.

To make changes, simply change this template and then pass a `View` object to the `template` method:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->template(view('filament-colorpicker::template')),
        ]);
}
```

You can also pass an HTML string directly, which then gets fed to the options as is.

### Debounce timeout

[](#debounce-timeout)

***Default: 500***

The debounce timeout in milliseconds, this option is only applicable when the popup has been disabled.

When the popup is enabled this option does nothing.

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->debounceTimeout(1000),
        ]);
}
```

### Nullable

[](#nullable)

***Default: false***

To make the color picker nullable you can call the `nullable` method:

```
public static function form(Form $form): Form
{
    return $form
        ->schema([
            \RVxLab\FilamentColorPicker\Forms\ColorPicker::make('color')
                ->nullable(),
        ]);
}
```

#### Known issue

[](#known-issue)

Because Vanilla Picker does not handle null values properly the default initial value of a null-ed picker will be `#000000` or `#00000000` depending on the `alpha` setting.

This goes away when the picker is updated or the form is saved.

Color swatch
------------

[](#color-swatch)

[![The color pickers in action](./art/swatches.png)](./art/swatches.png)

To display a swatch on the table you can add the following column:

```
public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color'),
        ]);
}
```

### Copying

[](#copying)

*Note: this makes use of the [clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard).*

You can call the `copyable` method on the column:

```
public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable(),
        ]);
}
```

When set, clicking on the swatch will cause the current color to be copied to the clipboard.

### Set the copy message

[](#set-the-copy-message)

***Default: "Copied!"***

You can change the copy message by using the `copyMessage` method:

```
public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable()
                ->copyMessage('Color copied to clipboard!'),
        ]);
}
```

### Change the message timeout

[](#change-the-message-timeout)

***Default: 2000***

To change the length of time the message appears you can use the `copyMessageShowTimeMs` method:

```
public static function table(Table $table): Table
{
    return $table
        ->columns([
            \RVxLab\FilamentColorPicker\Columns\ColorSwatch::make('color')
                ->copyable()
                ->copyMessageShowTimeMs(500),
        ]);
}
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Upgrading to 1.x
----------------

[](#upgrading-to-1x)

The only breaking change is that this package now relies on `filament/filament:^2.0`, other than that there are no breaking changes.

If you published the JavaScript file in the past you can delete it, the file is now loaded through Filament directly

Contributing
------------

[](#contributing)

For development this repository contains a Docker Compose file to provide all the tools needed, as well as a Makefile to run useful commands.

To make use of this, ensure you have Docker and Docker Compose installed.

To get started:

```
make dcbuild # Build the Docker image
make start # Run the container
make composer cmd=install
```

Additionally you can copy and modify `docker-compose.override.yml.dist` to add any additional changes needed for the workspace container.

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Credits
-------

[](#credits)

- [RVxLab](https://github.com/RVxLab)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 92.5% 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 ~24 days

Recently: every ~8 days

Total

14

Last Release

1489d ago

Major Versions

0.3.0 → 1.0.02022-01-17

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/46111684?v=4)[rvxlab](/maintainers/rvxlab)[@RVxLab](https://github.com/RVxLab)

---

Top Contributors

[![RVxLab](https://avatars.githubusercontent.com/u/46111684?v=4)](https://github.com/RVxLab "RVxLab (86 commits)")[![saade](https://avatars.githubusercontent.com/u/14329460?v=4)](https://github.com/saade "saade (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![invaders-xx](https://avatars.githubusercontent.com/u/604907?v=4)](https://github.com/invaders-xx "invaders-xx (1 commits)")[![morganchorlton3](https://avatars.githubusercontent.com/u/32246773?v=4)](https://github.com/morganchorlton3 "morganchorlton3 (1 commits)")

---

Tags

laravelcolorpickerfilamentvanilla-picker

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/rvxlab-filament-colorpicker/health.svg)

```
[![Health](https://phpackages.com/badges/rvxlab-filament-colorpicker/health.svg)](https://phpackages.com/packages/rvxlab-filament-colorpicker)
```

###  Alternatives

[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

58289.3k3](/packages/creagia-filament-code-field)[swisnl/filament-backgrounds

Beautiful backgrounds for Filament auth pages

54149.2k6](/packages/swisnl-filament-backgrounds)[guava/calendar

Adds support for vkurko/calendar to Filament PHP.

298241.0k3](/packages/guava-calendar)[tapp/filament-google-autocomplete-field

Filament plugin that provides a Google Autocomplete field

3098.1k](/packages/tapp-filament-google-autocomplete-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)