Selector de color online: descubre el color de cualquier imagen

Para quién es este selector de color

Este selector de color está pensado para quien necesita saber con exactitud el código de un color que ya aparece en una imagen. Señalas el píxel y obtienes un valor listo para usar. Resulta especialmente útil para:

• Diseñadores gráficos y de UI/UX, que necesitan reproducir el color de una referencia, de un mockup o de la identidad visual de un cliente.
• Desarrolladores front-end, que reciben una captura o un PNG en lugar del archivo de diseño y necesitan el HEX para escribir el CSS.
• Community managers y creadores de contenido, que quieren mantener publicaciones, portadas e historias dentro de la paleta de colores de la marca.
• Estudiantes de diseño, arte o tecnología, que están aprendiendo la relación entre lo que ve el ojo y los números de un código de color.
• Cualquier persona que quiera identificar el color de un logotipo, de una foto de producto o de una captura de pantalla para usarlo en otro lugar.

Cómo usar el cuentagotas paso a paso

1. Carga la imagen. Puedes hacer clic en el área de carga y elegir el archivo, arrastrar y soltar la imagen sobre ella o pegarla desde el portapapeles con Ctrl+V (Cmd+V en Mac). Pegar es lo más rápido para las capturas: haz la captura de pantalla y pégala directamente en la página.
2. Pasa el ratón sobre la imagen. Una lupa sigue al cursor y muestra ampliados los píxeles de alrededor, para que veas exactamente dónde vas a hacer clic.
3. Haz clic en el píxel. El color se captura y los códigos aparecen al instante en cinco formatos: HEX, RGB, HSL, HSV y CMYK. Cada uno tiene su propio botón de copiar.
4. Revisa el nombre del color. La herramienta muestra el color con nombre más cercano, con un enlace a su página, donde encontrarás más detalles y combinaciones.
5. ¿Necesitas un color que está fuera de la imagen? Usa el botón «Capturar de la pantalla». Recurre a la EyeDropper API, disponible en Chrome y Edge, y te permite tomar el color de cualquier punto visible en la pantalla, incluso de otras ventanas.

Si lo que buscas son los colores dominantes de una foto completa, y no los de un punto concreto, el extractor de paleta lo hace de forma automática. La guía cómo saber el color de una imagen compara ambos métodos.

Consejos para capturar el color exacto

El color que percibes en una zona no siempre es igual en todos sus píxeles. Algunos hábitos te evitarán sorpresas.

Usa el zoom y la lupa

El zoom va de 1x a 8x. En textos finos, iconos y contornos, amplía antes de hacer clic: a partir de 4x cada píxel es lo bastante grande como para elegir uno del centro del trazo y no uno del borde.

Ojo con el antialiasing y la compresión JPEG

Los bordes de letras y formas se suavizan (antialiasing): los píxeles del contorno mezclan el color del elemento con el del fondo. Por eso, al hacer clic en el borde de un logotipo sueles obtener un tono intermedio. Apunta al centro de las zonas sólidas.

Los archivos JPEG añaden otro problema: la compresión genera pequeñas variaciones y ruido en bloques de 8×8 píxeles, así que una zona que debería ser lisa puede tener píxeles ligeramente distintos. Siempre que puedas, usa un PNG o el archivo original.

Compara varios puntos

En fotos, degradados y superficies con textura no existe un único color «verdadero». Haz clic en tres o cuatro puntos de la misma zona y compara los resultados en el historial. Si los valores son parecidos, quédate con el que mejor represente la zona; si varían mucho, se trata de un degradado y quizá el extractor de paleta sea la herramienta adecuada.

Qué hacer con el color después de capturarlo

Obtener el código es solo el principio. La herramienta también te ayuda a convertir un color en un conjunto utilizable.

Tonos claros y oscuros

Se generan 10 tonos claros (tints, el color mezclado con blanco) y 10 tonos oscuros (shades, el color mezclado con negro). Sirven para los estados de un botón (hover, activo, desactivado), fondos suaves y bordes, siempre dentro de la misma familia de color.

Armonías de color

A partir del color elegido, la herramienta calcula seis armonías en el círculo cromático: complementaria, análoga, tríada, tetrádica, complementaria dividida y monocromática. Si no sabes cuál elegir, la guía de armonía de colores explica cuándo funciona mejor cada una.

Contraste y accesibilidad

Antes de usar el color en un texto o en un botón, comprueba que tenga contraste suficiente con el fondo en el verificador de contraste. Un color de marca puede quedar muy bien en un banner y ser ilegible en un párrafo.

Historial y exportación

Los últimos 14 colores capturados se guardan en el historial de tu navegador, así que puedes cerrar la pestaña y seguir más tarde. Cuando termines, exporta la paleta en JSON, para usarla en código o en un sistema de diseño, o en PNG, para compartirla con tu equipo o con un cliente.

HEX, RGB, HSL, HSV y CMYK en pocas palabras

Todos los formatos describen el mismo color, solo que de maneras distintas. Toma como ejemplo #FF5733:

• HEX (#FF5733): tres pares hexadecimales para rojo, verde y azul. Es el formato más habitual en CSS y en las herramientas de diseño.
• RGB (rgb(255, 87, 51)): los mismos tres canales en decimal, de 0 a 255.
• HSL (hsl(11, 100%, 60%)): tono en grados, saturación y luminosidad. Es el más práctico para crear variaciones a mano.
• HSV (hsv(11, 80%, 100%)): parecido a HSL, pero usa «valor» en lugar de luminosidad; es el modelo de los selectores de color de Photoshop y Figma.
• CMYK (cmyk(0%, 66%, 80%, 0%)): una aproximación para impresión en cian, magenta, amarillo y negro.

Para conocer cada formato en detalle, lee la guía de códigos de color. Si necesitas LAB, OKLCH o una variable CSS lista para usar, pega el código en el conversor de colores.

Privacidad: tu imagen no sale de tu dispositivo

Todo el procesamiento ocurre en tu navegador. La imagen se dibuja en un elemento canvas local y los píxeles se leen ahí mismo, sin subir nada a ningún servidor. Por eso puedes usar el selector con material confidencial, como diseños aún no publicados o capturas de sistemas internos, sin que se transmitan. El historial de colores también se guarda solo en el almacenamiento local del navegador y puedes borrarlo cuando quieras.