Una captura de pantalla suele ser lo único que tienes. No puedes abrir el CSS del sitio, no puedes inspeccionar la app, no tienes el archivo de diseño, pero puedes ver los colores en pantalla, y una captura los congela en una imagen que puedes muestrear. Aquí tienes cómo sacar códigos de color exactos de una.
Por qué una captura es la fuente honesta
Cuando haces una captura de una página o app renderizada, capturas los colores tal como aparecen de verdad, después de aplicar cada degradado, superposición y opacidad. Eso a menudo es más fiel que el valor de origen. Una tarjeta definida como #000000 al 90 % de opacidad sobre un fondo gris no es negra en pantalla; es un gris oscuro específico. Inspeccionar el código te da la receta; muestrear la captura te da el color que el usuario ve de verdad. Cuando estás igualando ese aspecto, la captura es lo que quieres leer.
Elige un color en tres pasos
- Haz y carga la captura. Captura la pantalla (o la región que te interesa) y suelta la imagen en el selector.
- Pasa el cursor hasta el píxel. Una lupa sigue tu cursor y amplía el área bajo él, para que puedas acertar con precisión, incluso en un borde fino o un icono pequeño.
- Haz clic para guardar y luego copia. Cada clic conserva el color como una muestra con su HEX, RGB y HSL, cada uno con un botón de copiar. Copia el formato que necesites y pégalo en tu hoja de estilos o herramienta de diseño.
Cosas a vigilar propias de las capturas
Las capturas tienen peculiaridades que pueden desviar una muestra de color, y son fáciles de evitar una vez que las conoces:
- Guarda como PNG, no como JPEG. La compresión JPEG emborrona ligeramente los colores, sobre todo cerca de los bordes y en las zonas planas, así que un valor muestreado puede alejarse del verdadero. PNG es sin pérdida y mantiene cada píxel exacto; la mayoría de las herramientas de captura del sistema ya usan PNG por defecto.
- Cuida el nivel de zoom. Una captura tomada con un zoom del navegador o del sistema distinto del 100 % está escalada, y el escalado mezcla los píxeles vecinos. Para la muestra más limpia, captura al 100 %.
- Evita bordes y texto. El suavizado (anti-aliasing) hace que los píxeles a lo largo de cualquier borde sean mezclas, no el color real. Muestrea desde el centro de una zona sólida; la lupa te ayuda a ver que estás lejos del límite difuso.
- Cuidado con el color subpíxel del texto. Amplía sobre texto renderizado y verás franjas de color que no son el valor real del texto. Elige colores de rellenos y fondos, no de los trazos de las letras.
Leer HEX, RGB y HSL
Cada muestra enseña los tres formatos a la vez:
- HEX (
#3A7BD5): el valor por defecto para CSS y herramientas de diseño. - RGB (
rgb(58, 123, 213)): valores por canal, útiles cuando necesitas transparenciargba. - HSL (
hsl(215, 65%, 53%)): tono, saturación, luminosidad, ideal cuando quieres retocar el color en lugar de copiarlo exacto.
No hay que volver a muestrear para cambiar: el mismo color ya está ahí en los tres.
Captura todo un esquema de una pasada
Desde una captura puedes reconstruir todo un esquema de color: haz clic en el color de la cabecera, el botón, el enlace, el fondo, el texto atenuado. Cada uno se apila en la lista para que saques el conjunto completo en una sola sesión y los copies en orden.
Si en cambio quieres la paleta general de una imagen resumida para ti —el puñado de tonos dominantes—, ese es un trabajo aparte, y la herramienta de paleta de img.diy los extrae automáticamente. Este selector es para apuntar a un píxel concreto de la captura; la herramienta de paleta es para caracterizar la imagen en conjunto.
Nada sale de tu máquina
Las capturas a menudo contienen cosas que preferirías no subir: un panel interno, un borrador privado, la interfaz sin lanzar de un cliente. Aquí la imagen se lee localmente en tu navegador desde un canvas: nada se envía a ninguna parte, no hay cuenta, y funciona sin conexión tras la primera carga. Consigues los colores sin que la captura salga jamás de tu dispositivo.
Haz la captura, pasa el cursor al píxel, haz clic y copia.