Color picker

ColorPicker::make($name, $label) renders a compact trigger — a color dot plus the current hex value — that opens a picker in a popover: a saturation/hue area for free colors, a swatch palette, and a hex input. The value is a lowercase hex string like #3b82f6.

PHP

ColorPicker::make('color', 'Tag color')
  ->placeholder('Pick a color')
  ->rules(['nullable', 'hex_color']);

Preview

Tree

• ▾field.color-picker
  • columnWidth:"md"
  • conditions:null
  • dependsOnAny:false
  • dependsOnKeys:null
  • disabled:false
  • editablePrefill:false
  • helperText:null
  • label:"Tag color"
  • name:"color"
  • palette:["#ef4444","#f97316","#f59e0b","#22c55e","#14b8a6","#3b82f6","#8b5cf6","#ec4899","#6b7280"]
  • placeholder:"Pick a color"
  • prefillRefreshOn:null
  • prefillResetOn:null
  • readOnly:false
  • required:false
  • tooltip:null
  • value:null

Style

Palette

The field ships a nine-color default palette. ->palette([...]) replaces it with your own swatches:

ColorPicker::make('color', 'Brand color')
    ->palette(['#0ea5e9', '#6366f1', '#f43f5e']);

Swatches preselect a color with one click; the saturation area and hex input remain available for any other color.

Validation

The submitted value is a plain string, so validate it like one — Laravel’s hex_color rule matches exactly what the picker produces:

ColorPicker::make('color', 'Tag color')->rules(['required', 'hex_color']);

Info

The client normalizes everything it commits to lowercase #rrggbb — three-digit input like #f53 is expanded, and invalid text is never committed.

Common options

ColorPicker shares label, default value, required, disabled, read-only, and visibility options with every field — see fields overview.