Conversor de color
Convierte colores en tiempo real entre formatos HEX, RGB, HSL, CMYK y CIE LAB. Incluye verificador de contraste WCAG 2.1, aviso de gama de impresión y simulador de daltonismo.
Herramientas en Línea#3B82F6
Detección de colores RGB aditivos fuera de gama que no pueden reproducirse con tintas sustractivas de 4 colores.
Cálculo en tiempo real de luminancia relativa y verificación de legibilidad frente a blanco puro y negro puro.
Sistemas de Diseño & Tipografía Digital
Claridad visual de alto contraste en interfaces de software, diseño de interacción y experiencias de usuario inclusivas.
Sistemas de Diseño & Tipografía Digital
Claridad visual de alto contraste en interfaces de software, diseño de interacción y experiencias de usuario inclusivas.
Matrices de percepción modeladas científicamente (Brettel / Machado) para deficiencias cromáticas hereditarias.
Tricromacia (Visión Normal)
Percepción visual estándar en todo el espectro de luz visible
Protanopía (Ceguera al Rojo)
Deficiencia en conos L; sensibilidad reducida a longitudes de onda rojas (~1% en hombres)
Deuteranopía (Ceguera al Verde)
Deficiencia en conos M; confusión rojo-verde, deficiencia más frecuente (~5% en hombres)
Tritanopía (Ceguera al Azul)
Deficiencia en conos S; confusión azul-amarillo, condición poco común (~0,01% población)
Acromatopsia (Monocromatismo)
Ausencia total de función de conos; visión exclusiva en escala de grises (~0,003% población)
Sincronización matemática bidireccional instantánea entre 7 formatos estándar de color.
Gama equilibrada para interfaces generada variando la luminosidad mientras se conserva el tono y la saturación.
Tokens de diseño y definiciones de código listas para copiar directamente a su proyecto.
// Utilidades de color arbitrarias de Tailwind CSS <div className="bg-[#3b82f6] text-white border-[#3b82f6]" />
Cómo Usar el Convertidor de Color y Estudio de Accesibilidad (Paso a Paso)
Domine la conversión de espacios de color, auditoría de contraste WCAG 2.1, gama de impresión y exportación de tokens.
Introduzca Cualquier Color o Use el Pegado Inteligente
Escriba, pegue o elija cualquier formato en la barra de búsqueda: HEX (#3b82f6), RGB, HSL, HSV, CMYK, CIE LAB o nombres CSS estándar (ej. 'coral', 'indigo'). El motor detecta el formato al instante y actualiza todos los módulos en tiempo real.
Ajuste los Canales con Deslizadores Interactivos
Modifique cada componente cromático con controles deslizantes para Rojo, Verde, Azul, Alfa, Tono (Hue), Saturación, Luminosidad o porcentajes de tinta CMYK. Explore la paleta monocromática de 5 pasos para obtener escalas armónicas.
Audite la Accesibilidad y el Contraste WCAG 2.1
Consulte el auditor de accesibilidad para medir los ratios de contraste sobre fondos blanco y negro. Verifique que sus textos cumplan los niveles AA (mínimo 4.5:1 para texto normal, 3:1 para texto grande) y AAA (7:1) de las pautas WCAG.
Inspeccione la Gama de Impresión (Puente CMYK)
Compruebe si los tonos brillantes de pantalla pueden reproducirse físicamente en impresión offset. Si se activa la alerta de gama, haga clic en 'Limitar a Gama de Impresión' para obtener una aproximación fidedigna para imprenta.
Simule Deficiencias Visuales y Daltonismo
Evalúe cómo perciben su color personas con Protanopía (ceguera al rojo), Deuteranopía (ceguera al verde), Tritanopía (ceguera al azul) o Acromatopsia (visión monocromática), asegurando interfaces inclusivas para todos los usuarios.
Exporte Tokens de Diseño y Código para Desarrolladores
Copie las especificaciones técnicas completas con un clic o copie fragmentos listos para producción en Tailwind CSS, Variables CSS (:root), SwiftUI (iOS) o Jetpack Compose (Android).
Preguntas Frecuentes (FAQ)
Respuestas técnicas sobre teoría del color, espacios digitales, accesibilidad web y reproducción en imprenta.
Q:¿Cuál es la diferencia entre los modelos de color RGB, HSL y CMYK?
RGB es un modelo aditivo para pantallas digitales que combina haces de luz Roja, Verde y Azul entre 0 y 255. HSL describe el color de manera intuitiva mediante Tono (Hue 0–360°), Saturación (0–100%) y Luminosidad (0–100%), facilitando la creación de interfaces. CMYK es un modelo sustractivo para artes gráficas que mezcla tintas Cian, Magenta, Amarillo y Negro; dado que el papel refleja luz en lugar de emitirla, la gama CMYK es más limitada que la RGB.
Q:¿Cuáles son los requisitos de contraste WCAG 2.1 para los niveles AA y AAA?
Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) exigen ratios de contraste mínimos entre texto y fondo. El nivel AA requiere al menos 4.5:1 para texto estándar y 3:1 para texto grande (18pt o 14pt en negrita) y componentes gráficos de UI. El nivel AAA exige un ratio reforzado de 7:1 para texto normal y 4.5:1 para texto grande.
Q:¿Por qué los colores intensos de pantalla pierden brillo al imprimirse?
Las pantallas digitales emiten luz en un espectro amplio (sRGB o DCI-P3), logrando tonos neón y azules luminosos. El papel físico absorbe luz ambiental y las tintas de cuatricromía (CMYK) no pueden reproducir físicamente esas saturaciones extremas. Nuestra herramienta detecta tonos fuera de gama y calcula el equivalente imprimible más cercano para evitar sorpresas en imprenta.
Q:¿Qué es el espacio de color CIE LAB y por qué es fundamental?
CIE L*a*b* es un espacio cromático perceptualmente uniforme e independiente del dispositivo creado por la Comisión Internacional de Iluminación. 'L' representa la claridad percibida (0–100), 'a' el eje verde-rojo y 'b' el eje azul-amarillo. A diferencia de RGB o HEX, la distancia matemática en LAB refleja fielmente la diferencia visual captada por el ojo humano.
Q:¿Cómo funciona el simulador de deficiencia visual (daltonismo)?
El simulador aplica matrices matemáticas de transformación óptica basadas en la respuesta de los conos de la retina: Protanopía (carencia de conos L para rojo), Deuteranopía (carencia de conos M para verde), Tritanopía (carencia de conos S para azul) y Acromatopsia (ausencia total de visión cromática). Esto permite prever la experiencia visual real y evitar combinaciones inaccesibles.
Q:¿Qué es la luminancia relativa y cómo se calcula el ratio de contraste?
La luminancia relativa (Y) es el brillo percibido de un color normalizado entre 0 (negro) y 1 (blanco), obtenido según la fórmula sRGB: Y = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin. El ratio de contraste WCAG entre dos colores se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 la del color más oscuro.
Q:¿Se envía información de mis paletas o colores a servidores externos?
No. El 100% de las conversiones cromáticas, cálculos matemáticos, auditorías WCAG y generaciones de código se procesan estrictamente en el navegador del cliente. Ningún dato sale de su dispositivo ni se almacena en servidores remotos.
¿Qué es Conversor de color?
Consejos Pro: Acelerando el Diseño de Sistemas
Herramientas Clave para el Desarrollo
| Funcionalidad | Descripción Técnica | Beneficio Directo |
|---|---|---|
| Fragmentos de Código (Snippets) | Genera definiciones de color listas para pegar. | Acelera la programación en iOS (SwiftUI) y Android (Jetpack Compose). |
| Auditor de Accesibilidad WCAG 2.1 | Calcula la luminancia relativa frente al blanco y negro puros. | Garantiza que la tipografía digital pase las auditorías de accesibilidad (Pass AA). |
| Espacio de Color HSL / HSLA | Ajusta el tono, la saturación y la luminosidad de 0 a 100%. | Facilita la creación intuitiva de gradientes dinámicos en CSS. |