imgglide
Español

Obtener códigos de color de una imagen

Suelta una imagen y toca o haz clic donde quieras un color. Cada muestra se escribe en cuatro formatos, y los colores principales de la imagen aparecen debajo como una paleta ya hecha.

Abre una imagen y toca o haz clic en ella para tomar un color.

o suelta el archivo aquí

También puedes pegar una imagen con Ctrl+V (Cmd+V en Mac).

Tus archivos se procesan en tu propio dispositivo y nunca se suben.

Cómo se usa

  1. Abre una imagen con «Elegir un archivo» o soltándola en la página. Para una captura, usa el atajo Ctrl+V (Cmd+V en Mac) y pégala, o «Pegar imagen» si tu navegador muestra ese botón.
  2. Toca o haz clic en el punto que quieras. Con el ratón, una lupa sigue al puntero; en un teléfono, mantén pulsado y arrastra para verla sobre tu dedo, y levanta el dedo para tomar el color.
  3. Lee los valores bajo «Color elegido»: «HEX», «RGB», «HSL» y «CMYK (aprox.)». Cada línea tiene su propio botón de copiar.
  4. Baja hasta «Colores principales» y pon «Colores» en un valor de 5 a 10. Haz clic en una muestra para ver los códigos de ese color bajo «Color elegido».
  5. «Copiar lista HEX» da un código por línea, «Copiar como CSS» da propiedades personalizadas y «Guardar como PNG» da una imagen de la paleta. «Abrir otra imagen» carga la siguiente.

Qué hace

  • Una lupa de 11 × 11 píxeles

    Pasa el ratón, o mantén pulsado y arrastra en una pantalla táctil, y una lupa muestra una cuadrícula de 11 × 11 píxeles con el píxel objetivo enmarcado y su código HEX debajo. Aparece junto al puntero en una computadora y sobre tu dedo en un teléfono, así que ves qué vecino estás a punto de elegir.

  • Cuatro formatos, un clic cada uno

    Cada muestra se escribe como HEX, RGB, HSL y CMYK, y junto a cada línea hay un botón para copiarla. Un píxel semitransparente recibe un HEX de ocho dígitos más valores RGBA y HSLA, con su opacidad escrita como porcentaje.

  • Las últimas 12 muestras

    «Colores recientes» guarda tus últimas doce muestras y solo almacena sus códigos hexadecimales en este navegador. Haz clic en una para recuperarla o copiarla, y en «Borrar» para vaciar la lista.

  • Colores principales con su proporción

    La paleta encuentra de 5 a 10 colores dominantes, 6 al principio. Cada uno viene con su proporción en la imagen, escrita como porcentaje y dibujada como una barra proporcional. Los cálculos se hacen con una copia reducida a 256 píxeles en el lado largo, y los píxeles casi transparentes no cuentan.

  • Una paleta lista para código o diapositivas

    La versión CSS es un bloque :root con --color-1, --color-2 y así sucesivamente, cada uno seguido de su porcentaje como comentario. El PNG muestra una muestra por color con su código HEX y su proporción debajo, y toma el nombre de tu archivo con -palette agregado.

  • Toma colores de cualquier parte de la pantalla

    En los navegadores que tienen cuentagotas, sobre todo Chrome y Edge de escritorio, «Tomar de la pantalla» lee cualquier píxel visible en tu pantalla, de otra ventana o de una página web, no solo de la imagen abierta. Funciona antes de abrir ninguna imagen, y el color llega a «Color elegido» y a la lista de recientes como cualquier otra muestra.

Conviene saber

Un selector de color responde preguntas pequeñas y prácticas. ¿Qué azul exacto lleva este logo? ¿De qué tono es la pared de esta foto de un anuncio? ¿Qué colores usa la foto de esta diapositiva, para que el título combine? Un código como #E4572E va directo a CSS y a las herramientas de diseño, RGB y HSL son lo que habla la mayoría de los programas gráficos, y CMYK es solo un punto de partida para imprimir.

Ten claro qué estás muestreando. Cada toma lee un único píxel, así que una foto con grano o un JPG con ruido de compresión pueden devolver un color algo distinto del píxel de al lado. Toma unos cuantos vecinos y compara, o deja que los colores principales den la impresión general. Los valores están en sRGB, el espacio de color que usan los navegadores. La línea CMYK se deriva de RGB, lo que la convierte en una conjetura en el mejor de los casos; pide una prueba de color a la imprenta cuando un color deba coincidir exactamente.

Una imagen pequeña se muestra ampliada hasta 4× con bordes de píxel duros, así que es fácil dar con un solo píxel. Todo lo que supere los 16,7 megapíxeles (4096 × 4096) se reduce antes a ese límite, la página lo indica y los colores se leen de la copia reducida. Con el teclado, haz clic en la imagen, muévete con las flechas (Mayús salta diez píxeles) y pulsa Enter para elegir ese píxel.

Preguntas frecuentes

¿Dónde encuentro el valor HEX de un píxel?

Haz clic en el píxel. El valor HEX aparece junto a la muestra grande bajo «Color elegido», con su propio botón de copiar.

¿Puedo sacar una paleta de una foto?

Sí. «Colores principales» lista de 5 a 10 colores dominantes de la imagen con su proporción. Cópialos como lista o como CSS, o conserva una imagen de la paleta con «Guardar como PNG».

¿Por qué la línea CMYK dice que es aproximada?

Las pantallas mezclan luz y las impresoras mezclan tinta, así que un número CMYK derivado de RGB es solo una estimación. Pide una prueba de color a la imprenta antes de fiarte de él.

¿Puedo usar una captura sin guardarla antes?

Sí. Cópiala, haz clic en la página y pega. El atajo es Cmd+V en Mac y Ctrl+V en el resto, y «Pegar imagen» hace lo mismo donde tu navegador lo permite.

¿Por qué no me aparece «Tomar de la pantalla»?

Tu navegador no tiene cuentagotas. Chrome y Edge en una computadora sí lo tienen; la mayoría de los demás, no. Aun así puedes tomar colores de cualquier imagen que abras.

¿La página recuerda mis colores?

Los últimos 12 se quedan en este navegador como códigos hexadecimales, así que te esperan la próxima vez. «Borrar», junto a «Colores recientes», vacía la lista.

Herramientas relacionadas