Seleccioná una imagen
Subí un archivo JPG, PNG o WebP desde tu dispositivo o arrastralo hasta el área de carga.
Herramienta gratis
Extractor de colores de una imagen
Subí una imagen, generá una paleta de colores dominantes y obtené códigos HEX, RGB y HSL listos para copiar o exportar.
◉
Subí una imagen
Arrastrá una imagen o seleccioná un archivo JPG, PNG o WebP.
Formatos permitidos: JPG, PNG y WebP.
Tamaño máximo: 20 MB.
Hacé clic sobre cualquier punto de la imagen para identificar su color.
Cómo usar la herramienta
Cómo extraer colores de una imagen
El extractor de colores de SG Hub analiza una imagen JPG, PNG o WebP y genera una paleta con sus colores dominantes. También podés seleccionar un color exacto haciendo clic sobre cualquier punto de la imagen.
Elegí la cantidad de colores
Definí cuántos colores querés incluir en la paleta dominante.
Extraé la paleta
Analizá la imagen para identificar automáticamente sus colores más representativos.
Seleccioná colores exactos
Hacé clic sobre cualquier punto de la imagen para obtener su valor HEX, RGB y HSL.
Copiá o exportá
Copiá los códigos individualmente o descargá la paleta como CSS, SCSS o configuración de Tailwind.
Qué es una paleta de colores
Una paleta de colores es un conjunto de tonos relacionados que se utilizan en un diseño, una identidad visual, una interfaz o una pieza gráfica.
Extraer colores desde una fotografía, ilustración o logo permite reutilizar su estética en páginas web, presentaciones, publicaciones y materiales de marca.
La herramienta genera una selección aproximada de colores dominantes y también permite tomar colores exactos desde píxeles individuales.
Cómo se calculan los colores dominantes
La imagen se reduce internamente para analizarla de forma rápida sin modificar el archivo original.
Los píxeles transparentes se ignoran y los colores similares se agrupan para evitar paletas repetitivas.
Los tonos demasiado cercanos al negro o al blanco pueden omitirse durante el análisis automático para obtener una paleta más representativa.
El resultado puede variar según la iluminación, el contraste, la cantidad de colores y la composición de la imagen.
Qué significan HEX, RGB y HSL
HEX
Representa un color mediante seis caracteres hexadecimales. Es uno de los formatos más utilizados en CSS y diseño web.
#22D3EERGB
Define un color mediante sus componentes rojo, verde y azul, con valores entre 0 y 255.
rgb(34, 211, 238)HSL
Describe un color según tono, saturación y luminosidad, facilitando ajustes visuales y variaciones.
hsl(188, 86%, 53%)Cómo seleccionar un color exacto
Después de cargar una imagen, hacé clic sobre el punto que querés analizar. La herramienta calcula la posición dentro de la imagen original y obtiene el color de ese píxel. Luego podés copiarlo o agregarlo a la paleta.
Cómo crear una paleta personalizada
Podés combinar los colores dominantes con colores seleccionados manualmente. Si un color ya existe en la paleta, no se agregará nuevamente. También podés eliminar tonos antes de exportar.
Formatos de exportación
CSS
Genera variables personalizadas dentro de :root para utilizarlas con var(--palette-1).
SCSS
Genera variables Sass como $palette-1, $palette-2 y las siguientes.
Tailwind
Genera un ejemplo de configuración con nombres de colores que podés adaptar a tu proyecto.
Usos frecuentes
- Crear una paleta desde una fotografía.
- Obtener los colores de un logo.
- Diseñar una identidad visual.
- Preparar variables CSS para una página web.
- Crear combinaciones para redes sociales.
- Tomar colores de una ilustración.
- Analizar colores de productos.
- Crear temas para interfaces.
- Obtener colores para presentaciones.
- Preparar una configuración de Tailwind.
Consejos para obtener mejores resultados
Usá imágenes con buena iluminación y contraste.
Probá diferentes cantidades de colores para obtener una paleta más simple o más detallada.
Seleccioná manualmente los colores importantes que no aparezcan entre los dominantes.
Eliminá tonos demasiado similares antes de exportar.
Verificá el contraste entre colores claros y oscuros si los usarás en textos.
No dependas solamente de una fotografía para definir una identidad visual completa.
Accesibilidad
Color y accesibilidad
Una paleta visualmente atractiva no garantiza que todos los textos sean legibles. Al utilizar colores en una interfaz, comprobá el contraste entre texto y fondo, especialmente en botones, enlaces, formularios y contenido principal.
Privacidad
Análisis privado en el navegador
La imagen se analiza localmente mediante Canvas. El archivo no se envía a SG Hub ni se almacena en un servidor.
Limitaciones
Los colores dominantes son una aproximación calculada a partir de una muestra reducida.
Las imágenes con degradados pueden contener muchos tonos similares.
La gestión de color puede variar ligeramente entre pantallas y navegadores.
Un píxel transparente puede no devolver un color visualmente útil.
La herramienta no sustituye una evaluación profesional de accesibilidad o identidad de marca.
Otras herramientas para imágenes
Podés preparar la imagen antes de extraer sus colores utilizando el recortador, editor de dimensiones, compresor o convertidor.
Herramientas relacionadas