Laravel Color Picker Component

Pro

Interactive color selection input with hex, RGB, and HSL format support and optional preset swatches.

A Color Picker built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::color-picker>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Color Picker is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::color-picker
    label="Brand Color"
    name="brand_color"
/>

See the full API, props and live examples in the Color Picker documentation.

Overview

The Color Picker component provides an intuitive interface for selecting colors. It includes a visual color area, hue slider, and text input for precise values. Users can choose from preset swatches or pick any color from the spectrum. Supports hex, RGB, and HSL output formats and integrates with Livewire via wire:model.

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Label text displayed above the input.
`name`	`string`	`''`	Input name attribute, also used for `wire:model`.
`value`	`string`	`'#6366f1'`	Initial color value.
`format`	`string`	`'hex'`	Output format: `hex`, `rgb`, or `hsl`.
`swatches`	`array`	`[]`	Array of preset color strings to display as quick-select swatches.