Cargando...
Cargando...
Arrastra una foto o captura de pantalla, pasa el cursor para ver una lupa ampliada, haz clic para seleccionar un píxel — copia HEX, RGB o HSL, y ensambla una paleta de hasta 20 colores como variables CSS listas para pegar.
Un selector de color de imagen lee el valor RGB exacto de un solo píxel de una foto, captura de pantalla o maqueta de diseño para que puedas usar ese color en otros lugares — en una paleta de marca, una variable CSS, un token de tema o una coincidencia de pintura. Los diseñadores lo utilizan para extraer colores de tableros de inspiración. Los desarrolladores front-end lo utilizan para hacer coincidir una captura de pantalla con un tema CSS. Los mercadólogos lo utilizan para extraer colores de marca de un logotipo. Los pintores y artesanos lo utilizan para hacer coincidir una foto del mundo real con una muestra de pintura o hilo. A diferencia de un detector de 'color dominante', esta herramienta te da control por píxel: pasa el cursor para previsualizar, haz clic para capturar. La lupa ampliada te muestra el píxel exacto bajo tu cursor con un zoom de 8×, por lo que seleccionar un solo resaltado o un borde de 1 píxel es sencillo. Todo se ejecuta en tu navegador — tu imagen nunca sale de la página.
Arrastra un archivo JPG, PNG, WebP, GIF o BMP al área de carga, o haz clic para seleccionar desde tu dispositivo. La imagen se renderiza en el espacio de trabajo a escala de vista previa, pero el muestreo de píxeles ocurre contra la copia de resolución original.
Mueve tu cursor sobre la imagen. Una lupa ampliada aparece sobre el cursor mostrando el píxel exacto debajo de él con un zoom de 8×, con un marcador de 1 píxel en el centro. La tarjeta de color del cursor debajo del lienzo se actualiza en vivo con HEX, RGB y HSL.
Haz clic en cualquier píxel para agregar su color a la paleta. Los duplicados se omiten automáticamente, por lo que es seguro hacer clic sin inflar la lista. Hasta 20 colores caben en una paleta.
Haz clic en cualquier HEX, RGB o HSL en la paleta para copiarlo al portapapeles. Haz clic en la muestra misma para copiar su HEX. Toda la paleta también se exporta como un bloque de propiedades CSS personalizadas (--color-1, --color-2, …).
Haz clic en Nueva imagen para limpiar el espacio de trabajo y cargar un archivo diferente. Usa Limpiar dentro de la tarjeta de paleta para mantener la imagen pero reiniciar la paleta.
1. Decodifica el archivo fuente con new Image() — el navegador maneja JPG/PNG/WebP/GIF/BMP de forma nativa. 2. Dibuja la imagen de resolución original en un lienzo fuera de pantalla. 3. Renderiza una vista previa reducida en el lienzo visible (máx. 900 px en el lado más largo). 4. Al pasar el cursor, mapea las coordenadas del cursor (x,y) del espacio de vista previa de vuelta a las coordenadas del espacio fuente. 5. Lee el píxel a través de getImageData(sx, sy, 1, 1).data → [R, G, B, A]. 6. Convierte a HEX (R/G/B como hexadecimales de 2 dígitos) y HSL (rgbToHsl).
El muestreo contra el lienzo de resolución completa (en lugar de la vista previa) es importante porque la reducción promedia los píxeles vecinos — lo que parece un rojo limpio en una vista previa de 100px de altura puede ser (240, 30, 30) en lugar del exacto (255, 0, 0) de la fuente. Mapear las coordenadas del cursor de vuelta a la resolución de origen y muestrear allí mantiene el color seleccionado fiel al archivo original. La lupa toma el mismo enfoque: captura un pequeño cuadrado del lienzo de resolución original alrededor del cursor y lo renderiza a 8× en un círculo de 120 píxeles, con imageSmoothingEnabled = false para que los píxeles individuales se mantengan nítidos.
Referencia: MDN — CanvasRenderingContext2D.getImageData
| Fuente | Mejor flujo de trabajo |
|---|---|
Logotipo de marca PNG con fondo transparente | Pasa la lupa sobre el área de color sólido, haz clic una vez. Copia el HEX. Listo en dos clics. La transparencia PNG se renderiza contra el fondo de la página — muestra dentro del logotipo, no en el borde. |
Captura de pantalla de inspiración de un sitio de diseño | Selecciona el fondo, el color de acción principal, el acento secundario y el color del texto del cuerpo. Copia las variables CSS. Las paletas de cuatro colores suelen ser suficientes para recrear un sistema de diseño. |
Foto para referencia artística (gradiente de cielo, coincidencia de pintura) | Usa la lupa para seleccionar píxeles exactos a lo largo del gradiente. Construye una paleta de 5-7 colores para recrear el aspecto. Los gradientes de fotos tienen ruido — selecciona de áreas que se ven sólidas, no de los bordes. |
Captura de pantalla de informe de error con el tono de rojo incorrecto | Pasa la lupa sobre el mal rojo, copia el HEX, pégalo en el problema con el HEX esperado al lado. La lupa hace que los bordes de 1 píxel y las líneas finas sean seleccionables sin hacer zoom en el navegador. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización