Logo
Neura
Back to Home

Color Picker

Color picker with integrated Tailwind palette. Accepts Tailwind tokens, hex and RGB. All values are normalized to hex.

Basic Usage

The color picker works without configuration with the full Tailwind palette. Users can select a color from the palette or manually enter a token, hex or RGB. 
<neura::color-picker
    name="favorite_color"
/>

With Label and Hint

Add a label and help text to guide the user.

Choose a primary color for your theme 

<neura::color-picker
    name="theme_color"
    label="Theme Color"
    hint="Choose a primary color for your theme"
/>

Custom Palette

Define your own color palette with custom tokens. Each color must have a token (identifier) and a hex (hexadecimal value). 

<neura::color-picker
    :colors="$brandPalette"
    name="brand_color"
    label="Brand Color"
    placeholder="brand-primary, #0ea5e9 or rgb(14,165,233)"
/>

Free Input (token / hex / rgb)

Users can directly enter:
  • Tailwind Token: red-500, blue-600, etc.
  • Hex: #ef4444 or ef4444 (3 or 6 characters)
  • RGB: rgb(239, 68, 68) or rgba(239, 68, 68, 0.5)
Important: All values are automatically normalized to hex in the hidden input, even if the user enters a token or RGB.
Try entering: red-500, #ef4444 or rgb(239, 68, 68)

With Livewire (wire:model)

The color picker is compatible with Livewire. The value is automatically synchronized and always in hex. 
<neura::color-picker
    wire:model="selectedColor"
    label="Selected Color"
/>

// In your Livewire component
public $selectedColor = '#3b82f6'; // Always in hex

Initial Value

Set an initial value. It can be a token, hex or RGB, but will be normalized to hex.
With Tailwind token:
With hex:
With RGB: 
<!-- Token Tailwind -->
<neura::color-picker name="color1" value="red-500" />

<!-- Hex -->
<neura::color-picker name="color2" value="#3b82f6" />

<!-- RGB -->
<neura::color-picker name="color3" value="rgb(239, 68, 68)" />

// All these values will be normalized to hex in the hidden input

Sizes and Styles

The color picker respects Neura's size and border-radius tokens.
Size sm:
Size md (default):
Size lg: 
<neura::color-picker name="color" size="sm" />
<neura::color-picker name="color" size="md" />
<neura::color-picker name="color" size="lg" />
<neura::color-picker name="color" rounded="none" />
<neura::color-picker name="color" rounded="full" />

With Icon

Add an icon to the left of the input to improve visual understanding. 
<neura::color-picker
    name="icon_color"
    label="Primary Color"
    leftIcon="swatch"
/>

Disabled State

Disable the color picker to prevent any user interaction while keeping the value displayed. 
<neura::color-picker
    name="locked_color"
    value="#0ea5e9"
    label="Couleur verrouillée"
    disabled
/>

Popup Customization

Customize the appearance and positioning of the selection popup.
Compact popup, right-aligned:
Large popup: 
<neura::color-picker
    name="color"
    popupVariant="compact"  // 'menu', 'compact', 'default'
    popupSize="sm"          // 'xs', 'sm', 'md', 'lg'
    popupAlign="right"      // 'left', 'right'
/>

Hex Normalization

Important point: All values are automatically converted to hex, regardless of input format (token, hex, RGB).
Input format → Value in hidden input
red-500 → #ef4444
#3b82f6 → #3b82f6
rgb(239, 68, 68) → #ef4444
rgba(59, 130, 246, 0.5) → #3b82f6 
// Whether the user enters:
- "red-500" (Tailwind token)
- "#ef4444" (hex)
- "rgb(239, 68, 68)" (RGB)

// The hidden input will always contain:
"#ef4444" (normalized hex)

// With Livewire
public $color; // Will always be in hex, e.g.: "#ef4444"

Props

Prop Type Default Description
colors array<{ token?, hex }> Palette Tailwind Displayed color palette. Each element must have token (optional) and hex (required).
value string|null null Initial value (token, hex or rgb). Automatically converted to hex.
name string|null null Hidden input name (for forms). Value is always in hex.
wire:model string - Livewire binding. The property will always contain a hex value.
x-model string - Alpine.js binding. The variable will always contain a hex value.
placeholder string|null Guides token/hex/rgb Help text displayed in the input. Customize it according to your palette.
disabled bool false Disables input and popup opening.
label string|null null Label displayed above the input.
hint string|null null Help text displayed below the input.
leftIcon string|null null Name of the icon displayed to the left of the input.
size string md Input size: sm, md, lg.
rounded string lg Border-radius: none, sm, md, lg, full.
popupVariant string default Popup style: menu, compact, default.
popupSize string md Popup size: xs, sm, md, lg.
popupAlign string left Popup alignment: left, right.