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.