Color Picker Field
Allow users to select colors with support for hex, RGB and HSL formats.
Overview
The color field type renders a native color picker input. It supports hex, RGB and HSL output formats. Validation is handled by the TextFieldValidator, which checks that the submitted value matches the expected format.
Basic Usage
Use addColor() to add a color picker. Colors default to hex format.
app/Actions/CreateThemeForm.php
RGB Format
Set the format to RGB when you need rgb() values.
app/Actions/CreateDesignForm.php
HSL Format
Use HSL format when your application works with hue, saturation and lightness values.
app/Actions/CreatePaletteForm.php
Available Settings
Validation
The TextFieldValidator checks:
- Value matches the expected color format (hex, RGB or HSL)
- Hex values are valid 6-digit hexadecimal colors (with optional # prefix)
- RGB values follow the rgb(r, g, b) or rgba(r, g, b, a) format
- HSL values follow the hsl(h, s%, l%) or hsla(h, s%, l%, a) format
- Required/optional status based on field configuration
Browser Support
The color picker uses the native HTML5 color input (
<input type="color">). Most modern browsers support it, but the UI varies across browsers and platforms. Common Use Cases
- Theme customization forms
- Brand identity questionnaires
- Design preference surveys
- Product configuration with color options
- Style guide builders