Cuentagotas Online
Extrae color de imagen, copia HEX, RGB o HSL y revisa variaciones, armonías y contraste.
Qué hace Cuentagotas Online
Cuentagotas Online permite cargar una imagen, seleccionar colores directamente sobre ella y convertir cada punto elegido en códigos reutilizables. Es una forma práctica de pasar de una fotografía, captura de pantalla, ilustración, producto o referencia visual a valores concretos como HEX, RGB, HSL, HSV, OKLCH y CMYK. La herramienta combina una zona de imagen, marcadores de selección, una tira de colores elegidos, controles de formato, variaciones cromáticas, armonías, simulación de daltonismo, conversión de códigos y comprobación de contraste.
La utilidad principal está en conservar la relación visual de una imagen real. Muchas imágenes ya contienen una combinación de luces, sombras y acentos que puede inspirar una interfaz o una pieza gráfica. Al extraer color de imagen, puedes tomar un tono dominante para el fondo, un color de acento para botones, un neutro para superficies o una variación oscura para texto. El resultado es más controlado que copiar colores de memoria o aproximarlos en un editor externo.
Un selector de color de imagen también ayuda a evitar errores de percepción. El color que parece principal en una fotografía puede cambiar mucho según la iluminación, el área seleccionada y el contraste con los elementos cercanos. Al colocar marcadores, revisar los códigos y comparar variantes, puedes decidir si el color funciona como referencia o si conviene ajustarlo antes de usarlo en CSS, una guía de estilo o un diseño de producto.
Cómo usar Cuentagotas Online
- Sube una imagen con el botón visible o usa la zona preparada para cargar el archivo cuando la interfaz lo permita.
- Haz clic sobre la imagen para seleccionar un punto de color. El marcador indica la zona tomada como referencia.
- Revisa el color activo en la tarjeta de resultado y copia el valor visible cuando necesites guardarlo rápidamente.
- Cambia el formato entre Hex, RGB, HSL, HSV, OKLCH y CMYK si el proyecto requiere otra notación.
- Añade más colores a la tira de paleta cuando necesites comparar varios puntos de la misma imagen.
- Consulta variaciones y armonías para convertir el color extraído en una combinación más útil para una interfaz o composición.
- Revisa la simulación de daltonismo y la comprobación de contraste si el color se usará en texto, botones o elementos informativos.
- Abre Exportar colores para reunir los códigos elegidos y copiarlos en el formato adecuado.
Cuándo usar un selector de color de imagen
Un selector de color de imagen resulta útil cuando ya tienes una referencia visual y quieres trabajar con sus colores reales. Puede ser una fotografía de producto, una captura de una aplicación, una imagen de marca, una ilustración, una portada, una textura o una escena con una atmósfera determinada. En lugar de elegir tonos desde cero, partes de una fuente que ya comunica un estilo.
En diseño de interfaz, el uso más habitual consiste en extraer un color de acento desde una imagen principal y adaptarlo a botones, etiquetas, fondos o tarjetas. En contenido visual, puede ayudar a crear una paleta que acompañe una fotografía sin competir con ella. En branding, sirve para revisar si un tono observado en una pieza coincide con el código que se quiere documentar.
No todos los colores extraídos deben aplicarse tal cual. Una sombra muy oscura puede funcionar como base, pero necesitar una versión más clara para texto secundario. Un amarillo intenso puede verse bien en la imagen, pero resultar excesivo como fondo. Por eso conviene usar la extracción como punto de partida y después revisar variaciones, contraste y formato.
Qué colores conviene extraer
La selección depende de la función que quieres cubrir. Para una interfaz, suele ser mejor extraer pocos colores bien diferenciados: un tono dominante, un acento, un neutro y una variante de apoyo. Para una ilustración o campaña visual, puede interesar una gama más expresiva, pero aun así conviene evitar colores casi idénticos que no aportan una función clara.
| Color de la imagen | Uso posible | Precaución |
|---|---|---|
| Dominante | Fondos, cabeceras o superficies amplias. | Debe ser cómodo de mirar en áreas grandes. |
| Acento intenso | Botones, enlaces, iconos o detalles destacados. | Necesita contraste suficiente con el fondo. |
| Neutro claro | Tarjetas, separadores suaves o fondos secundarios. | Puede perderse si queda demasiado cerca del blanco. |
| Neutro oscuro | Texto, bordes, fondos profundos o estados activos. | No debe ocultar contenido ni reducir legibilidad. |
| Color ambiental | Sombras, estados hover o apoyo visual. | Debe complementar la paleta, no confundirla. |
Formatos y exportación de los colores extraídos
Después de seleccionar un punto, el valor puede leerse en varios formatos. HEX es cómodo para CSS y documentación visual. RGB es útil cuando quieres manipular canales o copiar un valor compatible con código. HSL facilita ajustes de tono, saturación y luminosidad. HSV ayuda a entender la selección desde una lógica más visual, mientras OKLCH y CMYK aportan referencias adicionales para conversaciones técnicas o gráficas.
La exportación tiene sentido cuando la paleta ya está depurada. Si copias todos los puntos sin revisar su función, acabarás con códigos difíciles de usar. Es preferible seleccionar colores con una intención clara, comprobar si se diferencian lo suficiente y exportar solo los que formarán parte del sistema visual. Para ampliar una selección pequeña, puedes llevar los tonos a Paleta de Colores y explorar combinaciones derivadas.
Contraste y accesibilidad en colores de imagen
Los colores extraídos de imágenes suelen estar pensados para verse dentro de la propia fotografía, no necesariamente para texto o controles. Un color que destaca en una zona iluminada puede fallar sobre un fondo blanco, y un tono elegante puede quedar demasiado apagado en un botón. Por eso conviene revisar contraste antes de usar un color como texto, fondo de etiqueta o llamada a la acción.
La sección de contraste proporciona una primera lectura sobre combinaciones con fondos claros u oscuros. Si la decisión depende de una combinación concreta de texto y fondo, revisa el par completo en Contraste de Colores. La extracción visual y la comprobación técnica deben complementarse: una aporta coherencia estética, la otra evita problemas de lectura.
De imagen a sistema visual
Una extracción será más útil si se transforma en un sistema pequeño y coherente. Elige primero el color que representa mejor la imagen, después busca un tono que pueda funcionar como acento y, por último, selecciona uno o dos neutros. Esa jerarquía permite pasar de una referencia visual rica a una paleta fácil de aplicar en botones, tarjetas, fondos y detalles.
También conviene probar los colores fuera de la imagen. Un tono que parece equilibrado dentro de una fotografía puede verse demasiado saturado cuando ocupa un botón completo. Una sombra elegante puede quedar excesivamente pesada como fondo de sección. Las variaciones y la comprobación de contraste permiten ajustar esa transición sin perder la conexión con la imagen original.
Errores comunes al extraer color de imagen
- Tomar un punto demasiado pequeño y asumir que representa toda la imagen.
- Elegir colores afectados por sombras, reflejos o compresión sin compararlos con zonas cercanas.
- Exportar muchos tonos similares en lugar de crear una paleta clara y manejable.
- Usar un color extraído para texto sin comprobar contraste.
- Confundir el color de una imagen mostrada en pantalla con una prueba exacta para impresión.
Cómo convertir una extracción en paleta útil
Empieza por asignar una función a cada color elegido. Un tono puede ser principal, otro puede actuar como acento, un tercero puede servir para superficies y otro para texto o bordes. Después revisa si las variaciones ofrecen estados suficientes para hover, focus o fondos alternativos. Si dos colores cumplen la misma función y se parecen demasiado, conserva el más claro de usar y elimina el otro.
El resultado final debe poder explicarse sin mirar la imagen original. Si cada código tiene una función, la paleta será más fácil de aplicar en CSS, componentes, presentaciones o piezas visuales. La imagen inspira la selección, pero la revisión de formatos, variaciones y contraste convierte esa selección en material práctico.
Guarda una versión breve de la paleta cuando el proyecto necesite rapidez y una versión ampliada solo si hay usos reales para cada variante. Esta separación evita que una extracción muy rica se convierta en una lista difícil de mantener.
Si trabajas con fotografías de producto, comprueba la paleta en una zona neutra de la interfaz antes de aprobarla. Los colores que funcionan sobre la propia imagen pueden necesitar más separación cuando pasan a botones, fondos o textos independientes.
Una revisión breve sobre fondo claro y oscuro suele revelar si el color extraído es versátil o si solo funciona dentro de la fotografía original.