Cómo usar
- Haga clic en "Seleccionar imagen", arrastre una imagen o pegue una captura de pantalla con Ctrl+V / Cmd+V.
- Mueva el cursor o el dedo sobre la imagen para revelar los valores en vivo de HEX/RGB/HSL y la retícula de la lupa.
- Haga clic en un punto para guardar ese color en su historial.
- Haga clic en "Extraer colores principales" para generar una paleta amigable para el diseño y copie las muestras que necesite.
Ejemplo: Pegue una captura de pantalla de un producto, elija el color principal del botón y copie el valor HEX directamente en su CSS o archivo de diseño.
Características principales
- Selector de Color de Imagen Local: Las imágenes se renderizan y analizan en el canvas del navegador; no se realiza ninguna carga a servidores.
- Valores HEX/RGB/HSL Precisos: Mueva el cursor o el dedo sobre la imagen para leer valores en tiempo real de HEX, RGB y HSL.
- Retícula de Lupa: Un zoom de vista previa magnificado le ayuda a apuntar exactamente a bordes de iconos, detalles de capturas de pantalla de UI y pequeñas muestras.
- Generador de Paleta de Colores: El muestreo de píxeles del lado del cliente extrae hasta 5 colores dominantes para referencias rápidas de diseño.
- Guardado y Copia Rápidos: Haga clic en la imagen para guardar colores en el historial. Haga clic en cualquier muestra para copiar el código de color.
Herramientas relacionadas
Convierta HEX, RGB, HSL y CMYK con un comprobador de contraste WCAG integrado. Privacidad solo local—sin cargas. Obtenga valores CMYK listos para impresión y copie resultados ahora.
Genere Lorem Ipsum como texto, HTML <p> o arrays JSON. Solo local, sin cargas. Incluye texto de marcador de posición chino y controles de longitud variable. Genere ahora.
Calcule relaciones de aspecto y dimensiones faltantes rápidamente. Se ejecuta localmente—sin cargas. Incluye ajustes preestablecidos de TikTok/Reels 9:16 y fragmentos de CSS aspect-ratio. Calcule ahora.
Lógica de cálculo
Esta herramienta decodifica la imagen localmente usando HTML5 Canvas y lee el píxel RGBA en la coordenada actual de selección usando getImageData. Los valores HEX, RGB y HSL se calculan directamente a partir de esos datos de píxeles.
La generación de la paleta muestrea los píxeles del canvas, agrupa colores similares en clases simples de matiz y los ordena por frecuencia para devolver hasta 5 colores dominantes. Esto es excelente para paletas rápidas de diseño y web, pero no reemplaza la gestión de color profesional absoluta compatible con perfiles ICC / P3.
Preguntas frecuentes
¿Se cargan mis imágenes?
No. La carga de imágenes, la selección de color, la vista previa de la lupa und la generación de la paleta se ejecutan localmente en su navegador.
¿Cómo obtengo un código de color HEX de una imagen?
Seleccione o pegue una imagen y mueva el cursor o el dedo al píxel deseado. El color en vivo se muestra al instante. Haga clic en la imagen para guardar el color en el historial, luego haga clic en la muestra para copiar el valor HEX.
¿Qué formatos de color son compatibles?
La herramienta muestra y copia HEX, RGB y HSL, los formatos de color más comunes utilizados en diseño web y desarrollo front-end.
¿Por qué el color podría ser ligeramente diferente de Photoshop?
El elemento Canvas lee el píxel tal como lo renderiza su navegador. Las particularidades del navegador, la gama de visualización de la pantalla y los perfiles de color de imagen integrados pueden crear pequeñas diferencias.
¿Can I pick colors on mobile?
Sí. En dispositivos táctiles, arrastre el dedo por la imagen para mover la retícula, luego toque o suelte para bloquear un color.