Cómo usar: Extraer colores de una imagen
- Arrastra la imagen cuyo color quieres conocer o haz clic para seleccionarla. Si tienes una captura de pantalla, también puedes pegarla directamente con Ctrl+V.
- Al mover el ratón sobre la imagen verás en tiempo real el color que hay bajo el cursor. Haz clic en el punto que quieras para fijar el color y guardarlo en el historial.
- Pulsa los botones HEX, RGB o HSL para copiar el código de color en ese formato.
- En colores principales, más abajo, verás los colores dominantes de toda la imagen y el porcentaje que ocupa cada uno.
Cómo obtener el código de color de una foto
Una imagen digital está formada por puntos diminutos (píxeles), y cada píxel guarda la intensidad de tres luces, rojo (R), verde (G) y azul (B), con un número del 0 al 255. Esta herramienta lee el valor RGB exacto del píxel en el que haces clic y te lo muestra en estos formatos:
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX | #2563EB | Web (CSS), campos de color de Figma y Photoshop |
| RGB | rgb(37, 99, 235) | CSS, programación, edición de vídeo |
| HSL | hsl(221, 83%, 53%) | Para ajustar tono, saturación y luminosidad |
En una foto, aunque sea el mismo objeto, cada píxel tiene un color algo distinto por culpa de la iluminación y la compresión. Si necesitas un color exacto, como el de un logotipo, elige la zona más amplia y uniforme. Para pasarlo a otros formatos (CMYK, por ejemplo), usa el conversor de códigos de color.
Cómo se extraen los colores principales (paleta)
Los colores principales se calculan tomando miles de píxeles repartidos por toda la imagen y agrupando los que se parecen mediante el método de agrupamiento k-medias (k-means). Para cada grupo se obtiene el color medio, y los grupos se muestran ordenados de mayor a menor según la proporción de la imagen que ocupan. Las zonas transparentes no se tienen en cuenta.
La paleta es un buen punto de partida para elegir la combinación de colores de una web o de una presentación. Si usas el color con mayor porcentaje como fondo y el segundo o tercero como color de acento, conseguirás un diseño que combina bien con la foto. Si aumentas el número de colores, aparecerán tonos más finos.
Averiguar los colores de una web o una app con una captura de pantalla
- En la pantalla cuyo color quieres conocer, captura una zona con
Win + Shift + Sen Windows oCmd + Shift + 4en Mac. - Vuelve a esta página y pulsa
Ctrl + V(Cmd + Ven Mac): la captura se abrirá al momento. - Haz clic sobre el botón o el texto que te interese y copia su código de color.
La configuración de color del monitor, el modo oscuro o el zoom del navegador pueden hacer que el color capturado varíe un poco respecto al valor original del diseño. Si necesitas un valor exacto, como un color de marca, consulta el archivo de diseño original o el manual de identidad oficial.