Conversor de Color HEX/RGB/HSL
Convierte entre HEX, RGB y HSL y mide el contraste WCAG.
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)Contraste WCAG
Comprueba si tu color tiene contraste suficiente como texto sobre fondo blanco o negro. AA exige 4.5:1 (texto normal) o 3:1 (texto grande); AAA exige 7:1.
Sobre esta herramienta
El color en diseño web puede expresarse en múltiples sistemas que, aunque matemáticamente equivalentes, tienen aplicaciones y ventajas distintas. El sistema HEX es el más usado en CSS porque es compacto y familiar: un valor de 6 dígitos hexadecimales describe cualquiera de los más de 16 millones de colores posibles. El modelo RGB (Red, Green, Blue) refleja cómo funcionan los monitores: mezclando luz roja, verde y azul en intensidades de 0 a 255. El modelo HSL (Hue, Saturation, Lightness) es el más intuitivo para los humanos: el matiz indica el color en el círculo cromático (0°–360°), la saturación mide la viveza y la luminosidad indica si es claro u oscuro.
El Conversor de Color de Webtoolia convierte instantáneamente entre los tres modelos y además calcula el nivel de contraste entre dos colores según las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1). El contraste entre texto y fondo es un requisito fundamental de accesibilidad: WCAG nivel AA exige una relación mínima de 4.5:1 para texto normal y 3:1 para texto grande; el nivel AAA es aún más estricto. Esta funcionalidad permite verificar en tiempo real que las combinaciones de colores elegidas son accesibles para usuarios con discapacidad visual o daltonismo, sin necesidad de abrir herramientas externas.
Es útil para diseñadores que trabajan entre Figma y código (Figma usa HEX y RGB; en CSS es más práctico trabajar con HSL para crear variaciones de tono coherentes), para desarrolladores que implementan sistemas de diseño con variables CSS personalizadas, para equipos que necesitan validar accesibilidad antes de entregar un proyecto, y para cualquier persona que quiera identificar exactamente qué color corresponde a un código encontrado en un diseño, una captura de pantalla o una guía de marca.
Cómo funciona
- 1 Elige un color Usa el selector visual o escribe el color en HEX, rgb() o hsl(); ajusta la transparencia si la necesitas.
- 2 Copia el formato que quieras HEX, RGB y HSL se muestran a la vez y son copiables con un clic, sin desviaciones de redondeo.
- 3 Revisa la accesibilidad Comprueba el contraste WCAG de tu color como texto sobre fondo blanco y negro, con los niveles AA y AAA.
Preguntas frecuentes
¿Cuándo usar HEX y cuándo usar HSL en CSS?
HEX es ideal cuando copias colores exactos desde una guía de marca o un diseño. HSL es superior para crear variaciones programáticas: puedes oscurecer un color simplemente reduciendo el tercer valor (lightness) sin cambiar el matiz, lo que es perfecto para estados hover, sombras y paletas coherentes en un sistema de diseño.
¿Qué significa el cuarto valor en rgba() o hsla()?
Es el canal alfa, que controla la opacidad: de 0 (completamente transparente) a 1 (completamente opaco). En HEX, los dos últimos dígitos opcionales (#RRGGBBAA) representan lo mismo en hexadecimal: FF es opaco y 00 es transparente.
¿Qué es la relación de contraste WCAG?
Es una medida de la diferencia de luminancia entre dos colores. Se expresa como una razón (ej. 5.2:1) donde 1:1 indica colores idénticos. WCAG AA requiere mínimo 4.5:1 para texto normal y 3:1 para texto grande (más de 18pt o 14pt en negrita). El nivel AAA eleva esos requisitos a 7:1 y 4.5:1 respectivamente.
¿La herramienta incluye conversión con canal de opacidad (alpha)?
Sí. Puedes ajustar la transparencia con el control deslizante y ver los valores correspondientes en HEX de 8 dígitos (#RRGGBBAA), RGBA y HSLA. Los tres formatos se sincronizan automáticamente al cambiar la opacidad.
¿Puedo validar el contraste de mi web con esta herramienta?
Sí. La herramienta comprueba el contraste de tu color como texto sobre fondo blanco y negro, indicando si cumple los niveles AA y AAA de WCAG. Es una verificación rápida durante el desarrollo antes de usar herramientas más exhaustivas.
¿Qué es el modelo de color HSL y por qué es más intuitivo?
Porque se corresponde con cómo los humanos pensamos en el color: primero elegimos el color base (matiz, 0°–360°), luego si es vivido o apagado (saturación, 0%–100%) y finalmente si es claro u oscuro (luminosidad, 0%–100%). En hsl(210, 100%, 50%) puedes leer directamente "azul puro a luminosidad media".