Cómo funciona
Los tres formatos describen el mismo color de maneras distintas:
- HEX: tres pares de dígitos hexadecimales (00 a FF) para rojo, verde y azul.
#74ACDFsignifica rojo 74, verde AC, azul DF. La versión corta de 3 dígitos (#FFF) duplica cada dígito. - RGB: la misma información en decimal, de 0 a 255 por canal.
- HSL: matiz (0 a 360°, la posición en el círculo cromático), saturación y luminosidad (0 a 100 %). Es el más cómodo para armar variantes más claras u oscuras de un color.
Contraste de texto
El contraste mide cuánto se distingue un texto de su fondo. Las pautas de accesibilidad WCAG piden una relación de al menos 4,5:1 para texto normal (nivel AA) y 7:1 para el nivel AAA. Para texto grande, 3:1 alcanza.
Contraste = (luminancia clara + 0,05) ÷ (luminancia oscura + 0,05)
Ejemplo
El celeste #74ACDF equivale a rgb(116, 172, 223) y a hsl(209, 63%, 66%). Con texto negro tiene un contraste alto y cumple AAA, mientras que con texto blanco queda por debajo de 3:1, así que conviene usar negro o un azul oscuro.
Preguntas frecuentes
¿Cómo paso un color de HEX a RGB?
Separá el código HEX en tres pares y convertí cada uno de hexadecimal a decimal. Por ejemplo, #FF8000 son FF = 255, 80 = 128 y 00 = 0, es decir rgb(255, 128, 0).
¿Qué significa HSL?
Son las siglas en inglés de matiz, saturación y luminosidad. Describe el color como lo percibimos: qué tono es, qué tan vivo y qué tan claro.
¿Qué es un HEX de 3 dígitos?
Es una forma abreviada cuando cada par de dígitos se repite. #FFF equivale a #FFFFFF y #09C a #0099CC.
¿Por qué importa el contraste?
Un texto con poco contraste es difícil de leer, sobre todo para personas con baja visión o en pantallas con mucho brillo. Cumplir al menos el nivel AA es una buena práctica de diseño web.
¿Por qué el valor HSL cambia un poco si lo edito?
Los valores de HSL se redondean a números enteros. Al convertirlos a RGB puede haber una diferencia de un punto en algún canal.
Última revisión: octubre de 2026.