Qué hace este conversor de color
Este conversor traduce un mismo color entre los tres formatos que usa el desarrollo web —HEX, RGB y HSL— en cualquier dirección. Escribes el color en el formato que ya tengas (por ejemplo el #3B82F6 que copiaste de Figma, el rgb(59, 130, 246) que devuelve una librería o el hsl(217, 91%, 60%) de tu sistema de diseño) y los otros dos campos se recalculan al instante, junto a una muestra viva del color. Cada campo tiene su propio botón de copiar. Todo el cálculo ocurre en tu navegador.
Cómo usar la herramienta
- Escribe o pega tu color en el campo HEX, RGB o HSL. Cada campo es editable de forma independiente.
- Los otros dos formatos y la muestra de color se actualizan solos mientras escribes.
- Si un valor no es válido, ese campo se marca en rojo con el aviso “Formato no válido”; los demás mantienen el último color correcto.
- Usa el selector de color (
input type=color) como ayuda visual: al elegir un tono rellena los tres campos. - Pulsa Copiar en el formato que necesites, o copia los tres de una vez.
Los tres formatos y sus fórmulas
HEX es notación hexadecimal: dos dígitos por canal tras # (rojo, verde, azul), cada par de 0 a 255. RGB expresa esos mismos tres canales en decimal. HSL describe el color como tono (0 a 359 grados), saturación y luminosidad en porcentaje, y es el más cómodo para aclarar u oscurecer.
La conversión de RGB a HSL normaliza cada canal dividiéndolo entre 255 y toma el máximo y el mínimo:
- Luminosidad:
L = (max + min) / 2 - Saturación: si
L > 0.5,S = (max − min) / (2 − max − min); si no,S = (max − min) / (max + min) - Tono: se calcula a partir del canal dominante y se multiplica por 60 grados.
| HEX | RGB | HSL |
|---|---|---|
#3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
#FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
#00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
#808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
#FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Ejemplo resuelto
Convirtamos #3B82F6 paso a paso.
De HEX a RGB, cada par hexadecimal es un canal: 3B = 59, 82 = 130, F6 = 246. Ya tenemos rgb(59, 130, 246).
De RGB a HSL, normalizamos entre 255: rojo 0.231, verde 0.510, azul 0.965. El máximo es el azul (0.965) y el mínimo el rojo (0.231). La luminosidad es su promedio: (0.965 + 0.231) ÷ 2 = 0.598, o sea 60%. Como la luminosidad supera 0.5, la saturación es la diferencia (0.733) dividida por (2 − 0.965 − 0.231) = 0.804, lo que da 0.912, es decir 91%. Como domina el azul, el tono es ((rojo − verde) ÷ 0.733 + 4) × 60 = 217.2, redondeado a 217 grados. Resultado: hsl(217, 91%, 60%), exactamente lo que muestra la herramienta.
Preguntas frecuentes
¿Qué diferencia hay entre HEX de 3 y de 6 dígitos?
El de 3 dígitos es una abreviatura donde cada dígito se duplica: #F00 equivale a #FF0000 y #39F a #3399FF. Solo funciona cuando los dos dígitos de cada canal coinciden, así que #3B82F6 no tiene forma corta. El conversor acepta ambas y siempre devuelve la forma de 6 dígitos.
¿Por qué al convertir de HSL a RGB a veces cambia un número?
Porque HSL trabaja con porcentajes enteros y ese redondeo pierde precisión. rgb(59, 130, 246) da hsl(217, 91%, 60%), pero volver de ese HSL redondeado produce rgb(60, 131, 246): uno o dos puntos de diferencia por canal. Es normal y visualmente imperceptible. Para conservar el color exacto, guarda el HEX o el RGB como fuente.
¿Puedo pegar rgba() o hsla() con transparencia?
Sí: el conversor lee el cuarto valor (alfa) pero lo ignora, porque HEX de 6 dígitos y HSL no lo representan. rgba(59, 130, 246, 0.5) se trata igual que rgb(59, 130, 246). Si necesitas conservar la transparencia, añádela aparte en tu CSS.
¿HSL es lo mismo que HSB o HSV?
No. Comparten el eje de tono, pero el tercer valor difiere: en HSL una luminosidad del 100% siempre es blanco, mientras que en HSB (también llamado HSV) un brillo del 100% es el color más vivo posible. Photoshop usa HSB y CSS usa HSL, así que el mismo color tiene números distintos en cada uno.
¿Los colores que escribo se envían a algún servidor?
No. Toda la conversión se ejecuta en tu navegador con JavaScript; ningún valor sale de tu dispositivo. Puedes usar la herramienta sin conexión una vez cargada la página.