Convertir HEX a HSL Hexadecimal ↔ Hue Saturation Lightness Gratis En línea Seguro
Escriba un valor en HEX y léalo al instante en HSL. La cuenta se hace en su navegador, no se envía nada a ninguna parte, y de qué depende el resultado está escrito más abajo en vez de darse por supuesto.
No se sube nada
De dónde vienen estas notaciones
El hexadecimal y el RGB son lo mismo escrito dos veces. Un color de pantalla son tres números —cuánta luz roja, verde y azul emitir—, cada uno de 0 a 255, es decir un byte; el hexadecimal escribe sencillamente esos bytes en base dieciséis, de modo que #FF8800 y rgb(255, 136, 0) son la misma orden al mismo píxel. El HSL se inventó porque ninguno de los dos es legible para un humano: da el tono como un ángulo en una rueda de color, con saturación y luminosidad en porcentajes, así que un diseñador puede aclarar algo sin recalcular tres cifras. El CMYK pertenece a otro mundo por completo: a la tinta, no a la luz. Es sustractivo, construido con cuatro planchas de impresión, y no alcanza todos los colores de una pantalla, porque la pantalla emite luz mientras que el papel solo la refleja.
Dónde se las encuentra
El hexadecimal es lo que se teclea en una hoja de estilo y lo que una herramienta de diseño le entrega. El RGB aparece dondequiera que un color necesite aritmética: degradados, transparencia, código que calcula un matiz. Al HSL se recurre al ajustar una paleta a mano, porque los cambios que uno quiere suelen ser cambios de uno de sus tres números. El CMYK es lo que pide la imprenta, y convertir a él es el instante en que un diseño deja de ser luz y pasa a ser tinta.
Preguntas frecuentes
¿Por qué mi resultado CMYK difiere del que me da la imprenta?
Porque no existe una única conversión correcta. La aritmética de esta página es la simple, independiente del dispositivo, y es la respuesta adecuada cuando se necesita un punto de partida o un equivalente aproximado. Una imprenta convierte mediante un perfil de color que tiene en cuenta la tinta, el papel y la máquina concretos, y el mismo color RGB dará valores CMYK distintos en estucado brillante que en papel sin estucar. Para lo que deba coincidir, pida a la imprenta su perfil en vez de fiarse de una fórmula.
¿Por qué algunos colores de pantalla no se pueden imprimir?
Porque ambos no alcanzan los mismos colores. Una pantalla crea color sumando luz y puede dar un cian o un verde vivo y saturado que la tinta sencillamente no iguala; el papel crea color absorbiendo luz, y lo más claro que puede llegar a ser es el blanco de la página. El conjunto de colores al que llega cada uno se llama gama, y donde no se solapan, una conversión ha de elegir el color disponible más cercano. Por eso un color brillante en pantalla suele verse algo apagado impreso.
¿El resultado es exacto?
Donde ambas unidades se definen una por otra con números enteros, sí: la página lo dice encima de la cifra, y el único redondeo está en cuántos dígitos se muestran. Donde la razón no tiene decimal finito, la página muestra doce cifras significativas y califica la relación de aproximada en vez de fingir otra cosa.
¿Algo de lo que escribo sale de mi dispositivo?
No. La aritmética se hace en su navegador; no se sube nada, y tampoco hay servidor que lo reciba. Cargada una vez, la página sigue funcionando con la red apagada.
Por qué se convierte HEX a HSL
Un código hexadecimal como #5A4632 es una buena forma de guardar un color y una mala forma de pensar en él. Nada en los dígitos le dice que el color es un marrón, cuánto brilla o cómo se vería una versión algo más pálida. HSL se inventó para arreglar eso. Describe un color como la gente tiende a hablar de él: qué matiz tiene, cuán vivo es y cuán claro es. Convertir HEX a HSL es traducir un color de la forma que le entrega una herramienta de diseño a la forma con la que se puede razonar: hsl(30, 29%, 28%) es un marrón anaranjado oscuro y apagado, y se ve al instante que subir el último número lo hará más pálido.
Esa es la verdadera razón por la que los diseñadores y los desarrolladores de front-end usan la conversión. Tienen un color de marca en hexadecimal y necesitan una familia de colores relacionados: uno más claro para el estado de pasar el ratón, uno más oscuro para un botón pulsado, uno muy pálido para el tinte de un fondo, uno menos saturado para un control desactivado. En hexadecimal, cada uno de ellos es una nueva búsqueda de tres pares de dígitos. En HSL, cada uno es un cambio de un solo número. El color es el mismo color, visto a través de una lente más útil.
Esta página convierte en su navegador, y no se sube nada. Más abajo encontrará cómo se calculan los tres números de HSL a partir de los dígitos hexadecimales, qué conserva la conversión y dónde redondea, qué significan en la práctica el matiz, la saturación y la luminosidad, cómo usan HSL los diseñadores para construir paletas y estados, y las trampas que atrapan a quienes convierten HEX a HSL por primera vez.
Qué describe HSL
Matiz: la posición en la rueda de colores
El matiz es un ángulo de 0 a 360 grados alrededor de una rueda de colores. El rojo está en 0, el amarillo en 60, el verde en 120, el cian en 180, el azul en 240 y el magenta en 300; en 360 se vuelve al rojo. Un matiz de 30 está entre el rojo y el amarillo, que es el naranja. El número dice en qué familia de color está, y nada sobre cuán brillante o pálido es.
Saturación: cuán vivo
La saturación es un porcentaje. Al 100% el color es tan puro como lo permite el matiz; al 0% ha perdido todo su color y es un gris. Una saturación del 29%, como en nuestro marrón de ejemplo, es un color apagado y terroso. Bajar la saturación es la forma más rápida de calmar un color chillón sin cambiar su carácter.
Luminosidad: cuán pálido u oscuro
La luminosidad también es un porcentaje. Al 0% el color es negro sea cual sea el matiz y la saturación; al 100% es blanco; al 50% es el color pleno, normal. Nuestro marrón al 28% está en el lado oscuro. Subir el número da una versión más pálida del mismo color, y bajarlo una más oscura, que es exactamente el cambio que más a menudo quieren los diseñadores.
Por qué es más fácil que el hexadecimal
En hexadecimal, aclarar un color significa aumentar los tres pares en cantidades distintas para que el matiz no se desvíe, algo casi imposible de hacer a ojo. En HSL significa cambiar una sola cifra y dejar las otras dos en paz.
Cómo funciona la conversión
De tres bytes a un ángulo y dos porcentajes
El convertidor lee primero los dígitos hexadecimales como los valores de rojo, verde y azul, cada uno de 0 a 255, y los escala a entre 0 y 1. Halla el mayor y el menor de los tres. La luminosidad es la media de los dos. La saturación depende de cuán separados estén, en relación con la luminosidad. El matiz depende de cuál canal es el mayor y de cómo se comparan los otros dos. Si los tres son iguales, el color es gris, la saturación es cero y el matiz no tiene significado; el convertidor muestra entonces 0 para él.
El ejemplo
Para #5A4632 los bytes son 90, 70 y 50. El rojo es el mayor con 0.353, el azul el menor con 0.196. La luminosidad es la mitad de su suma, 0.275, alrededor del 28%. La dispersión es 0.157, así que la saturación es 0.157 dividido entre la suma 0.549, alrededor del 29%. El rojo es el canal mayor y el verde queda en medio, lo que sitúa el matiz en 30 grados. El resultado es hsl(30, 29%, 28%).
Números enteros
Los tres números se redondean a grados enteros y porcentajes enteros al escribirse. Esa es la forma que usa la gente y la que espera CSS en el trabajo cotidiano, pero significa que se pierde algo de información en la última cifra, como explica la sección siguiente.
Qué conserva la conversión y qué no puede
Conserva el color como lo clasifica el ojo
El resultado es el color como lo clasifica el ojo: un matiz en la rueda, cuán saturado es, cuán claro. Por eso vale la pena tener HSL. Puede hacer un color más pálido o un tono más oscuro cambiando un solo número, algo casi imposible en hexadecimal.
No puede prometer los mismos bytes de vuelta
Los dos describen los mismos colores, pero HSL llega a ellos mediante una geometría distinta y sus tres números se redondean a grados enteros y porcentajes enteros al escribirse. Así, un color llevado a HSL y de vuelta puede acabar a uno o dos pasos de donde empezó: visualmente igual, no byte por byte igual. Si necesita los bytes exactos de vuelta, conserve el hexadecimal. Convierta HEX a HSL para trabajar con un color, y conserve el hexadecimal como maestro.
Los grises no tienen matiz
Cuando los tres bytes son iguales, no hay nada que decir sobre el matiz. El convertidor da un matiz de 0 y una saturación de 0%, y la luminosidad por sí sola describe el gris. No lea nada en ese 0.
Usar HSL en la práctica
Construir una familia de tonos
Tome el color base hsl(30, 29%, 28%). Un tono más claro para pasar el ratón es hsl(30, 29%, 34%). Un tinte muy pálido para un fondo es hsl(30, 29%, 94%). Un tono más oscuro para los estados pulsados es hsl(30, 29%, 22%). El matiz y la saturación se quedan quietos, así que los colores evidentemente van juntos. Hacer lo mismo en hexadecimal llevaría varios intentos y aun así se vería ligeramente desajustado.
Temas y modo oscuro
Un tema suele necesitar la misma paleta en versión clara y oscura. Con HSL, se conserva el matiz y se ajustan la luminosidad y la saturación: aclarar los fondos y oscurecer el texto para el tema claro, y al revés para el oscuro. Definir el matiz como una propiedad personalizada y variar solo la luminosidad es una forma habitual y ordenada de hacerlo.
Generar paletas
Para hallar colores que acompañen a una base, gire el matiz. Treinta grados a cada lado dan colores análogos, 180 da el complementario, y 120 o 240 dan una tríada. Fije la saturación y la luminosidad, cambie el matiz, y los colores tienen una sensación uniforme. Es una forma rápida de empezar una paleta que no parezca aleatoria.
Contraste accesible
La luminosidad es el principal control del contraste. Si el texto es difícil de leer sobre un fondo de color, la solución suele ser aumentar la diferencia de luminosidad entre ambos, y HSL lo convierte en cuestión de ajustar un número en cada lado.
Cómo convertir HEX a HSL aquí
Escriba o pegue el código hexadecimal
Introduzca el color en el primer campo, con o sin el signo de almohadilla. Se aceptan las formas de tres y de seis dígitos, y también se lee la forma de ocho dígitos con transparencia.
Lea el valor hsl
La respuesta aparece al instante, como en #5A4632 = hsl(30, 29%, 28%). Los tres números son el matiz en grados y la saturación y la luminosidad en porcentaje.
Cópielo en su hoja de estilos
Use el resultado tal cual, en una regla como color: hsl(30, 29%, 28%). Para ajustar el color, cambie la última cifra. La herramienta para el sentido opuesto es HSL a HEX.
De dónde vienen estas notaciones
Hexadecimal y RGB son lo mismo escrito dos veces
Un color de pantalla son tres números, cuánta luz roja, verde y azul emitir, cada uno de 0 a 255, que es un byte. El hexadecimal simplemente escribe esos bytes en base dieciséis. Para ver los números, convierta HEX a RGB.
HSL y CMYK
HSL se inventó porque ninguno de los dos es legible para un ser humano: da el matiz como un ángulo alrededor de una rueda de colores, con la saturación y la luminosidad como porcentajes, de modo que un diseñador puede aclarar algo sin recalcular tres cifras. CMYK pertenece a un mundo totalmente distinto, la tinta en lugar de la luz. Es sustractivo, construido con cuatro planchas de impresión, y no puede alcanzar todos los colores que una pantalla puede, porque una pantalla emite luz mientras que el papel solo la refleja.
Trampas al convertir HEX a HSL
Esperar un viaje de ida y vuelta perfecto
Por el redondeo, convertir de vuelta puede dar un código a uno o dos pasos del original. Para un solo color es invisible. Para un sistema de diseño en el que se convierten muchos colores de ida y vuelta, puede acumularse. Conserve el hexadecimal como fuente.
Suponer que igual luminosidad significa igual brillo
Dos colores con la misma luminosidad HSL pueden parecer bastante distintos en brillo: un amarillo al 50% parece mucho más brillante que un azul al 50%. La luminosidad HSL es un número cómodo, no una medida del brillo percibido. Para comprobar contrastes, use una herramienta de contraste adecuada.
Olvidar los signos de porcentaje
En CSS, la saturación y la luminosidad en hsl() llevan signos de porcentaje, y el matiz es un número simple o un número con deg. Dejar fuera los signos es un error clásico.
Leer demasiado en un gris
Un gris no tiene matiz. Si el convertidor muestra 0 para él, eso no significa que sea rojizo.
Preguntas que la gente se hace antes de convertir
¿Qué es #FF0000 en HSL?
hsl(0, 100%, 50%), rojo puro.
¿Qué es #FFFFFF en HSL?
hsl(0, 0%, 100%), blanco. El matiz carece de significado para el blanco, y el convertidor muestra 0.
¿Se admite HSL en todas partes?
Todos los navegadores actuales entienden hsl() y hsla(). Lleva muchos años en CSS.
¿Es exacta la conversión?
Es exacta en el sentido de describir el mismo color, pero los números se redondean a grados y porcentajes enteros, así que volver puede acabar a un paso de distancia.
¿Se sube mi color?
No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.
¿Cómo vuelvo atrás?
Con HSL a HEX.
Elegir con acierto al convertir HEX a HSL
Use HSL para trabajar, hexadecimal para guardar
Conserve la paleta maestra en hexadecimal, donde no hay ambigüedad, y use HSL cuando quiera crear variaciones. Los viajes de ida y vuelta pierden un poco; el maestro no.
Considere los espacios de color más nuevos
CSS ofrece ahora oklch() y notaciones similares en las que la misma luminosidad realmente se ve igual. Vale la pena aprenderlas para nuevos sistemas de diseño. HSL sigue siendo la notación que casi todo el mundo entiende y que todas las herramientas admiten.
Use propiedades personalizadas
Defina --hue, --sat y --light, y construya los colores a partir de ellas: hsl(var(--hue) var(--sat) var(--light)). Un tema cambia entonces editando unos pocos números.
Leer y escribir HSL con confianza
Algunos puntos de referencia que recordar
Unos pocos números hacen HSL más fácil de leer. Los matices en múltiplos de 60 son los colores puros: 0 rojo, 60 amarillo, 120 verde, 180 cian, 240 azul, 300 magenta. Una luminosidad de 50 con saturación de 100 da la versión más pura de cualquier matiz, y una luminosidad de 95 o más es un tinte tan pálido que funciona como fondo. Cuando convierta HEX a HSL y vea un matiz cerca de uno de estos puntos de referencia, puede nombrar la familia de color de un vistazo.
Moverse entre familias
Sumar 180 a un matiz da el color opuesto en la rueda, que es el complementario y suele ser el contraste más fuerte. Sumar o restar 30 da un vecino que se sienta cómodamente junto al original. Los diseñadores usan estos pasos para elegir acentos que combinen con un color de marca sin adivinar.
Llevar una nota de los valores convertidos
Cuando convierta HEX a HSL para una paleta, escriba los resultados en una tabla con el hexadecimal original al lado. La tabla muestra cómo se relacionan los colores, y si un matiz o una luminosidad está fuera de línea con los demás, la rareza se ve al instante. También da a su equipo una referencia compartida.
Probar en pantallas reales
Los colores que parecen equilibrados en un monitor calibrado pueden verse distintos en un teléfono al sol o en un portátil barato. Compruebe la paleta terminada en al menos dos dispositivos, y ajuste un poco la luminosidad si los tintes pálidos desaparecen en uno de ellos.
Convertidores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver atrás, use HSL a HEX. Para los números detrás del código, están HEX a RGB y RGB a HEX, y para la impresión, HEX a CMYK y CMYK a HEX. Para los tamaños de la misma hoja de estilos, px a rem y px a em hacen con las longitudes lo que esta página hace con los colores.
Un ejemplo resuelto
Digamos que el color de su marca es #1E7A5C. Convierte HEX a HSL y lee hsl(160, 61%, 30%). Para un estado de pasar el ratón escribe hsl(160, 61%, 36%), algo más claro. Para un estado pulsado, hsl(160, 61%, 24%). Para un fondo muy pálido detrás de un aviso, hsl(160, 40%, 95%). Para un botón desactivado, hsl(160, 12%, 60%), el mismo matiz con casi todo el color quitado. Cinco colores, un matiz, escritos en un minuto, y todos parecen pertenecer juntos. Cuando cambia el color de la marca, cambia el número del matiz una vez.
Una breve lista de comprobación
Antes de convertir
Decida qué quiere hacer con el color: variarlo, aplicarlo a un tema o solo leerlo.
Mientras convierte
Pegue el hexadecimal, lea el hsl y anote los tres números.
Después de convertir
Haga las variaciones cambiando un número cada vez, y mírelas sobre el fondo real.
Errores comunes
Tratar los números redondeados como exactos
Son números enteros. Conserve el hexadecimal como maestro.
Equiparar luminosidad con brillo
Dos colores con la misma luminosidad pueden diferir mucho en cuán brillantes parecen.
Dejar fuera los signos de porcentaje
La saturación y la luminosidad los necesitan en CSS.
Sus colores se quedan en su dispositivo
El cálculo ocurre en local. Sus valores los usa su propio navegador y no se envía nada a ninguna parte. No hay nada que borrar después ni cuenta que crear. Esa es la forma sencilla de convertir HEX a HSL.
Resumen
Para convertir HEX a HSL aquí, escriba o pegue el código hexadecimal y lea el valor hsl al instante. La conversión conserva el color como lo clasifica el ojo: un matiz en la rueda, cuán saturado es, cuán claro. Por eso vale la pena tener HSL, ya que puede hacer un color más pálido o un tono más oscuro cambiando un solo número, algo casi imposible en hexadecimal. Los dos describen los mismos colores, pero HSL llega a ellos mediante una geometría distinta y sus tres números se redondean a grados enteros y porcentajes enteros, así que un color llevado a HSL y de vuelta puede acabar a uno o dos pasos de donde empezó. Si necesita los bytes exactos de vuelta, conserve el hexadecimal. No se sube nada.