Cómo funciona
El Selector de color de una imagen te deja hacer clic en cualquier píxel de la imagen que subas para conocer su color exacto: te devuelve el código hexadecimal, los valores RGB y HSL y el nombre de color CSS, si lo tiene. Es un cuentagotas para imágenes que no puedes abrir en Photoshop ni en Figma.
Sacar colores de una foto es una necesidad constante: un cliente te manda una imagen de marca y te pide que uses el mismo color exacto del producto para el fondo; una diseñadora quiere extraer el color dominante de una foto de banco de imágenes para usarlo como acento en la interfaz; alguien que programa necesita el hexadecimal exacto de una maqueta en captura. Esta herramienta te da el valor en todos los formatos que puedas necesitar con un solo clic.
Cómo usarla: sube tu imagen, que se dibuja en el lienzo con toda su fidelidad. Haz clic en cualquier píxel para tomar su color. Los valores hexadecimal, RGB y HSL aparecen al instante. Pulsa "Copiar HEX" para llevarte el valor al portapapeles. Si solo pasas el cursor por encima, sin hacer clic, ves una vista previa del color en tiempo real.
Formatos que devuelve: - Hexadecimal: #3a5f8b (hex web de 6 dígitos) - RGB: rgb(58, 95, 139) - HSL: hsl(212, 41%, 39%) - Nombre de color CSS: la coincidencia más cercana si entra dentro de la tolerancia (por ejemplo, steelblue)
Varias muestras: cada clic añade el color a un historial de paleta. Puedes exportarla como array JSON, como propiedades personalizadas de CSS o como archivo PNG de muestras.
Zoom: en imágenes con mucho detalle donde necesitas acertar con un píxel concreto, usa el zoom del navegador (Ctrl o Cmd más la rueda) sobre el lienzo antes de hacer clic.
Privacidad: la toma de color usa getImageData de la API Canvas. No se envía ninguna imagen.
Preguntas frecuentes
- Haz clic justo encima de ese píxel en el lienzo. Si la zona es muy pequeña, amplía antes con Ctrl o Cmd más la rueda del ratón. La lupa de píxel te muestra el área bajo el cursor ampliada 10 veces para que aciertes con precisión.
- Sí. Cada color que tomas se añade al historial de la paleta. Pulsa Exportar para generar un bloque :root de CSS con propiedades personalizadas, un archivo de variables SCSS o un objeto JSON con todos los colores tomados.
- Los perfiles de color del monitor y la corrección de gamma pueden hacer que el color se vea distinto del valor real del píxel. La herramienta devuelve el valor hexadecimal sRGB exacto que está guardado en la imagen. Para trabajos de color precisos, calibra tu monitor y usa un flujo de trabajo con gestión de color.
- Con esta herramienta no: necesitas subir el archivo. Para sacar colores de una página web, usa las herramientas de desarrollo del navegador (inspecciona el elemento y mira sus valores de color calculados) o una extensión con cuentagotas.
¿Cómo saco el hexadecimal exacto de un píxel concreto?
¿Puedo exportar los colores como variables CSS?
¿Por qué el color que obtengo no es igual al que veo en pantalla?
¿Puedo sacar colores de cualquier imagen de internet sin descargarla?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.