Extracción de color de imagen

¿Qué es un extractor de color en línea?

El extractor de color en línea es una herramienta gratuita que te permite tomar colores de una imagen, de la pantalla cuando el navegador lo admite, o introduciendo valores manualmente. El color seleccionado se convierte al instante en formatos habituales como HEX, RGB, HSL, HSV y CMYK, y se generan automáticamente colores de armonía, tonos claros/oscuros, contraste de texto y variables CSS listos para copiar.

Funciones principales

• Tomar color de una imagen: Tras elegir una imagen local, pasa el cursor para previsualizar el color del píxel y haz clic para seleccionarlo.
• Ajuste de píxel fino: Tras seleccionar un color, usa las teclas de dirección para moverte con precisión a píxeles cercanos.
• Paleta de la imagen: Se extrae automáticamente un conjunto de colores dominantes; haz clic en uno para aplicarlo.
• Tomar color de la pantalla: Cuando el navegador lo admite, usa el cuentagotas del sistema para tomar cualquier color de la pantalla.
• Entrada manual: Usa el selector de color o introduce directamente un valor HEX / HEXA, p. ej. #2563EB.
• Múltiples formatos de color: Convierte al instante a HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, CMYK y más.
• Colores de armonía: Genera paletas complementarias, análogas, triádicas, de luz suave y de baja saturación.
• Tonos claros/oscuros: Crea tonos prácticos de claro a oscuro para fondos, bordes, estados de hover y componentes de interfaz.
• Contraste de texto: Compara texto blanco y negro según WCAG y ofrece una referencia perceptiva estilo APCA.
• Variables CSS: Copia con un clic el color actual, sus variantes claras/oscuras y combinaciones de interfaz recomendadas.
• Procesamiento en el navegador: Todo se realiza localmente en tu navegador; las imágenes nunca se suben.

Cómo usar

1. En la pestaña «Imagen», elige una imagen local, pasa el cursor para previsualizar colores y haz clic para seleccionar.
2. O en la pestaña «Pantalla», usa el cuentagotas del sistema para tomar el color directamente.
3. También puedes cambiar a «Manual» e introducir un valor HEX o usar el selector de color.
4. Copia el formato, los colores de armonía, los tonos o las variables CSS que necesites desde el panel derecho.