Saltar al contenido
MasterMath

Conversor de colores HEX, RGB y HSL

Convierte un color entre hexadecimal, RGB y HSL, y te dice sobre qué fondo se lee mejor.

Hexadecimal

Texto de ejemplo
Hexadecimal
RGB
HSL
Para CSS
Luminancia relativa
Contraste sobre blanco
Contraste sobre negro

Cómo se ha calculado

    La fórmula

    Cada par hexadecimal es un canal de 0 a 255

    De dónde sale

    El hexadecimal no es más que RGB escrito de otra forma: dos dígitos por canal, cada uno de 0 a 255. HSL, en cambio, reordena la misma información en tono, saturación y luminosidad, que es mucho más intuitivo para hacer variaciones de un color.

    Cómo calcularlo a mano

    1. Separa el hexadecimal en tres pares de dígitos
    2. Convierte cada par a decimal: ese es su canal RGB
    3. Para HSL, localiza el canal mayor y el menor
    4. El tono sale del canal dominante y la luminosidad, de la media de ambos extremos

    Lo que conviene saber

    HSL es el formato más práctico para diseñar una paleta: manteniendo el tono y variando la luminosidad se obtienen versiones más claras y oscuras del mismo color que siguen combinando entre sí. En hexadecimal esa operación es a ciegas.

    Preguntas frecuentes

    ¿Cómo se convierte un color hexadecimal a RGB?

    Separando los seis dígitos en tres pares y convirtiendo cada uno de hexadecimal a decimal. #1f5fd6 es rgb(31, 95, 214).

    ¿Qué significa HSL?

    Tono, saturación y luminosidad. El tono es el color en grados de 0 a 360, la saturación su intensidad y la luminosidad cuánta luz tiene.

    ¿Por qué los colores web llevan seis dígitos?

    Porque cada canal ocupa un byte y un byte se escribe con dos dígitos hexadecimales. Tres canales, seis dígitos.