Extractor de Paletas de Color de Imágenes

Suelta una imagen para extraer su color dominante y una paleta completa: copia cada muestra como HEX, RGB o HSL, o exporta variables CSS y colores de Tailwind. Nunca sale de tu navegador.

El Extractor de Paletas de Color de Imágenes decodifica tu imagen y analiza sus colores por completo en tu navegador. La imagen nunca se sube: no se envían a ArrayKit datos de imagen ni colores extraídos.

Abre el Selector de Color de Imágenes

Acerca de Extractor de Paletas de Color

El Extractor de Paletas de Color de Imágenes convierte cualquier imagen en un esquema de color utilizable. Suelta o elige una foto, un logotipo, una captura de pantalla o un maquetado de diseño y hace aflorar el único color dominante más una paleta de los tonos más destacados de toda la imagen. Cada muestra se presenta como HEX, RGB y HSL, así que puedes llevar un valor directamente a CSS, a un token de diseño o a un bote de pintura. Ajusta el tamaño de la paleta de cuatro a doce colores, copia una muestra individual o todos los códigos HEX de una vez, o toma un bloque de variables CSS :root ya hecho y un fragmento de colores de Tailwind para tu tema. Está pensado para diseñadores, desarrolladores front-end y cualquiera que iguale una paleta de marca a partir de una imagen. La imagen se decodifica y sus colores se leen en tu dispositivo: no se sube nada.

Características

Cómo usar Extractor de Paletas de Color

  1. Haz clic en la zona de arrastre o arrastra un archivo de imagen sobre ella
  2. Lee el color dominante y las muestras de la paleta extraída
  3. Cambia las muestras entre HEX, RGB y HSL, o cambia el tamaño de la paleta
  4. Copia una muestra individual, todos los códigos HEX o el bloque CSS o de Tailwind

Ejemplo

Entrada

Uploaded: brand-hero.png (blue / green / red artwork)

Salida

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

Una paleta de tres colores se convierte en un bloque de variables CSS listo para copiar.

Errores comunes y solución de problemas

Preguntas frecuentes

¿Cuántos colores puedo extraer de una imagen?
Puedes extraer de cuatro a doce colores a la paleta, más el único color dominante que se muestra aparte. Cambia el tamaño de la paleta en cualquier momento y las muestras, las variables CSS y el bloque de Tailwind se actualizan al instante.
¿Cuál es la diferencia entre el color dominante y la paleta?
El color dominante es el color más representativo de toda la imagen, mostrado con su HEX, RGB y HSL. La paleta es un conjunto de los colores más destacados de toda la imagen, ordenados según cuánto resaltan.
¿Puedo exportar la paleta como variables CSS o colores de Tailwind?
Sí. La herramienta genera un bloque :root de propiedades personalizadas --color-N y un objeto de colores de Tailwind con claves palette-1, palette-2, y así sucesivamente. Copia cualquiera de los dos con un clic y pégalo en tu proyecto.
¿De qué formatos de imagen puedo extraer una paleta?
PNG, JPEG, WebP, SVG, GIF, AVIF, BMP e ICO funcionan todos. Suelta o elige el archivo y la paleta se genera a partir de los píxeles decodificados en tu navegador.
¿Cómo creo una paleta que iguale mi marca?
Sube tu logotipo, una foto de producto o una captura de tu sitio. El extractor hace aflorar los colores más destacados para que fijes los valores HEX de marca, y luego los exportes como variables CSS o tokens de Tailwind.
¿Por qué dos de mis muestras salieron casi idénticas?
Las imágenes dominadas por un solo matiz producen varios tonos cercanos. Reduce el tamaño de la paleta para fusionarlos, o elige una imagen con más variedad de color para un reparto más amplio.

Herramientas relacionadas

Todas las herramientas de ArrayKit