Image Color Picker: Extraer colores
Image Color Picker extrae valores HEX, RGB, HSL y CMYK de cualquier foto. Haz clic en píxeles, crea paletas, copia colores. Sin subida.
¿Qué es Image Color Picker?
Próximamente: Image Color Picker es una herramienta basada en el navegador que te permite extraer valores de color exactos de cualquier imagen haciendo clic directamente en los píxeles. Sube una foto, mueve el cursor sobre cualquier área para previsualizar el color en una superposición de lupa en tiempo real, y luego haz clic para capturar los valores precisos HEX, RGB, HSL y CMYK en ese punto. A diferencia de las herramientas de desarrollo del navegador o los cuentagotas de escritorio, esta herramienta trabaja con archivos de imagen subidos, construye una paleta a partir de tus selecciones durante una sesión y copia cualquier formato al portapapeles con un solo clic. Todo se ejecuta en tu navegador — sin subidas a servidores, sin cuentas requeridas.
Funciones principales
- Clic para seleccionar colores de imágenes: Cada clic del ratón en la imagen cargada captura el color exacto del píxel en esa posición, teniendo en cuenta cómo se escala la imagen para ajustarse al área de visualización.
- Lupa de zoom para precisión: Al mover el cursor sobre la imagen, un cuadrado flotante de vista previa de 60×60 px sigue tu posición, mostrando el color bajo el cursor y su valor HEX para que puedas ver exactamente lo que estás a punto de seleccionar antes de hacer clic.
- Extraer valores HEX, RGB, HSL, CMYK: Cada color seleccionado se muestra en los cuatro formatos simultáneamente. El componente usa funciones de conversión
rgbToHex,rgbToHslyrgbToCmykde la biblioteca compartida de utilidades de color. - Construir paleta de colores: La herramienta mantiene hasta los últimos 10 colores únicos que has seleccionado en una sesión. Los valores HEX duplicados se ignoran silenciosamente — hacer clic en el mismo color dos veces no agrega una segunda entrada.
- Seguimiento del historial de colores: Los swatches de paleta en los que haces clic te permiten volver a cualquier color seleccionado previamente y ver todos sus valores de formato nuevamente sin volver a seleccionarlo.
- Copiar colores con un clic: Cada fila de formato en el panel de color actual tiene su propio botón de copia. Un botón "Copy All Colors" exporta toda la paleta de la sesión como una lista separada por comas de valores HEX.
- Procesamiento 100% del lado del cliente: La imagen se dibuja en un elemento canvas HTML5 oculto. Todas las lecturas de píxeles usan
getImageData()localmente — ningún dato sale de tu navegador. - Funciona con cualquier formato de imagen: La entrada de archivo usa
accept="image/*", así que cualquier formato que tu navegador pueda decodificar (JPEG, PNG, WebP, GIF, AVIF, SVG) es compatible.
Cómo usar Image Color Picker
Paso 1: Sube tu imagen
Abre el Próximamente: Image Color Picker. Verás un panel de subida con una zona de soltar punteada. Haz clic en la zona para abrir un selector de archivos o arrastra y suelta un archivo de imagen directamente sobre ella. Cuando la imagen se carga exitosamente, la herramienta muestra una notificación "Image loaded" y borra cualquier color seleccionado previamente.
Paso 2: Previsualiza colores al pasar el cursor
Una vez que aparece tu imagen, mueve el cursor sobre cualquier área. Un cuadrado de color flotante de 60×60 px sigue tu cursor, ligeramente desplazado hacia arriba a la derecha para no ocultar el píxel que estás inspeccionando. El cuadrado se rellena con el color en vivo bajo tu cursor y muestra su valor HEX en texto contrastante. Esta lupa desaparece cuando mueves el cursor fuera de la imagen.
Paso 3: Haz clic para capturar un color
Haz clic en cualquier punto de la imagen para fijar ese color. El panel "Current Color" aparece debajo de la imagen mostrando:
- Un swatch de color grande con el valor HEX centrado en texto contrastante
- Cuatro filas para HEX, RGB, HSL y CMYK — cada una con un botón de copia
Por ejemplo, hacer clic en un cielo de tono medio en una fotografía podría producir:
HEX: #6fa8dc
RGB: rgb(111, 168, 220)
HSL: hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)Paso 4: Construye una paleta
Continúa haciendo clic en diferentes áreas de la imagen. Cada color único que seleccionas aparece como un swatch en el panel "Picked Palette" en la parte inferior. Haz clic en cualquier swatch para recargarlo como el color activo actual y ver todos sus valores nuevamente. La paleta guarda hasta 10 colores únicos por sesión.
Paso 5: Copia tus colores
Copia el valor de un formato individual usando el botón de copia en su fila. Para exportar la paleta completa, haz clic en "Copy All Colors" — esto escribe todos los valores HEX en tu portapapeles como una cadena separada por comas, como #6fa8dc, #2d5f8e, #f4c842, #e8573a. Carga una nueva imagen con la zona de subida en cualquier momento; la paleta se reinicia automáticamente.
Ejemplos prácticos
Coincidir colores de marca desde un logo
Tienes un PNG del logo de tu empresa y necesitas los colores exactos de la marca para una hoja de estilos CSS. Sube el logo, mueve el cursor sobre el color primario de la marca y haz clic para capturarlo. Luego selecciona los colores secundarios y de acento. Usa "Copy All Colors" para obtener una lista separada por comas de todos los valores hexadecimales que seleccionaste, y pégalos directamente en tus variables CSS :root.
Muestrear una paleta de colores de una fotografía
Una fotografía de producto tiene un esquema de colores natural que deseas usar para un diseño de interfaz. Sube la foto y haz clic sistemáticamente en los colores dominantes — el tono de fondo, el realce del producto, un área de sombra y un detalle de acento. El panel de paleta acumula hasta 10 swatches únicos. Cuando termines, haz clic en cada swatch para recuperar el valor RGB para usar en herramientas de diseño que aceptan entradas numéricas de color.
Identificar un color de píxel específico para informes de errores
Una interfaz tiene un color de texto incorrecto en un estado particular de un botón y tienes una captura de pantalla. Sube la captura, mueve el cursor sobre el texto del botón y haz clic. Copia el valor HEX e inclúyelo en tu informe de error junto al valor esperado. Esto elimina la ambigüedad sobre qué color exacto se está renderizando incorrectamente.
Consejos y buenas prácticas
Usa imágenes de alta resolución cuando la precisión importa. La herramienta mapea la posición del cursor a las coordenadas reales de píxeles de la imagen usando un factor de escala basado en el tamaño renderizado versus el tamaño del canvas, así que hacer zoom en un detalle en tu editor de imágenes antes de exportar te da más píxeles direccionables por área visual.
La lupa muestra el valor HEX antes de hacer clic — úsala para confirmar que estás exactamente en el píxel correcto en lugar de en un píxel de borde anti-aliaseado vecino, lo cual es especialmente importante cuando muestras de texto o líneas delgadas.
La paleta ignora los valores HEX duplicados. Si deseas comparar dos colores visualmente similares que difieren en un solo canal, selecciona uno, anota sus valores y luego selecciona el otro.
Al copiar todos los colores de la paleta, la salida son valores HEX separados por comas. Pega esto directamente en la entrada hexadecimal del Próximamente: Palette Generator para explorar variaciones de armonía en tus colores extraídos.
Problemas comunes y solución de problemas
Toast "Load error" después de seleccionar un archivo: La imagen no pudo decodificarse después de leerla. Esto suele ocurrir con archivos corruptos o formatos que el navegador no puede analizar (algunos archivos TIFF y RAW de cámara). Convierte la imagen a JPEG o PNG e inténtalo de nuevo.
El clic no produce color / la lupa no aparece: Esto ocurre si el canvas no se inicializó correctamente. Recarga la herramienta y vuelve a subir la imagen. Si la imagen es muy grande (más de 8000×8000 píxeles), algunos navegadores limitan el tamaño del canvas — redimensiona la imagen antes de subirla.
Todos los colores seleccionados parecen idénticos: Puede que estés haciendo clic en un área uniforme (fondo, relleno sólido). Haz zoom en la imagen en un editor de fotos para encontrar áreas con más detalle, luego sube esa versión recortada.
El swatch de paleta no responde al clic: Solo se guardan los 10 colores únicos seleccionados más recientemente. Si ya has seleccionado 10 colores, los colores únicos posteriores reemplazan la entrada más antigua. Hacer clic en un swatch siempre funciona para recargar el color — si la paleta parece no responder, verifica que tu clic cayó en el swatch y no en el espacio entre swatches.
El arrastre y suelta no funciona: La zona de soltar comprueba que file.type.startsWith('image/'). Los archivos sin tipo MIME o con tipos incorrectos se ignoran silenciosamente. Usa el método de clic para navegar como alternativa.
Privacidad y seguridad
Image Color Picker procesa tus archivos completamente dentro de tu navegador. Cuando subes una imagen, se lee como una URL de datos usando la API FileReader y se dibuja en un elemento canvas oculto — no se transmiten datos a ningún servidor. Tus imágenes nunca salen de tu dispositivo. La herramienta funciona sin conexión a internet una vez que la página ha cargado, lo que la hace segura para fotografías confidenciales, activos de diseño propietarios y capturas de pantalla internas.
Preguntas frecuentes
¿Es gratuito Image Color Picker?
Sí, Image Color Picker es completamente gratuito sin límites de uso. No necesitas cuenta, suscripción ni pago para usarlo. La herramienta está disponible en Próximamente: Glyph Widgets y se ejecuta directamente en tu navegador.
¿Funciona Image Color Picker sin conexión?
Sí. Una vez cargada la página, todo el procesamiento usa la API Canvas HTML5 localmente. Puedes desconectarte de internet y continuar seleccionando colores de imágenes sin interrupción. La herramienta no realiza solicitudes de red durante el uso normal.
¿Están seguros mis datos con Image Color Picker?
Tus imágenes se procesan completamente en el lado del cliente usando FileReader y getImageData(). Ningún dato de imagen se sube a ningún servidor. Glyph Widgets no tiene acceso al contenido de los archivos que abres con esta herramienta.
¿Qué formatos de color produce la herramienta?
La herramienta produce cuatro formatos para cada color seleccionado: HEX (p. ej. #6fa8dc), RGB (p. ej. rgb(111, 168, 220)), HSL (p. ej. hsl(210, 59%, 65%)) y CMYK (p. ej. cmyk(50%, 24%, 0%, 14%)). Cada formato tiene su propio botón de copia.
¿Cuántos colores puedo seleccionar en una sesión?
La paleta guarda los últimos 10 colores únicos seleccionados. Los valores HEX duplicados no se vuelven a guardar — hacer clic en el mismo color una segunda vez no tiene efecto en el recuento de la paleta. Cargar una nueva imagen reinicia la paleta a vacío.
¿Qué formatos de imagen son compatibles?
La entrada de archivo acepta cualquier formato de imagen que tu navegador pueda decodificar, usando el atributo accept="image/*". En la práctica, esto incluye JPEG, PNG, WebP, GIF, AVIF y SVG. Los formatos como RAW o TIFF que los navegadores no pueden decodificar de forma nativa producirán un error de carga.
¿Puedo seleccionar colores de la misma imagen nuevamente después de copiar?
Sí. La imagen permanece cargada en la herramienta hasta que la borras o cargas una nueva. Puedes continuar haciendo clic, construyendo tu paleta y copiando colores todo el tiempo que quieras sin volver a subir.
¿Qué tan preciso es el muestreo de color?
La herramienta lee exactamente un píxel en la posición clicada usando getImageData(x, y, 1, 1). El mapeo de escala entre el tamaño de imagen mostrado y las dimensiones reales del canvas se calcula desde getBoundingClientRect(), por lo que el resultado refleja con precisión el verdadero color del píxel en esa posición incluso cuando la imagen se muestra a un tamaño diferente a su resolución nativa.
¿Para qué sirve la lupa?
La vista previa de lupa flotante muestra el color actual bajo tu cursor antes de comprometerte con una selección. Esto te ayuda a identificar exactamente qué píxel estás a punto de muestrear, especialmente útil a lo largo de bordes de color, degradados o bordes anti-aliaseados donde los píxeles adyacentes difieren significativamente.
¿Puedo exportar la paleta completa en una sola acción?
Hacer clic en "Copy All Colors" escribe todos los valores HEX seleccionados en tu portapapeles como una lista separada por comas. Luego puedes pegar esto en herramientas de diseño, variables CSS o en el Próximamente: Palette Generator para trabajo de color adicional.
Herramientas relacionadas
- Próximamente: Palette Generator — Genera armonías de color complementarias, análogas, triádicas y otras desde un color base que extrajiste con el selector.
- Color Converter — Convierte entre HEX, RGB, HSL, CMYK y otros formatos con total precisión.
- Contrast Checker — Verifica los índices de contraste de accesibilidad WCAG entre dos colores de tu paleta.
- Color Picker — Selecciona un color directamente sin una imagen, usando una rueda de color y controles deslizantes.
Prueba Image Color Picker ahora: Próximamente: Glyph Widgets Image Color Picker