Conversor de Colores 🔒 Tus datos nunca salen de tu navegador.
HEX ↔ RGB ↔ HSL, con vista previa y selector de color.
Comprobador de contraste
El veloz murciélago hindú comía feliz cardillo.
El veloz murciélago hindú comía feliz cardillo.
Sombras y matices
Selecciona un paso para cargarlo como color actual.
Sobre esta herramienta
Pega un color en cualquier formato CSS — hex (#1e90ff o #19f), rgb(), hsl() o un color con nombre como dodgerblue — y obtén todos los formatos con copia de un clic, más una muestra en vivo. HEX es lo que exportan las herramientas de diseño, RGB lo que piden canvas y las APIs JS, y HSL el que los humanos entienden (tono, saturación, luminosidad).
La conversión usa el propio motor CSS del navegador: todo lo válido en una hoja de estilos funciona aquí. 100% en el cliente.
Preguntas frecuentes
¿Se envían mis datos de color a algún sitio?
No. Cada conversión, comprobación de contraste y paleta se calcula localmente en tu navegador: nada de lo que introduces sale de tu dispositivo.
¿Cuál es la diferencia entre HSL y HSV?
Ambos describen matiz y saturación, pero el tercer valor de HSL es la luminosidad (qué tan cerca está del negro o del blanco), mientras que el de HSV es el valor (qué tan cerca está solo del negro, manteniendo el brillo máximo en la parte superior). HSV suele coincidir con los selectores de color de las herramientas de diseño; HSL suele coincidir con las convenciones de CSS.
¿Por qué mi código hexadecimal tiene 8 dígitos en vez de 6?
El par adicional codifica el alfa (transparencia) como #rrggbbaa. Solo aparece cuando el color de entrada tiene un canal alfa menor que 1 — los colores totalmente opacos siguen teniendo 6 dígitos.
¿Qué significan las etiquetas AA y AAA del comprobador de contraste?
Son los umbrales de contraste de WCAG 2: AA es el mínimo que la mayoría de sitios debería cumplir (4.5:1 para texto normal, 3:1 para texto grande o componentes de UI), AAA es el objetivo más estricto (7:1 / 4.5:1). Una etiqueta verde significa que tu combinación de primer plano y fondo cumple ese nivel.
¿Qué es OKLCH y por qué usarlo en lugar de HSL?
OKLCH es un espacio de color perceptualmente uniforme: pasos iguales en luminosidad o croma se ven igualmente diferentes para el ojo humano, algo que HSL no garantiza. Se usa cada vez más en el CSS moderno para crear escalas de color y degradados sin zonas oscuras o turbias inesperadas.