Selector de color

Muestras de color redondas; la elegida recibe un anillo animado y su nombre aparece debajo.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Código

index.html

<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">Azul</b></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Filtros

Chips de filtro

FiltrosReact + Motion

Control segmentado

FiltrosReact + Motion

Desplegable multiselección

FiltrosReact + Motion

Chips con píldora deslizante

FiltrosHTML + CSS

Chips rellenos desde el centro

FiltrosHTML + CSS

Chips con borde degradado

FiltrosHTML + CSS

Chips con check

FiltrosHTML + CSS

Chips con X para quitar

FiltrosHTML + CSS

Dónde usarlo

La fila de colores de una ficha de producto es donde la gente se enamora del artículo. Imagina una tienda de mochilas con seis tonos: tocas uno, un anillo lo rodea y el nombre del color sale debajo. Cambiar la foto del producto a juego es el siguiente paso lógico. Es, en el fondo, un selector de variantes.

Enseña siempre el nombre del color, no solo el círculo; en pantalla «Azul marino» y «Negro» se confunden fácilmente. Añade un borde sutil a los tonos muy claros, o el blanco desaparece sobre una página blanca.