Lightweight Alpine.js v3 Color Picker Component – Clean, Fast & Zero Hassle

I needed a super simple color picker for a side project and didn't want to drag in 50kb+ libraries or deal with complicated setup. So I built this tiny thing using only Alpine.js v3 + Tailwind CSS. It's exactly the kind of component I love: copy → paste → done.

Why I made this (and why you might want it)

Most color pickers are either massive full-featured things (great, but overkill) or too basic and missing the little details. This one sits right in the middle:

• Compact 8-column grid of round swatches with nice hover scale effect
• Selected color gets a clean white + blue ring so it's obvious what you picked
• Shows the HEX code right next to a big preview swatch – super readable
• Hidden <input> with x-model → works perfectly with forms, Livewire, Filament, etc.
• Understands ?color=#ff6b6b from the URL and selects it automatically
• If you load a custom color that's not in the list – it just adds it at the top. No errors, no fuss.
• Keyboard friendly + proper aria labels

Real-world places this shines

I already used it in a couple of quick tools:

• Product variant color selector in a small e-commerce dashboard
• Status/tag color picker in an internal Laravel app
• Quick theme color chooser for a personal project generator
• Custom field styling in a Filament resource (pairs beautifully)

Basically anywhere you want users to pick a color without leaving Alpine/Tailwind land.

How to drop it into your project

Just include Alpine & Tailwind (CDN is fine for prototypes), copy the div[x-data="colorPicker()"] block and the script at the bottom. Tweak the colors array to whatever palette your project needs – corporate colors, brand kit, Tailwind defaults, whatever.