Color picker

[hdahon]

Hello,
It would be great to have a Color picker component.

[WorthLMS]

Custom Color Selectors for Clients to choose their own colors when it comes to Labels or Theme. While dev's tend to know hex codes and such, normal users do not :D

[NimaKhadivar]

Color picker component.

[raz-iacob]

I made a livewire color picker component using the input component and the flux:input.group.prefix to add the button.

Screen.Recording.2025-11-28.at.22.21.54.mov

<flux:field>
    <flux:label>{{ $label }}</flux:label>
    <flux:input.group>
        <flux:input.group.prefix>
            <div class="relative size-5 cursor-pointer rounded-full transition-all duration-150 hover:opacity-80 active:opacity-100 overflow-hidden border border-zinc-400" style="background-color: {{ $color ?? $defaultColor }}">
                <input type="color" wire:model.live="color" class="absolute inset-0 size-5 cursor-pointer opacity-0" />
            </div>
        </flux:input.group.prefix>
        <flux:input wire:model.change="textInput" />
    </flux:input.group>
</flux:field>

<?php

namespace App\Livewire;

use Illuminate\Contracts\View\View;
use Livewire\Attributes\Modelable;
use Livewire\Component;

class ColorPickerInput extends Component
{
    #[Modelable]
    public ?string $color = '#000000';

    public string $textInput = '';

    public string $defaultColor = '#000000';

    public string $label = '';

    public function mount(): void
    {
        $this->color ??= $this->defaultColor;
        $this->textInput = $this->colorToHex($this->color);
    }

    public function updatedColor(?string $value): void
    {
        if($value) {
            $this->textInput = $this->colorToHex($value);
        }
    }

    public function updatedTextInput(?string $value): void
    {
        if($value) {
            $this->color = $this->colorToHex($value);
        }
    }

    private function isValidColor(string $color): bool
    {
        return (bool) preg_match('/^#[0-9A-Fa-f]{6}$|^rgb\(\d{1,3},\d{1,3},\d{1,3}\)$|^hsl\(\d{1,3},\d{1,3}%,\d{1,3}%\)$/i', $color);
    }

    private function colorToHex(string $color): string
    {
        if (! $color) {
            return $this->defaultColor;
        }

        $color = strtolower(trim($color));

        if (array_key_exists($color, $this->namedColors())) {
            return $this->namedColors()[$color];
        }

        // Handle hex color
        if (preg_match('/^#[0-9a-f]{6}$/i', $color)) {
            return $color;
        }

        // Handle RGB format
        if (preg_match('/^rgb\((\d+),(\d+),(\d+)\)$/i', $color, $matches)) {
            return sprintf('#%02x%02x%02x', (int) $matches[1], (int) $matches[2], (int) $matches[3]);
        }

        // Handle HSL format
        if (preg_match('/^hsl\((\d+),(\d+)%,(\d+)%\)$/i', $color, $matches)) {
            $h = (int) $matches[1];
            $s = (int) $matches[2];
            $l = (int) $matches[3];

            return $this->hslToHex($h, $s, $l);
        }

        return $this->isValidColor($color) ? $color : $this->defaultColor;
    }

    private function hslToHex(int $h, int $s, int $l): string
    {
        $l /= 100;
        $a = $s * min($l, 1 - $l) / 100;
        $f = function (int $n) use ($h, $l, $a): string {
            $k = ($n + $h / 30) % 12;
            $color = $l - $a * max(min($k - 3, 9 - $k, 1), -1);

            return str_pad(dechex((int) round(255 * $color)), 2, '0', STR_PAD_LEFT);
        };

        return "#{$f(0)}{$f(8)}{$f(4)}";
    }

    private function namedColors(): array
    {
        return [
            'red' => '#ff0000',
            'green' => '#008000',
            'blue' => '#0000ff',
            'black' => '#000000',
            'white' => '#ffffff',
            'gray' => '#808080',
            'yellow' => '#ffff00',
            'purple' => '#800080',
            'orange' => '#ffa500',
            'pink' => '#ffc0cb',
            'brown' => '#a52a2a',
            'cyan' => '#00ffff',
            'magenta' => '#ff00ff',
            'lime' => '#00ff00',
            'teal' => '#008080',
            'violet' => '#ee82ee',
            // Add more named colors as needed
        ];
    }
}

Hope this help you guys. Althog I am looking forward to Caleb's official implementation.