Go Toolstack

Selector y Gotero de Color

Elige colores de la pantalla y copia códigos en formatos HEX, RGB, HSL y CMYK.

Selector y Gotero de Color

Elige colores de la pantalla y copia códigos en formatos HEX, RGB, HSL y CMYK.

Cómo funciona

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Descubre más utilidades del lado del cliente en esta categoría

Centro de Imágenes y Diseño • Flujos de trabajo y guía de comparación

Explore todas las herramientas de imágenes y diseño, límites y guía de selección.

Explorar centro →
Generador de Códigos QR

Crea códigos QR personalizados para URLs, credenciales Wi-Fi, vCards y texto.
Compresor de Imágenes WebP y PNG

Comprime fotos JPG, PNG y WebP reduciendo peso con alta nitidez visual.
Redimensionar Imágenes

Modifica dimensiones en píxeles de tus fotos con bloqueo de relación de aspecto.

Guías relacionadas del blog

Guías técnicas, solución de problemas y tutoriales de buenas prácticas

Centro de Conocimiento y Conceptos

Selector de Color y Cuentagotas: Análisis de Contraste WCAG y Conversión de Espacios de Color

Seleccionar colores exactos de elementos web o imágenes y validar su conformidad de contraste según las normas de accesibilidad WCAG 2.1 es esencial para diseñadores UI y desarrolladores frontend. El Selector de Color y Cuentagotas combina la API nativa EyeDropper de los navegadores con un conversor cromático de alta precisión que opera 100% en local.

Escenario Práctico: Un diseñador web inspecciona una interfaz y necesita capturar el color primario de un botón para verificar si cumple el ratio mínimo de contraste de 4.5:1 exigido por WCAG AA sobre fondo blanco. Al usar el cuentagotas, obtiene instantáneamente los códigos en HEX, RGBA, HSLA y CMYK, además del cálculo del ratio de contraste y la generación de variables CSS listas para copiar.

Todo el cálculo se realiza en el cliente sin envío de capturas ni telemetría a servidores externos.

Arquitectura Central y Fórmula Matemática

Ratio de Contraste WCAG = (L1 + 0.05) / (L2 + 0.05), donde L es la luminancia relativa calculada a partir de los canales sRGB normalizados.

Cálculo matemático exacto de luminancia relativa y contraste conforme al estándar W3C para certificar conformidad WCAG AA y AAA.

Mejores Prácticas y Pautas Esenciales

  • Validar accesibilidad para texto normal: Asegúrese de que el ratio de contraste sea de al menos 4.5:1 para cumplir con el nivel WCAG AA en tipografías comunes.
  • Usar el cuentagotas nativo del navegador: En navegadores basados en Chromium, active la herramienta cuentagotas para tomar muestras de cualquier ventana de su monitor.
  • Copiar variables CSS preparadas: Utilice los formatos de exportación listos para incrustar en archivos :root de CSS o Tailwind.
  • Inspeccionar canales CMYK para imprenta: Evalúe los valores porcentuales de cian, magenta, amarillo y negro si el diseño se destinará a soportes físicos.

Preguntas Frecuentes (FAQ)

¿Es compatible el cuentagotas en todos los navegadores?
La Eyedropper API está disponible en Chrome, Edge y navegadores Chromium de escritorio. En otros navegadores se ofrece el selector manual mediante lienzo interactivo.
¿Qué significa el cumplimiento WCAG AA y AAA?
Son estándares internacionales de accesibilidad web que garantizan que los textos sean legibles para personas con discapacidades visuales o daltonismo.
¿Puedo copiar los valores en formato HSL para animaciones CSS?
Sí. El conversor actualiza en tiempo real los formatos HEX, RGBA, HSLA, HSV y CMYK.
¿Los colores seleccionados se guardan en algún servidor?
No. Todo el historial de muestras de color se gestiona exclusivamente en la memoria local de su navegador.