AIMRAN
Color
Azul
HTML + CSSFilters

Colour swatch picker

Round colour swatches where the chosen one gets an animated ring and its name appears underneath.

Settings

16px
1x

Code

<div class="uv-fcl"><div class="tt">Color</div><div class="rw"><button class="" style="--k2:#1d1d1f"><i></i></button><button class="on" style="--k2:#0071e3"><i></i></button><button class="" style="--k2:#34c759"><i></i></button><button class="" style="--k2:#ff9f0a"><i></i></button><button class="" style="--k2:#ff375f"><i></i></button><button class="" style="--k2:#af52de"><i></i></button></div><b class="nm">Blue</b></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

The swatch row on a product page is often where people fall for a product. Picture a shop selling backpacks in six shades: tap one, a ring closes around it and the colour name shows below. Switching the product photo to match is the natural next step. People searching for a colour swatch selector or variant picker end up here.

Always show the colour name, not just the dot; “Navy” and “Black” are easy to confuse on screen. Add a subtle border on very light swatches, or white disappears against a white page.