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.

[ProgrammerZ]

Consider swatch color integration.
If you decide to implement this, please consider ability work well with Popover and accept color dynamically via JS. Reason, I believe swatch color is a better option to select color for UI with ability to select custom color if needed. It can be achieved by creating swatch colors buttons in the Popover and keeping one button as a color picker options.