Extraiga colores de cualquier imagen con precisión de píxeles. Al diseñar interfaces de usuario (UI/UX), crear activos de marca digitales, ilustrar obras de arte o preparar archivos impresos comerciales, extraer códigos de color exactos de fotografías, logotipos, capturas de pantalla de la interfaz de usuario o escenas de la naturaleza es una necesidad diaria. Esta herramienta proporciona una lupa de 10x píxeles de alto DPI con una cuadrícula objetivo, lo que garantiza una precisión de muestreo de color del 100 % en todos los formatos digitales e impresos esenciales: HEX, RGB, RGBA, HSL, HSV/HSB, CMYK, decimal y nombres de colores oficiales del W3C.

1. Modelos de color digitales: RGB, CMYK, HSL y HEX

Los diferentes medios y plataformas informáticas se basan en distintos espacios de color matemáticos:

  • RGB y RGBA (modelo de luz aditiva): Utilizado por todas las pantallas digitales (monitores, teléfonos inteligentes, televisores). Los colores se forman combinando canales de luz Rojo (R), Verde (G) y Azul (B) de 0 a 255. RGBA incluye un canal de transparencia Alfa adicional.
  • Códigos HEX: Representaciones hexadecimales de RGB (por ejemplo, #1D4ED8 ), que sirven como estándar universal en todas las tecnologías web (HTML y CSS). Los pares corresponden a las intensidades de Rojo, Verde y Azul.
  • HSL y HSV / HSB: Representaciones intuitivas que describen colores a través de Tono (0–360°), Saturación (0–100%) y Luminosidad/Valor (0–100%). HSL y HSV son los selectores de color estándar en software de diseño como Figma y Adobe Photoshop.
  • CMYK (modelo de pigmento sustractivo): Se utiliza en impresión y publicación offset física. Los colores se crean absorbiendo la luz a través de mezclas de tintas cian, magenta, amarilla y clave/negra sobre papel blanco.

2. Lupa de aumento de píxeles para precisión microscópica

Los selectores de color estándar del navegador a menudo sufren de muestreo de cursor impreciso, particularmente alrededor de texto fino, bordes vectoriales suavizados o microtexturas. Esta herramienta cuenta con una lupa de aumento de 10x píxeles dedicada que representa una cuadrícula de 11×11 píxeles. Cada píxel individual está claramente delimitado y una retícula central de alto contraste permite un bloqueo de color preciso sin conjeturas.

3. Extracción automática de la paleta de colores dominantes

Al cargar una imagen, la herramienta ejecuta una cuantificación de color espacial y un filtrado de grupos para aislar automáticamente entre 6 y 8 de los colores más dominantes y distintos. Cada muestra extraída muestra su código HEX exacto y el porcentaje de cobertura dentro de la imagen. Los diseñadores pueden exportar la paleta completa como propiedades personalizadas CSS nativas, una matriz JSON o una lista HEX separada por comas con un solo clic.

4. WCAG 2.1 y 2.2 Análisis de contraste y accesibilidad

El cumplimiento de la accesibilidad web es un requisito fundamental del desarrollo web moderno. Según las Pautas de accesibilidad al contenido web (WCAG) del W3C, el texto debe mantener una relación de contraste suficiente con respecto al fondo para garantizar la legibilidad para los usuarios con discapacidad visual:

  • WCAG AA (texto de cuerpo normal): Requiere una relación de contraste de al menos 4,5: 1.
  • WCAG AA (texto grande y componentes de interfaz de usuario): Requiere una relación de contraste de al menos 3,0: 1.
  • WCAG AAA (Contraste mejorado): Requiere una relación de contraste de al menos 7,0: 1.

Nuestra herramienta calcula automáticamente la luminancia relativa del color muestreado de acuerdo con la fórmula oficial del W3C y proporciona recomendaciones instantáneas sobre si la tipografía clara u oscura logra un cumplimiento óptimo.

5. 100% privacidad y seguridad del lado del cliente

Todo el procesamiento de imágenes, extracción de píxeles y cálculos de color se realizan íntegramente dentro de su navegador web a través de HTML5 Canvas y JavaScript. Sus imágenes, capturas de pantalla y obras de arte nunca se cargan ni almacenan en ningún servidor externo, lo que garantiza una privacidad absoluta para los activos de diseño confidenciales y las fotografías personales.