Sobre la herramienta: Selector de color de imagen
Este selector de color es un cuentagotas online que te dice el código exacto de cualquier color de una foto. Es útil para sacar el color corporativo de un logotipo o de una captura de una web, o para crear una paleta de diseño a partir de los tonos de una foto que te gusta. La lupa permite elegir con precisión de píxel y, en el móvil, al mantener el dedo pulsado y moverlo, la lupa aparece encima del dedo para que no lo tape.
La imagen se procesa solo en tu navegador y no se envía a ningún servidor.
Cómo se usa
- Arrastra una imagen al recuadro de arriba o tócalo para elegirla. Las capturas de pantalla se pueden pegar directamente con Ctrl+V.
- Toca el punto que quieras de la imagen. La lupa te ayuda a ver dónde estás.
- Pulsa Copiar junto al código HEX, RGB o HSL y pégalo en tu herramienta de diseño o en tu CSS.
- En la paleta de colores principales de abajo verás los colores dominantes y su proporción; toca uno para copiarlo.
Cómo leer los códigos de color
| Formato | Ejemplo | Descripción |
|---|---|---|
| HEX | #4F46E5 | Rojo, verde y azul con dos dígitos hexadecimales cada uno (web, Figma) |
| RGB | rgb(79, 70, 229) | Rojo, verde y azul de 0 a 255 (Photoshop, PowerPoint) |
| HSL | hsl(243, 75%, 59%) | Tono, saturación y luminosidad (para variar colores en CSS) |
¿Cómo se crea la paleta de colores principales?
La imagen se reduce y los colores parecidos se agrupan con el método de agrupamiento k-medias (k-means) para encontrar hasta 8 colores que ocupan más superficie. El número bajo cada color es el porcentaje de la imagen que ocupa ese grupo. Una misma imagen siempre da la misma paleta.
En las fotos JPG, por la compresión, una superficie del mismo color puede tener valores ligeramente distintos en cada píxel. Para obtener el color exacto de un logotipo, usa el PNG original o elige el centro de la superficie con la lupa.
Preguntas frecuentes
El código no coincide del todo con el color que veo.
La configuración de color del monitor, el modo oscuro o el perfil de color de la imagen pueden hacer que el color se vea algo distinto. El código extraído es el valor de píxel tal como está guardado en el archivo.
Quiero sacar un color de una web.
Haz una captura de la pantalla (Windows: Win+Mayús+S; Mac: Cmd+Mayús+4), pégala en esta página con Ctrl+V y toca el punto que quieras.
¿Dónde se guardan los colores recientes?
Los 12 últimos colores elegidos se guardan solo en este navegador, así que los verás en tu próxima visita. La imagen no se guarda.
¿Qué pasa con las zonas transparentes?
La paleta se calcula sin los píxeles transparentes. Si tocas un punto transparente, no hay información de color y puede aparecer como negro (#000000).