Blog

Cómo medir colores y espaciados desde una captura

Publicado 25 de octubre de 2026 · selector de color, espaciado, diseño, captura de pantalla

Comprueba un valor hex, un borde de 1 px o el hueco exacto entre dos elementos sin abrir otra app. La lupa, el selector de color y la selección bastan.

Una captura es a menudo la única fuente de verdad que tienes: la incidencia de un cliente, la interfaz de la competencia, un diseño que se publicó distinto de la maqueta. Leer colores y distancias exactos es una habilidad pequeña, y InSnap pone las herramientas en la pantalla de captura, donde ya está la imagen.

Elige el color bajo el puntero

En InSnap, activa el selector de color en Ajustes › Captura de pantalla y haz una captura. Al moverte sobre la imagen congelada, el panel de color muestra el valor que hay bajo el puntero.

• Shift alterna entre RGB y HEX.
• C copia el valor actual al portapapeles.
• La muestra viene de la captura congelada, no de la pantalla en vivo, así que el valor no cambia si debajo se reproduce un vídeo o una animación.

Ese último punto importa para la revisión de diseño: estás midiendo los píxeles que se capturaron, que son exactamente los que contiene el archivo.

Lee un solo píxel con la lupa

La lupa muestra una cuadrícula ampliada alrededor del puntero, con el píxel central marcado. Úsala cuando la pregunta no sea «¿de qué color es esta zona?» sino «¿qué pasa exactamente en este píxel?»:

• ¿Ese es un borde de 1 px o una sombra?
• ¿El separador es un píxel o dos?
• ¿El icono está alineado con la línea base del texto?
• ¿El radio de la esquina es uniforme en las cuatro?

Con el zoom normal, estos detalles desaparecen en el suavizado de bordes. La cuadrícula de píxeles los hace contables.

Mide el espaciado con una selección

No hay herramienta de regla, pero la selección es una regla. Arrastra un recuadro sobre el hueco que quieres medir y lee la etiqueta de tamaño:

1. Inicia la captura y arrastra desde el borde de un elemento hasta el borde del siguiente.
2. Lee el ancho o el alto en la etiqueta de tamaño. Indica píxeles físicos, que es lo que contiene el archivo.
3. Pulsa Esc para cancelar, o copia la selección si también necesitas la imagen.

Dos apuntes prácticos:

• Mide el hueco, no el elemento entero. Una selección desde el borde izquierdo de un botón hasta el borde izquierdo del siguiente te da el paso; resta el ancho del botón si quieres el hueco.
• Ten en cuenta la escala de la pantalla. En una pantalla Retina, 20 píxeles físicos son 10 puntos. Si la especificación de diseño está en puntos, divide por el factor de escala; la captura siempre está en píxeles.

Una lista rápida para la revisión de diseño

Cuando una captura no basta

Los píxeles dicen qué se dibujó, no por qué. Si un color parece incorrecto, revisa el perfil de pantalla y el tema de la app antes de abrir una incidencia; si un hueco parece raro, confirma el nivel de zoom de la página. Una captura hecha con el navegador al 90 % de zoom dará tamaños que no coinciden con el CSS.

Para comparar, captura los dos estados por separado y fija ambos: las ventanas fijadas se quedan por encima de la app, así que puedes alternar entre la maqueta y la implementación sin perder el punto.

Preguntas frecuentes

¿Puedo copiar el valor del color directamente?

Sí. Activa el selector de color, pasa el puntero por el píxel, pulsa Shift para elegir RGB o HEX y luego pulsa C. El valor va al portapapeles, listo para pegarlo en una incidencia o en un archivo de diseño.

¿Cómo mido un hueco en puntos en vez de píxeles?

Lee el tamaño de la selección en píxeles físicos y divídelo por la escala de la pantalla: 2 en una pantalla Retina, 1 en una pantalla estándar, o el valor que indiquen los ajustes de pantalla del sistema para un modo escalado.

¿El selector de color lee la pantalla en vivo o la captura?

La captura. La imagen se congela cuando pulsas el atajo y el selector muestrea esos píxeles, así que el valor coincide con el archivo que guardas o compartes.

Más del blog