Cómo funciona el cuentagotas de píxeles
La imagen se dibuja en un lienzo interno a su resolución natural y cada clic sobre ella se convierte en las coordenadas del píxel correspondiente (mapeando las medidas en pantalla con sus píxeles reales, para que el color sea exacto aunque la vista esté reducida). Después se lee el color de ese píxel concreto y se muestra en los tres formatos.
Para dar en el píxel justo, una lupa cuadrada muestra los 25 píxeles vecinos ampliados con una cuadrícula, y también puedes arrastrar sobre la imagen para recorrer colores en vivo, moverte con las flechas del teclado o pegar una imagen directamente con Ctrl+V.
- Clic o arrastre: elige el color de un píxel o recorre la imagen viendo el color en vivo.
- Teclado: flechas para moverte píxel a píxel (con Mayús, de 10 en 10) y Enter o Espacio para elegir.
- Cuentagotas del sistema: si tu navegador soporta la API EyeDropper (Chrome y Edge recientes), aparece un botón para capturar un color de cualquier parte de la pantalla; en Firefox o Safari el botón no aparece y todo lo demás funciona igual.
La lupa y el cuentagotas del sistema son ayudas opcionales: el color que se copia siempre es el del píxel exacto que elijas, no una aproximación visual.
HEX, RGB y HSL: qué formato usar en cada caso
Los tres formatos describen el mismo color, así que elige el que hable el idioma de la herramienta que vayas a usar. Tomemos el azul del degradado de ejemplo de esta página, el #3B82F6: en RGB es rgb(59, 130, 246) y en HSL es hsl(217, 91%, 60%).
- HEX (#3B82F6): el formato estándar de Photoshop, Figma, Canva, Tailwind o cualquier editor de diseño. Es el que debes copiar si te lo piden en un programa.
- RGB (rgb(59, 130, 246)): el formato de CSS cuando necesitas transparencia, por ejemplo rgba(59, 130, 246, 0.5) para un color semitransparente.
- HSL (hsl(217, 91%, 60%)): el formato más humano para crear variantes: sube o baja la luminosidad (el tercer número) y tendrás una versión más clara u oscura del mismo color; gira el tono (primer número) para obtener colores armónicos.
Usos típicos: diseño, CSS y decoración
- Diseño y marca: recupera el color exacto del logotipo de tu empresa cuando solo tienes la imagen y nadie te pasa los códigos.
- CSS y webs: copia el color de una captura de pantalla que te guste y pégalo en tu hoja de estilos, o averigua qué color usan en una foto de referencia.
- Decoración y reformas: saca el color dominante de una tela, un suelo o un cuadro para buscar pintura, muebles o complementos que combinen.
- Paletas: guarda los colores que vayas encontrando en la paleta de la herramienta y llévatelos a la sesión de diseño siguiente.
Si vas a usar el color para texto, comprueba antes el contraste con la herramienta de contraste WCAG: un color bonito puede ser ilegible sobre fondo blanco o negro.
Tu imagen no se sube a ningún sitio
Todo el proceso ocurre dentro de tu navegador: la imagen se lee del disco con JavaScript, se dibuja en el lienzo y el color se lee de la memoria de tu propio dispositivo. No hay subidas, ni servidores, ni análisis remotos.
La paleta de colores elegidos se guarda en tu navegador (localStorage, máximo 12 colores) para que la encuentres la próxima vez. Esa paleta solo contiene los códigos de color, nunca la imagen: si quieres empezar de cero, el botón «Vaciar paleta» lo borra todo.