Sacar el color de una imagen: encuentra el código HEX de cualquier color

Añade la imagen y haz clic en el punto que quieras. Su código hexadecimal aparece al instante junto a una muestra grande del color, lista para copiar en una app de diseño, un sitio web o un mensaje.

Para un píxel sólido, el código es su valor exacto. Se lee de la imagen a tamaño completo, nunca de una vista previa reducida, así que un detalle diminuto en una foto de 12 MP conserva su color real.

Esto importa porque las fotos tienen ruido. Dos píxeles uno al lado del otro pueden diferir en varios tonos, incluso en un cielo azul despejado. La lupa marca el píxel central, así sabes qué código vas a obtener antes de hacer clic.

En una captura PNG, los píxeles dentro de un área uniforme como un botón suelen compartir un mismo código. En un JPG, elige lejos de bordes y texto, donde la compresión altera más los colores.

Todo código es un valor sRGB, el estándar para colores web. Algunas fotos de iPhone guardan una gama de colores más amplia. Esas se convierten a sRGB, así que un tono muy vivo puede dar un código ligeramente más apagado.

En Chrome, Edge u Opera en una computadora, haz clic en Elegir desde la pantalla. Tu puntero se convierte en un cuentagotas que lee cualquier píxel de tu pantalla, como un sitio web, una app o un documento. Haz clic en un punto y sus códigos aparecerán aquí como cualquier otra selección.

Firefox, Safari y los navegadores de móvil no pueden leer la pantalla de esta forma, así que el botón no aparece ahí. En su lugar, toma una captura de pantalla, pégala aquí con Ctrl+V (Cmd+V en Mac) y elige el color desde ella.

En el móvil, toma una captura de pantalla y añádela desde tus fotos. En cualquier caso, no hay extensión de navegador ni app de escritorio que instalar.

Cada elección muestra el mismo color en cinco formatos, cada uno con su propio botón de copia. Aquí tienes un píxel morado:

• HEX: #8338ec, el código corto que usan la mayoría de sitios web y apps de diseño
• RGB: rgb(131 56 236), las cantidades de rojo, verde y azul, de 0 a 255
• HSL: hsl(265 83% 57%), el matiz, la saturación y la luminosidad
• HSV: matiz 265°, saturación 76% y valor 93%, el modelo que usan muchas apps de diseño en sus selectores de color
• CMYK: 44% cian, 76% magenta, 0% amarillo y 7% negro, como estimado para impresión

Los códigos HEX, RGB y HSL son CSS válido, así que se pegan directo en una hoja de estilos. Si un píxel es parcialmente transparente, como en el borde suave de un logo PNG, los códigos también conservan esa transparencia, y el color es tan exacto como el navegador puede leerlo.

Encuentra el nombre de un color

Cada selección también recibe un nombre. El selector encuentra el más cercano de los 148 nombres de color CSS y lo muestra como Parecido a, así que ese píxel morado se leería Parecido a: blueviolet. Usa el nombre para describir un color con palabras, o pégalo tal cual en tu CSS.

¿Qué código de color deberías usar?

Usa HEX para la mayoría de trabajos, ya que los sitios web y casi todas las apps de diseño lo aceptan. Los demás códigos ayudan en algunos casos:

• RGB cuando una app pide números separados de rojo, verde y azul
• HSL o HSV cuando quieres aclarar, oscurecer o suavizar un color a mano
• CMYK como punto de partida aproximado para impresión. Viene de una fórmula simple, no de un perfil de impresora, así que pide a tu imprenta que ajuste el color final

Cualquier imagen funciona, desde una foto de móvil hasta una captura de una página web. Usos comunes:

• Capturas de pantalla: copia una captura y pégala aquí para sacar un color de un sitio web o una app
• Logos: saca el color de marca de un archivo de logo cuando no tienes la guía de estilo de la marca
• Fotos: obtén el color de un cielo, un vestido o una pared pintada a partir de una imagen

Guarda los colores que elijas

Cada selección se añade a Tus colores, con la más reciente primero, con espacio para 24. Copia o elimina cualquier color, o borra la lista. Luego exporta toda la lista como:

• Variables CSS para pegar en una hoja de estilos
• Un fragmento de configuración de Tailwind
• JSON con el HEX, RGB y HSL de cada color
• Una imagen PNG de tus muestras para compartir

La lista se guarda en tu navegador, así que sigue ahí después de recargar o al abrir otra imagen. Solo guarda los códigos de color, nunca tus imágenes. Cuando la lista se llena, el color más antiguo se descarta.

Mira los colores principales de tu imagen

El selector también muestra los 6 colores principales de tu imagen. Haz clic en uno para añadirlo a Tus colores. Para obtener los colores principales de toda la imagen como una paleta, con entre 4 y 12 colores, abre el extractor de paletas.

Este selector de color es gratis, sin registro ni cuenta, incluso para exportar tus colores. Tus imágenes se abren en tu móvil u ordenador y nunca se suben. Funciona en el navegador, así que no hay nada que descargar.

• Funciona en móviles, tablets y ordenadores. En pantalla táctil, la lupa se coloca sobre tu dedo, así que tu dedo nunca tapa el píxel.
• También funciona con teclado. Pulsa Tab para ir a la imagen, mueve la mira con las flechas (Shift la mueve 10 px) y pulsa Enter para elegir.
• Abre archivos JPG, PNG, WebP, AVIF, GIF, BMP, SVG, HEIC, HEIF y TIFF de hasta 50 MB. Un GIF usa su primer fotograma.
• Las fotos HEIC de iPhone se abren tal cual, sin necesidad de convertirlas antes.
• Funciona con una imagen a la vez. Abre otra y Tus colores se mantiene como está.