Paleta desde una imagen
Los colores de una imagen
Imagen
o suéltela aquí, o péguela (Ctrl+V)
La imagen se queda en su navegador: nunca se envía.
Paleta
Añada una imagen para extraer sus colores dominantes.
Acerca de la herramienta
Esta herramienta encuentra los colores dominantes de una imagen: la foto de un producto para vestir una página, un logotipo para crear una paleta de marca, una captura cuyo ambiente quieres reutilizar. Eliges una imagen, la sueltas en la zona o la pegas con Ctrl+V, y ajustas el número de colores entre 2 y 12. Cada color se muestra con su porcentaje en la imagen y sus valores hex, rgb y oklch.
Primero la imagen se reduce a 160 px como máximo en su lado mayor; después sus colores se agrupan con k-medias en el espacio OKLab, cercano a la percepción humana. Los píxeles casi transparentes se ignoran. La paleta se exporta como variables CSS en :root, como bloque @theme para Tailwind v4 o en JSON, con valores hex u oklch y el nombre de paleta que elijas.
Cómo usarla
- Pulsa «Elegir una imagen», suelta un archivo en la zona o pégalo con Ctrl+V.
- Ajusta el «Número de colores» y escribe un «Nombre de la paleta».
- Haz clic en una muestra o en un valor de la «Paleta» para copiarlo.
- En «Exportar», elige los «Valores exportados» (hex u oklch), abre la pestaña «Variables CSS», «Tailwind v4» o «JSON» y pulsa «Copiar».
Preguntas frecuentes
¿Se envía mi imagen a un servidor?
No. La imagen se dibuja en un canvas dentro de tu navegador y sus píxeles se analizan ahí. Nunca se envía ni se guarda: solo se recuerdan el número de colores, el nombre de la paleta y el formato de exportación.
¿Cómo se calculan los colores dominantes?
Primero se agrupan los píxeles parecidos y luego un algoritmo de k-medias ponderado busca el número de colores pedido en el espacio OKLab. El porcentaje indica la parte de píxeles opacos asignados a cada color, ordenados del más presente al menos presente.
¿Cómo es la exportación para Tailwind?
Es un bloque @theme con el formato de Tailwind CSS v4, con una variable por color, como --color-nombre-1 y --color-nombre-2. Después puedes usar clases como bg-nombre-1 en tus componentes. La exportación CSS genera las mismas variables en :root, sin el prefijo color.
¿Por qué no aparece ningún color?
Los píxeles con menos del 50 % de opacidad se ignoran. Si toda la imagen es transparente, la herramienta no tiene colores que extraer y lo indica. También se rechaza un archivo que no sea una imagen o que el navegador no sepa decodificar.