Basic Color Picker

Select a color for your theme

Sizes

Display Options

Custom Presets

States

Please select a color

Color Picker Component

A powerful color picker component with HSL color selection, preset colors, and hex input support. Built with Alpine.js for seamless interactivity.

Basic Props

  • name - string (required) - Input name attribute
  • label - string - Label text above the input
  • value - string - Default color value (hex format, e.g., '#3B82F6')
  • placeholder - string - Placeholder text for the input
  • id - string|null - Custom ID for the input (auto-generated if not provided)
  • hint - string - Helper text displayed below the input

Display Options

  • size - string|null - Input size: 'sm' | 'lg' | null (default)
  • showPresets - bool - Show preset color palette (default: true)
  • showInput - bool - Show hex input field (default: true)
  • presets - array|null - Custom array of preset colors (hex format)

Color Format

  • format - string - Color format: 'hex' | 'rgb' | 'hsl' (default: 'hex')
  • Note: Currently only hex format is fully supported. RGB and HSL formats are reserved for future implementation.

States

  • error - bool - Show error state styling
  • errorMessage - string - Error message to display
  • disabled - bool - Disable the color picker
  • readonly - bool - Make the input readonly
  • required - bool - Mark the field as required

Features

  • • HSL color picker with hue, saturation, and lightness controls
  • • Visual color swatch showing the selected color
  • • Hex input field with automatic '#' prefix
  • • Preset color palette for quick selection
  • • Custom preset colors support
  • • Real-time color preview
  • • Dark mode support
  • • Responsive design
  • • Accessible with proper ARIA labels

Hex Input Behavior

  • • Automatically adds '#' prefix if missing
  • • Accepts up to 6 hex characters (0-9, A-F)
  • • Filters out invalid characters automatically
  • • Converts input to uppercase
  • • Updates color picker when valid 6-character hex is entered

Default Preset Colors

If no custom presets are provided, the following colors are used by default:

Common Use Cases

Basic Color Selection:

<x-colorpicker label="Theme Color" name="theme_color" value="#3B82F6" />

With Custom Presets:

<x-colorpicker 
    label="Brand Color" 
    name="brand_color" 
    :presets="['#FF0000', '#00FF00', '#0000FF']" 
    value="#FF0000" 
/>

Input Only (No Presets):

<x-colorpicker 
    label="Custom Color" 
    name="custom_color" 
    :show-presets="false" 
    value="#8B5CF6" 
/>

Swatch Only (No Input):

<x-colorpicker 
    label="Quick Color" 
    name="quick_color" 
    :show-input="false" 
    value="#10B981" 
/>

With Validation:

<x-colorpicker 
    label="Required Color" 
    name="required_color" 
    required 
    error 
    errorMessage="Please select a color" 
    value="#000000" 
/>

Events

The component dispatches a color-changed event when the color is updated. You can listen to this event using Alpine.js: 

<div x-data="{ selectedColor: '#3B82F6' }">
    <x-colorpicker 
        name="color" 
        value="#3B82F6"
        x-on:color-changed="selectedColor = $event.detail"
    />
    <p>Selected: <span x-text="selectedColor"></span></p>
</div>