Selector de color de imagen

Sube o pega la imagen aquí y haz clic en el píxel que quieras — la herramienta lo lee a través del canvas HTML y muestra los valores HEX, RGB y HSL al instante, copiando el código hex al portapapeles. La lupa amplía los píxeles individuales alrededor de tu cursor para que aciertes exactamente el correcto. No se sube nada a un servidor en ningún momento; todo se ejecuta en tu navegador usando la API canvas de HTML5. Eso lo hace instantáneo, privado y usable sin conexión una vez que la página ha cargado. Para áreas difíciles de clicar, como texto con suavizado de bordes o bordes de logotipos, amplía primero con el zoom incorporado del navegador antes de hacer clic.

Usa este cuentagotas gratuito basado en el navegador: arrastra la imagen, haz clic en un píxel y copia el código. Sin instalar nada, sin registro. A diferencia de Adobe Photoshop o Illustrator — que parten desde unos $20 USD al mes — esta herramienta es completamente gratis. A diferencia de Digital Color Meter de macOS o PowerToys Color Picker de Windows, también extrae automáticamente la paleta dominante de la imagen, por lo que obtienes todos los colores principales a la vez en lugar de hacer clic en cada uno individualmente. imagecolorpicker.com es la alternativa dedicada más popular, pero sube tu archivo a un servidor; esta herramienta no lo hace.

Ambos codifican el mismo color de dos maneras. HEX escribe rojo/verde/azul como tres pares hexadecimales (#FF5733) y es el estándar en CSS y diseño web; RGB usa tres números decimales del 0 al 255 — rgb(255, 87, 51) — habitual en editores de imagen y código. La conversión entre ambos es sin pérdida, y esta herramienta muestra los dos para cada píxel en el que hagas clic. Usa HEX al escribir CSS o clases de Tailwind; usa RGB cuando trabajes con canvas, WebGL o código de procesamiento de imagen que espera canales numéricos. Ambos formatos describen el mismo punto de color sRGB.

HSL describe un color mediante Tono (0-360°), Saturación y Luminosidad — lo que resulta más intuitivo para ajustar colores. Puedes hacer un color más claro o menos saturado sin cambiar su tono en absoluto. CSS admite hsl() de forma nativa, por lo que los diseñadores suelen trabajar en HSL cuando crean una paleta: sube la Luminosidad para un tinte, bájala para una sombra. El selector muestra HEX, RGB y HSL para cada píxel, así puedes copiar el que necesite tu flujo de trabajo. Para Figma, Sketch o Adobe XD, HEX suele ser el formato más rápido para pegar; para Tailwind o propiedades personalizadas de CSS, tanto HEX como HSL funcionan bien.

Solo carga la foto — la paleta dominante aparece automáticamente. La herramienta cuantiza los píxeles de la imagen en clústeres y los ordena por frecuencia, devolviendo los ocho colores más dominantes como muestras con códigos HEX. Haz clic en cualquier muestra para copiarla, o copia toda la paleta de una vez. Adobe Color y el generador de paletas de Canva hacen lo mismo pero requieren cuenta; Coolors.co puede generar paletas desde fotos pero envía la imagen a su servidor. Aquí la extracción de paleta se ejecuta completamente en tu navegador — nada se sube, no se necesita cuenta y no hay anuncios que interrumpan tu trabajo.

La imagen se dibuja sobre un elemento canvas HTML en tu navegador; al hacer clic, se leen los valores rojo, verde y azul de ese píxel mediante la API getImageData y se convierten a HEX, RGB y HSL. Como canvas se ejecuta localmente, no interviene ningún servidor. La lupa usa un segundo elemento canvas para ampliar la región de píxeles alrededor del cursor, permitiéndote apuntar exactamente al píxel correcto incluso en imágenes con detalles finos como texto suavizado, bordes de logotipos o degradados fotográficos.

En esta herramienta, sí — la imagen solo se carga en la memoria de tu navegador y nunca se transmite a ningún lugar. Puedes verificarlo en la pestaña Red de las herramientas de desarrollador del navegador: no se realizan solicitudes después de que carga la página. Eso importa para diseños sin publicar, logotipos de clientes y fotos privadas. Muchos selectores basados en carga — incluyendo imagecolorpicker.com y algunas funciones de Canva — envían tu archivo a un servidor y lo almacenan temporalmente. Esta herramienta procesa todo localmente, así que tus archivos permanecen en tu dispositivo y desaparecen cuando cierras la pestaña.

Sí — el botón 'Seleccionar de pantalla' usa la API EyeDropper (compatible con Chrome y Edge) para muestrear cualquier píxel en cualquier parte de tu pantalla, incluyendo otras ventanas, aplicaciones y pestañas del navegador. El color seleccionado aparece en el mismo panel HEX/RGB/HSL e historial que los colores de imágenes. Para navegadores sin la API (Safari, Firefox), el flujo de captura de pantalla cubre el hueco: presiona Impr Pant o Cmd+Shift+4 en Mac, y luego pega directamente en el selector con Ctrl+V — sin necesidad de guardar el archivo primero. Esto sirve para fotogramas de vídeo, PDFs en el navegador y cualquier página web en vivo.

Guarda o captura el logotipo y arrástralo aquí, luego haz clic en el color de marca y copia el HEX. O sáltate la captura de pantalla por completo: usa el botón cuentagotas de pantalla para muestrear el sitio web en vivo directamente mientras está abierto en otra pestaña. Esto es más rápido que usar las DevTools del navegador para inspeccionar estilos computados, especialmente cuando el color está integrado en un SVG o un recurso de imagen en lugar de una propiedad CSS. El historial guarda tus últimos 16 colores, por lo que puedes recopilar una paleta de marca completa de varias fuentes antes de pasar a tu herramienta de diseño.

La mayoría de las paletas útiles tienen entre 3 y 6 colores: un color dominante, uno o dos secundarios y acentos. El extractor devuelve ocho muestras dominantes para que puedas elegir el subconjunto que mejor funcione — copia muestras individuales o toma el conjunto completo para un panel de inspiración. En la práctica, cuatro colores es un punto de partida sólido: uno primario, uno secundario, uno neutro y uno de acento. Los sistemas de diseño de empresas como Stripe o Linear usan paletas compactas con muchas variantes de luminosidad y saturación de los mismos tonos, en lugar de muchos colores distintos.

HEX para CSS y trabajo web (el más común en bases de código y herramientas de diseño), RGB/RGBA para pantallas y código canvas, HSL para construir paletas y ajustes sistemáticos, y CMYK para salida de impresión. Figma, Sketch y Adobe XD admiten HEX, RGB y HSL. Este selector muestra HEX, RGB y HSL para cada píxel para que puedas copiar el que necesite tu flujo de trabajo sin ninguna conversión manual. Si también necesitas CMYK para trabajo de impresión, pega el HEX en un conversor gratuito en línea — la API canvas no genera CMYK de forma nativa.

Al hacer clic en un píxel, su HEX se copia automáticamente al portapapeles. Cada fila de valores, muestra del historial y chip de paleta también tiene copia con clic — simplemente haz clic en el valor o la muestra y queda copiado. El historial guarda tus últimos 16 colores para que puedas recopilar varios tonos de una imagen en secuencia antes de pasar a otra. Pasa el cursor por las muestras para ver sus valores antes de hacer clic. Si necesitas la paleta completa como lista, usa 'Copiar todo' para obtener los ocho códigos hex separados por comas, listos para pegar en variables CSS o un documento de diseño.

Sí — haz una captura del fotograma o la página y pégala en el selector con Ctrl+V (sin necesidad de guardar un archivo), o usa el cuentagotas de pantalla para muestrear directamente mientras el PDF o el vídeo está reproduciéndose. Para PDFs abiertos en el navegador, el cuentagotas de pantalla suele ser lo más rápido: abre el PDF en Chrome, haz clic en 'Seleccionar de pantalla' y luego en el color que quieras. Para vídeo, pausa en el fotograma primero para obtener la muestra más precisa.

Los navegadores pueden aplicar conversión de perfil de color (ICC) al renderizar imágenes, y las capturas de pantalla heredan el perfil de color de tu pantalla. El selector reporta los valores de píxel sRGB reales tal como los renderiza tu navegador — los valores que usarías en CSS — lo cual es correcto para trabajo web. Si ves una discrepancia con respecto a Photoshop o Figma, verifica que tu pantalla esté calibrada a sRGB y que el archivo de imagen tenga un perfil de color integrado que coincida. Para recursos de logotipos, lo ideal es que el diseñador proporcione directamente los valores HEX de marca en lugar de depender de la extracción.

imagecolorpicker.com es la alternativa más usada — ofrece selección de píxel individual y extracción de paleta, pero sube tu imagen a su servidor y muestra anuncios. Adobe Color extrae paletas de fotos pero requiere una cuenta de Adobe y envía las imágenes a los servidores de Adobe; además no ofrece selección de píxel individual con lupa de zoom. El selector de color de Canva está integrado en el editor de Canva y solo funciona con imágenes dentro de un proyecto de Canva. Digital Color Meter de macOS y PowerToys Color Picker de Windows sirven para muestreo de pantalla pero no extraen paletas de archivos. Esta herramienta es la única opción gratuita, completamente del lado del cliente, con lupa de zoom, cuentagotas de pantalla, historial de 16 colores y extracción de paleta combinados — sin cuenta, sin anuncios, sin subida de archivos.