Conversor de color y verificador de contraste
Conversor HEX ↔ RGB ↔ HSL con verificador de contraste WCAG AA/AAA.
Conversor de color + Verificador de contraste
HEX ↔ RGB ↔ HSL más la relación de contraste WCAG 2.1 AA/AAA.
rgb(30, 41, 59) · hsl(217, 33%, 17%)
rgb(248, 250, 252) · hsl(210, 40%, 98%)
El veloz murciélago hindú
comía feliz cardillo y kiwi.
What next?
FAQ
¿Entre qué formatos convierte?
HEX, RGB y HSL, en cualquier dirección. También informa la luminancia relativa de la pareja y la relación de contraste, para que puedas juzgar la legibilidad sin moverte a otra herramienta.
¿Cuándo es HSL más útil que HEX?
Cuando estás ajustando en lugar de especificar. HSL separa el matiz de la saturación y la luminosidad, por lo que hacer un color 10% más claro es un número en lugar de tres no relacionados. HEX es compacto y universalmente entendido; HSL es lo que quieres mientras diseñas una escala.
¿Convertir HEX a HSL y de vuelta siempre devuelve el mismo valor?
No siempre. Los componentes HSL se redondean a números enteros aquí, y el cubo sRGB no se asigna limpiamente al cilindro HSL, por lo que un viaje de ida y vuelta puede caer un dígito. La diferencia es imperceptible, pero significa que debes mantener un formato canónico en tus tokens en lugar de convertir de un lado al otro.
¿Por qué la herramienta también muestra luminancia?
Porque la luminosidad en HSL y el brillo percibido no son lo mismo. Dos colores en L: 50% pueden verse muy diferentes, ya que la luminosidad HSL ignora cómo el ojo es mucho más sensible al verde que al azul. La luminancia relativa aplica esa ponderación, que es por eso que — no la luminosidad HSL — es lo que los estándares de accesibilidad usan.
¿Cómo se calcula la relación de contraste?
(más clara + 0.05) / (más oscura + 0.05) en las luminancias relativas, la definición WCAG. Si estás verificando un color de texto contra un fondo específicamente, el verificador de contraste informa los niveles de aprobación/falla junto con él.
¿Maneja alfa o hex de 8 dígitos?
No — funciona con colores opacos. Un color con transparencia no tiene una apariencia fija hasta que se compone sobre algo, por lo que su contraste depende de lo que hay detrás de él.
¿Qué hay de CMYK o Pantone?
No compatible, y la razón importa: son sistemas de impresión vinculados a tintas y medios físicos. Convertir un color de pantalla a CMYK significativamente necesita un perfil de color y una prensa objetivo, que es un problema diferente de la aritmética entre formatos de pantalla.
¿Mi entrada se envía a algún lado?
No. Toda conversión ocurre en tu navegador.
More design tools
- Generador de paleta de colores — Genera paletas armonizadas: análoga, complementaria, triádica, monocromática.
- Verificador de Contraste WCAG — Comprueba el contraste de colores según WCAG 2.
- Generador de degradados CSS — Crea degradados lineales, radiales y cónicos con los puntos de color que necesites.
- Generador de box-shadow CSS — Apila las capas de sombra que necesites y compáralas sobre fondo claro y oscuro a la vez.
- Generador de clip-path CSS — Arrastra los vértices de un polígono o define círculo, elipse o inset, y copia la declaración clip-path.
- Pizarra en línea — Dibuja diagramas y wireframes en el navegador.