Seleccioná una imagen
Subí un archivo JPG, PNG o WebP desde tu dispositivo o arrastralo hasta el área de carga.
Procesamiento local y privado
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.
El archivo se analiza directamente dentro de tu navegador mediante Canvas y no se envía a los servidores de SG Hub.
◉
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.
Consultar la Política de Privacidad →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.
Preguntas frecuentes
Preguntas sobre el extractor de colores
Conocé cómo se procesan las imágenes, qué formatos admite la herramienta y cómo utilizar o exportar la paleta generada.
¿Cómo extraer los colores de una imagen online?
Seleccioná una imagen JPG, PNG o WebP y la herramienta generará automáticamente una paleta con sus colores dominantes.
¿Puedo seleccionar un color exacto de la imagen?
Sí. Hacé clic sobre cualquier punto de la imagen para obtener el color correspondiente a ese píxel.
¿Qué códigos de color muestra la herramienta?
La herramienta muestra cada color en formatos HEX, RGB y HSL.
¿Qué son los colores dominantes?
Son los tonos que aparecen con mayor frecuencia o que representan mejor la composición visual de una imagen.
¿Cuántos colores puedo extraer?
Podés generar una paleta automática de entre 3 y 12 colores.
¿Puedo agregar un color manualmente a la paleta?
Sí. Seleccioná un color desde la imagen y utilizá la opción para agregarlo a la paleta.
¿Puedo eliminar colores de la paleta?
Sí. Cada color incluye un botón para eliminarlo antes de copiar o exportar la paleta.
¿Puedo copiar todos los colores juntos?
Sí. La herramienta permite copiar todos los valores HEX de la paleta en una sola acción.
¿Qué formatos de exportación están disponibles?
Podés descargar la paleta como variables CSS, variables SCSS o un ejemplo de configuración para Tailwind.
¿La imagen se sube a un servidor?
No. La imagen se analiza localmente dentro del navegador mediante Canvas y no se envía a SG Hub.
¿Qué formatos de imagen admite?
La herramienta admite archivos JPG, PNG y WebP.
¿Cuál es el tamaño máximo permitido?
La herramienta acepta imágenes de hasta 20 MB.
¿Los colores extraídos son siempre exactos?
Los colores seleccionados mediante un clic corresponden al píxel analizado. La paleta dominante es una aproximación basada en agrupación y muestreo de colores.
¿Puedo usar la paleta para diseñar una página web?
Sí. Los valores HEX, RGB y HSL pueden utilizarse en CSS, aplicaciones de diseño, presentaciones y herramientas de desarrollo.
Herramientas relacionadas