Seleccionar color de imagen online | HEX, RGB, HSL | Awesome Toolkit

Selector de Color en Imagen

Haz clic en un píxel de una imagen para obtener su color en HEX, RGB y HSL. Extrae también una paleta de colores dominantes.

Por Marshkalk

Suelta una imagen aquí o

Extraccion de colores de logos sin archivos fuente

Una situacion frecuente en agencias de diseno grafico de España y LATAM: el cliente entrega un logo en JPEG o PNG sin el archivo original de Illustrator o Figma. Esta herramienta resuelve eso en segundos. Carga la imagen, haz clic sobre la zona de color y el codigo HEX exacto aparece de inmediato. En imprentas españolas y latinoamericanas, la conversion entre Pantone y HEX es una necesidad habitual: esta pipette digital permite al menos obtener el valor HEX de pantalla de una muestra impresa fotografiada.

En contextos industriales (construccion, fabricacion), los sistemas RAL son la referencia de color; este selector devuelve el HEX del pixel capturado, no el tono RAL correspondiente , esa conversion requiere una tabla de equivalencias separada. Para extraer una paleta completa desde una imagen, usa el Extractor de Paleta.

Formatos de color

FormatoEjemploUso tipico
HEX#1a73e8CSS, HTML, Figma, XD
RGBrgb(26, 115, 232)CSS, procesamiento de imagen
HSLhsl(217, 79%, 51%)CSS, modo oscuro
RGBArgba(26, 115, 232, 1)CSS con transparencia

Limites del selector al nivel de pixel

La compresion JPEG introduce artefactos: los pixeles en los bordes de un logo pueden no representar el color plano real. Para mejores resultados, usa capturas en PNG. Haz clic en el centro de la zona coloreada, no en los bordes. Los perfiles de monitor (sRGB vs. Display P3 en dispositivos Apple) pueden introducir pequenas diferencias; el valor mostrado corresponde al pixel en sRGB. Para trabajos de impresion, la conversion de HEX a Pantone o CMYK es un paso separado que requiere una herramienta de gestion del color.

Del color seleccionado al sistema de diseno

Con el codigo HEX obtenido, pega el valor en el Generador de Paleta para construir una escala completa de matices y sombras (Tailwind CSS o tokens de Material Design). Este flujo es muy usado en diseno grafico para redes sociales en LATAM, donde mantener consistencia de color entre plataformas es clave.