> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Color picker

> [!WARNING]
>
> You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/forms).

## Overview

The color picker component allows you to pick a color in a range of formats.

By default, the component uses HEX format:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('color')
```

Loading preview

![Color picker](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/color-picker/simple.jpg)

## Setting the color format

While HEX format is used by default, you can choose which color format to use:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('hsl_color')
    ->hsl()

ColorPicker::make('rgb_color')
    ->rgb()

ColorPicker::make('rgba_color')
    ->rgba()
```

## Color picker validation

You may use Laravel's validation rules to validate the values of the color picker:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('hex_color')
    ->regex('/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})\b$/')

ColorPicker::make('hsl_color')
    ->hsl()
    ->regex('/^hsl\(\s*(\d+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/')

ColorPicker::make('rgb_color')
    ->rgb()
    ->regex('/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/')

ColorPicker::make('rgba_color')
    ->rgba()
    ->regex('/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/')
```

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/3.x/packages/forms/docs/03-fields/17-color-picker.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.