Suelte una imagen aqui
Como Seleccionar y Extraer Colores de Imagenes
Preguntas Frecuentes
Como encuentro el color exacto de un pixel en una imagen?
Como extraigo TODOS los colores de una imagen?
Que hace la tolerancia de Fusionar Similares?
Que son los formatos de color HEX, RGB y HSL?
Puedo usar los colores extraidos en CSS o herramientas de diseno?
color: #3B82F6;. Use valores RGB en herramientas de diseno como Figma, Sketch o Adobe XD. Use HSL para generar variaciones mas claras/oscuras programaticamente. Todo el procesamiento ocurre localmente: sus imagenes nunca se suben a ningun servidor.Selector de Color en Imagenes y Extractor de Paletas — Dos Herramientas en Una
Nuestra herramienta combina un selector de color con precision de pixel con un extractor de paleta de imagen completa. El Selector de Pixeles le ofrece una lupa (zoom de 10x) para apuntar a pixeles individuales y obtener valores exactos HEX, RGB y HSL, ideal para muestrear un color especifico de un logotipo, maqueta de UI o foto. El modo Todos los Colores extrae cada color unico de toda la imagen y los muestra como una cuadricula de muestras ordenable, ordenada por la frecuencia con la que aparece cada color. Juntos cubren el flujo de trabajo completo de extraccion de color: desde el muestreo quirurgicamente preciso de un solo pixel hasta el descubrimiento completo de paletas.
Modo Selector de Pixeles — Precision de Color Quirurgica
El Selector de Pixeles lee el valor RGB exacto del pixel bajo el cursor utilizando el metodo getImageData() de la API Canvas de HTML5. La lupa circular muestra una region de 11x11 pixeles con un zoom de 10x y una superposicion de punto de mira, facilitando apuntar al pixel exacto que desea, incluso en imagenes de alta resolucion donde los pixeles son demasiado pequenos para ver a simple vista. Cada color seleccionado se muestra simultaneamente en tres formatos:
- HEX — El codigo hexadecimal de 6 caracteres (ej., #3B82F6). Estandar para CSS, HTML y desarrollo web.
- RGB — Valores Rojo, Verde y Azul de 0-255. Usado en herramientas de diseno grafico y cuando necesita precision por canal.
- HSL — Tono (0-360°), Saturacion (0-100%), Luminosidad (0-100%). El formato mas intuitivo para crear tintes, sombras y armonias de color.
Haga clic en cualquier color para guardarlo en su historial de paleta (hasta 12 colores). Use el boton Generar Paleta para extraer automaticamente los 5 colores mas dominantes mediante analisis de frecuencia: una forma rapida de obtener el esquema de color principal de cualquier imagen.
Modo Todos los Colores — Extraccion Completa de Paleta
Mientras que el Selector de Pixeles destaca en el muestreo de puntos individuales, la pestana Todos los Colores responde a la pregunta: "Que colores hay realmente en esta imagen?" Muestrea sistematicamente cada pixel (a una resolucion reducida por rendimiento, tipicamente 150x150 pixeles, o 22.500 muestras), elimina los colores identicos duplicados y presenta los resultados como una cuadricula de muestras de color con codigos HEX. Los colores se ordenan por frecuencia: los mas comunes aparecen primero.
El control deslizante de tolerancia Fusionar Similares es el control clave. Sin el, una fotografia podria producir cientos de colores visualmente indistinguibles debido a artefactos de compresion JPEG, degradados sutiles y ruido del sensor. Aumentar la tolerancia fusiona los colores cuya distancia euclidiana en el espacio RGB esta por debajo del umbral. Esto le da una paleta limpia y utilizable en lugar de una lista abrumadora. Para logotipos y graficos de color plano, mantenga la tolerancia en 0-5. Para fotografias, 16-32 produce generalmente los mejores resultados.
Cuando Usar Cada Modo
- Selector de Pixeles: Extraer un color de marca de un archivo de logotipo, muestrear un elemento de UI especifico de una captura de pantalla, obtener el tono de piel exacto de un retrato, hacer coincidir el color del texto con un fondo en una imagen principal.
- Todos los Colores: Crear una paleta de colores completa a partir de un mood board o imagen de referencia, aplicar ingenieria inversa al esquema de color del sitio web de un competidor, analizar la composicion de color de su propio trabajo de diseno, crear un sistema de color de marca a partir de una imagen clave.
- Ambos juntos: Use Todos los Colores para descubrir la paleta, luego cambie al Selector de Pixeles para verificar valores de color especificos a resolucion completa.
Privacidad y Procesamiento
Todo el procesamiento de imagenes ocurre completamente en su navegador utilizando la API Canvas. Sus imagenes nunca se suben a ningun servidor: el archivo permanece en su dispositivo. La herramienta lee los datos de pixeles localmente, realiza todos los calculos en JavaScript y muestra los resultados al instante. Sin cuentas, sin procesamiento en la nube, sin recopilacion de datos. Puede usarla sin conexion una vez que la pagina este cargada.