Estudio de colores de imagen

Analiza colores de imágenes localmente, inspecciona píxeles, crea paletas y armonías y exporta todos los resultados.

Funciones

• Lokale Bildanalyse
• Farbpaletten und Harmonien
• WCAG-Kontrastprüfung
• Analyseexport

Objetivo y privacidad

El Estudio de colores de imagen analiza imágenes locales con precisión de píxel original. Los archivos, píxeles y resultados permanecen en el navegador y no se envían a servidores ni a terceros. La última imagen puede guardarse localmente en IndexedDB para restaurarla en el siguiente inicio.

Requisitos

Se necesita un navegador actual con JavaScript y un archivo de imagen local. El cuentagotas opcional requiere localhost o HTTPS y compatibilidad con EyeDropper.

Pasos

Carga una imagen, selecciona un píxel o color de paleta, abre la vista de análisis necesaria y exporta expresamente el resultado cuando corresponda.

Parámetros

Zoom, modo de desplazamiento, tamaño de paleta, color base, primer plano y fondo influyen en la vista y el análisis.

Resultado

El estudio ofrece valores de píxel, colores dominantes, colección, variantes, armonías, contraste WCAG, tokens de tema y exportaciones locales.

Cargar una imagen

Usa Abrir imagen, arrastra un archivo a la superficie de trabajo o pégalo con Ctrl+V. Se admiten PNG, JPEG/JPG, WebP y BMP. AVIF funciona si el navegador puede decodificarlo; GIF puede admitirse como primer fotograma. Una entrada inválida no sustituye la última imagen válida.

Superficie de trabajo

La barra ofrece reducir, ampliar, 100 %, ajustar y desplazar. La rueda y el teclado controlan el zoom; las flechas mueven la selección de píxel. La lupa de 11×11 y las coordenadas siempre se refieren a los píxeles originales. La barra lateral de análisis puede cerrarse, abrirse y redimensionarse con el separador.

IconButtons y manejo

La primera columna muestra el IconButton AT real y desactivado. Su tooltip y nombre accesible coinciden con la etiqueta y explican la acción sin depender del color.

IconButton	Nombre	Función
	Abrir imagen	Abre el selector de archivos local.
	Cuentagotas de pantalla	Elige un color de pantalla si el navegador y el contexto seguro lo permiten.
	Alejar	Reduce únicamente la vista visible.
	Acercar	Amplía únicamente la vista visible.
	Tamaño real	Restablece la vista al 100 %.
	Ajustar imagen	Centra y ajusta la imagen completa al espacio de trabajo.
	Desplazar	Activa el arrastre del lienzo; el estado pulsado identifica el modo activo.
	Copiar	Copia el valor de color asociado o todos los valores de la colección.
	Añadir a la colección	Guarda el color activo de píxel, pantalla, paleta, variante o armonía.
	Mostrar paleta	Muestra la lista de paleta generada.
	Mostrar datos de color	Muestra el Property Grid del color de paleta seleccionado.
	Vaciar colección	Elimina todos los colores guardados.
	Eliminar entrada	Elimina únicamente la fila correspondiente.

Píxeles y cuentagotas de pantalla

Haz clic para seleccionar un píxel. HEX, HEX8, RGB, RGBA, HSL, HSV, HWB, CMYK, XYZ, LAB, LCH y alfa pueden copiarse por separado o añadirse a la colección. El cuentagotas de pantalla requiere localhost o HTTPS, una acción visible del usuario y un navegador compatible con EyeDropper.

Paleta y colección

La paleta calcula 5, 8, 10, 12 o 16 colores dominantes y sus proporciones. Los colores pueden seleccionarse, copiarse y recopilarse. En la colección pueden inspeccionarse, eliminarse, copiarse juntos o borrarse por completo.

Variantes, armonías, tema y contraste

Variantes crea pasos más claros y oscuros. Armonías muestra relaciones complementarias, complementarias divididas, análogas, triádicas, tetrádicas y monocromáticas. Tema genera tokens claros y oscuros. Contraste evalúa primer plano y fondo según WCAG AA y AAA con una vista previa directa.

Exportación

JSON contiene el estado completo y los metadatos, pero no los bytes de la imagen. CSS contiene variables del tema, paleta y colección. El informe de texto resume la fuente y los resultados principales. Solo se crea una descarga tras una acción explícita.

Errores frecuentes

Los archivos dañados o incompatibles se rechazan. El cuentagotas no aparece sin contexto seguro o soporte del navegador. Un almacenamiento local bloqueado puede impedir la restauración.

Solución de problemas

Todos los controles estándar son accesibles con teclado. Si una imagen no se carga, comprueba el formato y la integridad. Si falta el cuentagotas, usa localhost/HTTPS y un navegador compatible. Recarga la página si falla la restauración local; los archivos originales nunca se modifican.