Skip to content

Pro Component — This component requires an Aura UI Pro license.

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.

Basic Usage

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

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.

Examples

Basic Hex Color Picker

<x-aura::color-picker
    label="Primary Color"
    name="primary_color"
    value="#3b82f6"
/>

With Preset Swatches

<x-aura::color-picker
    label="Theme Color"
    name="theme_color"
    value="#6366f1"
    :swatches="[
        '#ef4444', '#f59e0b', '#22c55e', '#3b82f6',
        '#6366f1', '#ec4899', '#14b8a6', '#64748b',
    ]"
/>

RGB Format Output

<x-aura::color-picker
    label="Background Color"
    name="bg_color"
    format="rgb"
    value="rgb(99, 102, 241)"
/>

HSL Format Output

<x-aura::color-picker
    label="Accent Color"
    name="accent_color"
    format="hsl"
    value="hsl(239, 84%, 67%)"
/>

Livewire Integration

<!-- Blade view -->
<div>
    <x-aura::color-picker
        label="Brand Primary"
        name="brand_primary"
        wire:model.live="settings.brand_primary"
        :swatches="$defaultSwatches"
    />

    <div
        class="mt-4 h-20 w-full rounded-lg"
        style="background-color: {{ $settings['brand_primary'] }}"
    >
        <span class="p-4 text-white font-medium">Preview</span>
    </div>
</div>

// Livewire component
class ThemeSettings extends Component
{
    public array $settings = [
        'brand_primary' => '#6366f1',
        'brand_secondary' => '#ec4899',
    ];

    public array $defaultSwatches = [
        '#ef4444', '#f97316', '#f59e0b', '#22c55e',
        '#14b8a6', '#3b82f6', '#6366f1', '#8b5cf6',
        '#ec4899', '#64748b',
    ];

    public function save(): void
    {
        Setting::updateOrCreate(
            ['key' => 'theme'],
            ['value' => json_encode($this->settings)]
        );

        $this->dispatch('toast', type: 'success', message: 'Theme saved.');
    }
}

Slots

Slot Description
default Not used. The color picker UI is generated from props.

Accessibility

  • The color picker trigger button displays the current color and has an aria-label describing the selected value.
  • The picker popup uses role="dialog" with aria-modal="true".
  • The hue slider uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
  • Swatch buttons include aria-label with the color value for screen reader identification.
  • Escape closes the picker popup.
  • Tab moves focus between the color area, hue slider, text input, and swatches.
  • The text input allows direct entry of color values for users who prefer typing exact values.