Conversor de colores HEX, RGB y HSL
Hexadecimal, RGB y HSL en las tres direcciones. Y de paso el contraste, que es lo que decide si encima cabe texto legible.
Tus datos
Resultado
- RGB
- rgb(156, 74, 6)
- HSL
- hsl(27, 93%, 32%)
- Contraste con blanco
- 6,18
- Contraste con negro
- 3,40
- Color de texto recomendado
- #FFFFFF
- Luminancia relativa
- 12,0 %
Qué damos por supuesto
- Se convierte en tu navegador.
- Se trabaja en sRGB, que es el espacio de color de la web. Los espacios más amplios como P3 no se contemplan.
- La luminancia y el contraste siguen la fórmula de WCAG 2, que es la que usan las herramientas de accesibilidad y las auditorías.
- Se ignora la transparencia: si escribes
rgba()se toma solo el color. El contraste real de un color translúcido depende de lo que tenga detrás. - El redondeo a HSL y la vuelta puede mover algún valor en una unidad. Es propio de la conversión, no un fallo.
Cómo se calcula
Los tres formatos describen el mismo color de formas distintas. Hexadecimal y RGB son lo
mismo escrito en otra base: #FF0000 es rgb(255, 0, 0), y cada par de
dígitos hexadecimales es un canal de 0 a 255.
Por qué HSL es más cómodo para pensar
HSL describe el color por tono, saturación y luminosidad. Aclarar un color en RGB obliga a tocar tres números a la vez; en HSL basta con subir la luminosidad. Por eso las paletas se diseñan casi siempre en HSL aunque luego se escriban en hexadecimal.
El contraste, que es lo que decide si se lee
La relación de contraste va de 1:1 —dos colores idénticos— a 21:1, que es negro puro sobre blanco puro. Las WCAG piden 4,5:1 para texto normal y 3:1 para texto grande; el nivel AAA sube a 7:1. Aquí verás el contraste contra blanco y contra negro, que es lo que responde a «¿qué color de letra pongo encima?».
Un ejemplo
#9C4A06 es rgb(156, 74, 6) y hsl(27, 93%, 32%). Su
contraste con blanco es de 6,18:1, así que encima va texto blanco y pasa el
nivel AA sin problema.
Preguntas frecuentes
¿Qué contraste necesito?
4,5:1 para texto normal y 3:1 para texto grande —a partir de 18 pt, o 14 pt en negrita—. Eso es el nivel AA, que es el que exige la mayoría de normativas. El AAA pide 7:1.
¿Por qué al convertir a HSL y volver cambia un dígito?
Porque HSL se expresa en grados y porcentajes enteros, y ahí se pierde algo de precisión. Al volver, el color puede quedar a una unidad del original en algún canal. Es inherente al redondeo.
¿Sirve con colores translúcidos?
Se acepta la notación rgba() pero se ignora el canal alfa. El contraste real de un color translúcido depende del fondo que tenga detrás, así que habría que calcularlo sobre el color resultante.
¿Y los colores por nombre, como «rebeccapurple»?
Todavía no. Son 148 nombres y de momento la herramienta trabaja con las tres notaciones numéricas, que son las que se usan al diseñar.
Sigue calculando
Todas las herramientas →- Conversor de bases numéricas Binario, octal, decimal y hexadecimal, en las dos direcciones. Con enteros grandes de verdad: los de 64 bits salen exactos.
- Conversor de unidades de datos Bytes, KB, MB, GB… y también KiB, MiB y GiB. Los dos sistemas a la vez, que es la única forma de entender por qué tu disco de 1 TB tiene 931 GB.
- Conversor de marca de tiempo Unix De marca de tiempo a fecha y de fecha a marca. Si el número está en milisegundos lo detectamos, que es el error que más tiempo hace perder.
Actualizado el 2026-09-02. Los cálculos se ejecutan en tu navegador; los datos que introduces no se envían a ningún servidor.