Obtén los colores exactos de cualquier captura de pantalla
Los colores nacen en los archivos de diseño, pero acaban en capturas de pantalla, y no siempre coinciden. Esta herramienta lee los píxeles reales de cualquier imagen que añadas, así que puedes sacar el código hexadecimal de un color de una imagen en lugar de adivinarlo. Todo funciona con las API de canvas dentro de tu navegador, que leen los colores directamente de los píxeles decodificados.
Cómo usar el selector de colores
- Añade una imagen. Arrastra un archivo, haz clic para elegirlo o pega una captura directamente desde el portapapeles con ⌘V. En un teléfono, toca la tarjeta y elige una foto.
- Apunta con la lupa. Pasa el puntero con el ratón o, en un teléfono, mantén pulsado: la lupa amplía una cuadrícula de 11 × 11 píxeles alrededor del punto y muestra el código hexadecimal en directo, para que des justo con el píxel que buscas.
- Elige y ajusta. Haz clic (o levanta el dedo) para elegir. Cada color elegido se suma a una tira de historial y muestra HEX, RGB y HSL con botones para copiarlos de un toque; las flechas del teclado (o las flechas de la pantalla) mueven la selección píxel a píxel.
- Llévate la paleta. Al cargar la imagen se extraen sus seis colores dominantes: un generador de paletas de colores integrado. Haz clic en cualquier muestra para copiar su código hexadecimal.
En los navegadores basados en Chromium aparece además un botón para elegir colores de la pantalla: un cuentagotas online que toma cualquier píxel visible en tu pantalla, incluso fuera de la imagen.
Cuándo conviene sacar el color de una imagen en vez de abrir el archivo de diseño
El caso más habitual es comprobar el resultado final frente a las especificaciones. El diseño dice que el botón es #2F6BFF; la captura del equipo de QA muestra lo que salió de verdad después de que los temas, la opacidad y la fusión de capas hicieran de las suyas. Elegir el color en la captura lo resuelve en segundos. El otro gran caso es recuperar una paleta cuando no hay ningún archivo de origen: un diseño antiguo cuyo Figma desapareció hace tiempo, la web de un competidor, un póster que fotografiaste. La paleta automática te da unas muestras de partida fieles, y la lupa, los valores exactos de las zonas planas.
Las comprobaciones de color rara vez van solas. Si esa misma captura va a acabar en un informe de errores, marca la diferencia con nuestra herramienta para anotar capturas de pantalla; si va a ir en una presentación, dale un buen acabado con nuestro generador de mockups de capturas.
HEX, RGB y HSL de un vistazo
HEX
Un código hexadecimal escribe un color con seis dígitos en base 16: dos para el rojo, dos para el verde y dos para el azul, así que #2F6BFF significa 47 de rojo, 107 de verde y 255 de azul. Es la moneda común de CSS, de las herramientas de diseño y de los manuales de marca: cópialo para pasar un color de una herramienta a otra sin cambios.
RGB
rgb(47, 107, 255) expresa esos mismos tres canales en decimal, de 0 a 255 cada uno. Es exactamente igual de preciso que el hexadecimal, solo que más fácil de leer y de ajustar canal por canal, y se amplía con naturalidad a rgba() cuando entra en juego la transparencia.
HSL
HSL describe el color tal y como lo pensamos las personas: el tono como un ángulo en la rueda de color, y la saturación y la luminosidad como porcentajes; hsl(223, 100%, 59%) es ese mismo azul. Cópialo cuando quieras crear estados al pasar el puntero (hover) o variantes más claras: ajusta la luminosidad y conserva el tono.
Por qué un píxel elegido puede no coincidir con el valor de CSS
Dos efectos explican la mayoría de las sorpresas. El primero es el suavizado (antialiasing): en el borde de un texto o de una esquina redondeada, el motor de renderizado mezcla el primer plano con el fondo, así que los píxeles del borde no son de ninguno de los dos colores; la lupa existe precisamente para que puedas apartarte del borde y elegir en un relleno uniforme. El segundo es la gestión del color: una captura hecha en una pantalla de gama amplia (los Mac recientes etiquetan las capturas como Display P3) pasa por una conversión de perfil antes de que sus píxeles lleguen a esta página, lo que puede mover un canal un punto o dos. Ninguno de los dos es un fallo: ambos son un registro fiel de lo que mostraba la pantalla. Cuando la exactitud importe, elige en el centro de zonas de color sólido y en capturas hechas en el mismo equipo.
Lo que más ayuda es partir de una imagen limpia. En un Mac, la función “Seleccionar color” de Snapix (⌃⌥C) se salta el archivo por completo: lee cualquier píxel de la pantalla bajo una lupa de aumento y copia su código hexadecimal, sin exportación ni compresión de por medio.