Conversor de colores

Pasar entre HEX, RGB y HSL — con el contraste según las WCAG.

En HEX (#2C2A3A o #abc), en rgb(44, 42, 58) o en hsl(248, 16%, 20%).

#2C2A3A es rgb(44, 42, 58) y hsl(248, 16%, 20%).

HEX
#2C2A3A
RGB
rgb(44, 42, 58)
HSL
hsl(248, 16%, 20%)
Luminancia relativa
0,025 — la luminosidad de HSL, en cambio, es del 20 %
Contraste según las WCAG
con blanco 14,01 a 1 (AAA), con negro 1,5 a 1 (insuficiente)

HEX y RGB describen el mismo color de dos maneras: #2C2A3A es rgb(44, 42, 58), porque 2C en hexadecimal son 44 en decimal. HSL lo describe de otro modo, mediante tono, saturación y luminosidad.

Para trabajar suele ser más cómodo HSL. Aclarar un color allí es subir un número; en RGB habría que mover los tres canales a la vez y de forma desigual.

El contraste no es cuestión de gusto

Las WCAG exigen para el texto normal una relación de contraste de al menos 4,5 a 1 con el fondo, y de 3 a 1 para el texto grande. El nivel más alto, AAA, pide 7 a 1 y 4,5 a 1 respectivamente.

El cálculo no usa el brillo percibido, sino la luminancia relativa: los canales se ponderan porque el ojo capta mucho más el verde que el azul. Por eso un amarillo intenso casi no contrasta con el blanco, aunque parezca fuerte.

Dónde se separan los espacios de color

HSL es una simple reescritura de RGB y no describe una gama distinta. Lo que una pantalla no puede mostrar tampoco existe en HSL: la conversión es exacta y sin pérdida en los dos sentidos.

Con CMYK para imprenta es otra cosa: hay colores que una pantalla muestra y una máquina de imprimir no, y al revés. Convertir sin un perfil de color sería adivinar, y por eso aquí no está.

Preguntas frecuentes

¿Qué significa la forma corta de tres caracteres?
#abc es la abreviatura de #aabbcc: cada carácter se duplica. Con ella solo se pueden escribir 4 096 colores en lugar de los 16,7 millones de la forma larga, así que aparece sobre todo en bocetos rápidos.
¿Por qué la luminosidad de HSL no coincide con lo que veo?
Porque el valor L de HSL es simplemente la media entre el canal más claro y el más oscuro. Un amarillo puro y un azul puro tienen los dos L igual al 50 por ciento y se ven completamente distintos: de eso se ocupa la luminancia relativa.

Fuentes

Cifras vigentes en 2026. Los resultados son orientativos y no sustituyen a una asesoría laboral o fiscal.

También te puede servir