Convertir HSL a HEX Hue Saturation Lightness ↔ Hexadecimal Gratis En línea Seguro
Escriba un valor en HSL y léalo al instante en HEX. 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 HSL a HEX
Ha calculado un color en HSL, porque es la notación en la que se puede pensar: matiz 30, saturación 29%, luminosidad 28%, un marrón apagado, y una versión más pálida al 34% para el estado de pasar el ratón. Ahora el color tiene que ir a algún sitio que pide un código hexadecimal: un archivo de tokens de diseño, una hoja de marca, una herramienta que no entiende hsl(), una plantilla de correo, un mensaje a un colega. Convertir HSL a HEX es tomar el color sobre el que ha razonado y escribirlo en la forma que es corta, inequívoca y comprendida por todo.
La conversión funciona en sentido opuesto al que los diseñadores encuentran primero. Parte de tres números cómodos para las personas y llega a tres bytes. Cada paso es aritmética sencilla, pero implica algunos casos de tipo trigonométrico y redondeos, por lo que la gente prefiere que se lo hagan. La página lo hace en su navegador, y no se sube nada. Más abajo encontrará cómo los tres números se convierten en los seis dígitos hexadecimales, qué conserva la conversión, por qué un color que ha pasado por HSL puede acabar a uno o dos pasos de donde empezó, las formas en que los diseñadores usan la conversión y las trampas que evitar.
Cómo funciona la conversión
De matiz, saturación y luminosidad a rojo, verde y azul
El convertidor calcula primero la cromaticidad, que es cuánto se aleja el color del gris: crece con la saturación y se reduce a medida que la luminosidad se aleja del 50%. Luego sitúa el matiz en uno de los seis sectores de la rueda de colores, cada uno de 60 grados de ancho, y a partir del sector decide cuál de los tres canales está en su máximo, cuál en su mínimo y cuál queda entre medias. Por último suma una constante para que la luminosidad salga bien, escala los tres valores del rango de 0 a 1 hasta de 0 a 255 y redondea cada uno a un número entero. Esos tres bytes se escriben en base dieciséis, dos dígitos cada uno.
Un ejemplo con números
Tome hsl(30, 29%, 28%). La cromaticidad es (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. El matiz de 30 grados está a la mitad del primer sector, así que el canal intermedio es la mitad de la cromaticidad, 0.0812. La constante que sumar es 0.28 − 0.0812 = 0.1988. Así, el rojo es 0.1624 + 0.1988 = 0.3612, el verde es 0.0812 + 0.1988 = 0.28 y el azul es 0.1988. Multiplicados por 255 y redondeados, son 92, 71 y 51. En hexadecimal, eso es #5C4733.
Grises
Cuando la saturación es 0%, el color es un gris sea cual sea el matiz, y los tres bytes son iguales. hsl(0, 0%, 50%) es #808080. El matiz se ignora, así que cualquier número de matiz da el mismo gris.
Qué conserva la conversión y qué no puede
Conserva el color tal como lo describió
El resultado es el color cuyo matiz, saturación y luminosidad usted dio, escrito como bytes. Los tres números que escribió son 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, y la conversión lleva su elección al hexadecimal fielmente.
No puede prometer los mismos números a la 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. En nuestro ejemplo, #5A4632 era un color cuyo HSL es aproximadamente hsl(30, 29%, 28%); convertir de vuelta esas cifras redondeadas da #5C4733, a dos pasos en el rojo. Si necesita los bytes exactos, conserve el hexadecimal.
Signos de porcentaje y de grado
La página lee el matiz en grados y la saturación y la luminosidad en porcentaje. Puede escribirlos con o sin los signos. Un matiz por encima de 360 o por debajo de 0 se envuelve alrededor de la rueda, así que 390 es lo mismo que 30.
Usos prácticos
Escribir un archivo de tokens de diseño
Un sistema de diseño guarda los colores como tokens. Muchos equipos crean los colores en HSL, porque pueden razonar sobre ellos, y los publican en hexadecimal, porque todas las herramientas lo leen. Convierta HSL a HEX una vez por cada token, y el archivo publicado es algo que todos pueden usar.
Producir colores para herramientas que no leen hsl()
Los clientes de correo, algunos editores de documentos, los programas gráficos más antiguos y muchas bibliotecas de gráficos aceptan solo hexadecimal. Lo que calculó en HSL debe convertirse antes de que puedan usarlo.
Comprobar una paleta generada
Un script que genera una paleta girando el matiz da una lista de valores hsl(). Para verlos como los códigos que pondría en una hoja de estilos o entregaría a un diseñador, convierta cada uno a hexadecimal. También le permite detectar valores que se redondean al mismo código y que por tanto no son realmente distintos.
Compartir un color en un mensaje
Un código hexadecimal es corto, copiable y comprendido por casi todos los que trabajan con color. Un valor hsl() es más largo y menos familiar fuera del diseño. Cuando envía un color a alguien, el hexadecimal es la forma cortés.
Cómo convertir HSL a HEX aquí
Escriba o pegue el valor hsl
Introduzca el color en el primer campo en la forma hsl(30, 29%, 28%), o solo los tres números. El matiz va en grados, la saturación y la luminosidad en porcentaje.
Lea el código hexadecimal
La respuesta aparece al instante, como en hsl(30, 29%, 28%) = #5C4733. Se escribe con letras mayúsculas y un signo de almohadilla.
Cópielo en su trabajo
Use el código en su hoja de estilos, archivo de tokens o mensaje. Para el sentido opuesto, HEX a HSL está a un clic.
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 HSL a HEX
Esperar recuperar el código original
Si partió de un código hexadecimal, lo convirtió a HSL, no ajustó nada y lo convirtió de vuelta, puede obtener un código distinto a uno o dos pasos. Para un solo color es invisible. Para un sistema de diseño, decida qué forma es el maestro, y trate la otra como derivada.
Confundir saturación y luminosidad
Los dos son fáciles de intercambiar por error: hsl(30, 28%, 29%) no es hsl(30, 29%, 28%). El orden es matiz, saturación, luminosidad. Si el color en pantalla no se ve como esperaba, compruebe que no los invirtió.
Olvidar que la luminosidad no es brillo
Dos colores con la misma luminosidad pueden verse distintos en brillo. El amarillo al 50% de luminosidad parece mucho más brillante que el azul al 50%. Si elige colores para texto y fondo, compruebe su contraste con una herramienta adecuada, no comparando números de luminosidad.
Usar valores fuera de rango
La saturación y la luminosidad se limitan de 0 a 100 por ciento. Los valores fuera de ese rango se recortan. Una luminosidad del 120% no es más brillante que el blanco; es blanco.
Preguntas que la gente se hace antes de convertir
¿Qué es hsl(0, 100%, 50%) en hexadecimal?
#FF0000, rojo puro.
¿Qué es hsl(0, 0%, 100%) en hexadecimal?
#FFFFFF, blanco.
¿Puedo usar decimales?
Sí. Se acepta hsl(30.5, 28.6%, 27.8%). El resultado se redondea a bytes enteros.
¿Es exacta la conversión?
Da los bytes exactos para los números que escribió, redondeados a valores enteros. Volver puede acabar a un paso, porque los números HSL se redondearon.
¿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 HEX a HSL.
Elegir con acierto al convertir HSL a HEX
Decida qué forma es el maestro
Si diseña en HSL, conserve los valores HSL como fuente y publique el hexadecimal como salida. Si la marca le da el hexadecimal, conserve ese y use HSL solo para variaciones. Mezclar los dos como fuentes iguales es lo que crea la deriva.
Use HSL para variar, hexadecimal para fijar
Cuando necesite una familia de tonos, trabaje en HSL. Cuando necesite fijar un color para que sea idéntico en todas las herramientas, escríbalo como hexadecimal.
Conserve los números que escribió
Anote los valores HSL junto al hexadecimal en la nota de su paleta. Si alguien quiere más tarde una versión más pálida, puede partir de sus números y no de un código que ya se ha redondeado.
Los seis sectores de la rueda
Qué canal es alto, cuál es bajo
La conversión divide la rueda en seis sectores de 60 grados, y en cada uno de ellos un canal está en su máximo, uno en su mínimo y el tercero cambia suavemente. De 0 a 60, el rojo está en el máximo, el azul en el mínimo y el verde sube: el rojo se vuelve amarillo. De 60 a 120, el verde está en el máximo y el rojo baja: el amarillo se vuelve verde. De 120 a 180, el verde sigue alto y el azul sube: el verde se vuelve cian. De 180 a 240, el azul toma el relevo y el verde baja. De 240 a 300, el azul sigue alto y el rojo sube: el azul se vuelve magenta. De 300 a 360, el rojo vuelve a tomar el relevo y el azul baja. Cuando convierta HSL a HEX, ayuda saber en qué sector está su matiz, porque le dice cuál de los tres pares de la respuesta será el mayor.
Por qué la respuesta tiene un aire de familia
Los colores del mismo matiz y saturación pero distinta luminosidad dan códigos hexadecimales que parecen parientes: el mismo patrón de qué par es alto y cuál es bajo, solo que escalado hacia arriba o hacia abajo. #5C4733, #7A5F44 y #A38461 están todos en la misma familia, con el rojo mayor, luego el verde, luego el azul. Puede aprender a leer esto de un vistazo, y facilita atrapar los errores.
Construir una rampa de luminosidad
Un matiz, nueve pasos
Un uso muy práctico de la conversión es construir una rampa de un solo color de muy pálido a muy oscuro, el tipo de escala que los sistemas de diseño etiquetan 50, 100, 200 y así hasta 900. Elija un matiz y una saturación, y recorra la luminosidad con valores como 96, 90, 80, 70, 60, 50, 40, 30 y 20 por ciento. Convierta HSL a HEX para cada paso, y tendrá nueve códigos que van juntos. Reducir ligeramente la saturación en los extremos, unos pocos puntos en los pasos más pálidos y más oscuros, suele verse más natural que mantenerla constante.
Poner nombre a los pasos
Dé a cada paso un nombre que registre su función, no su valor: superficie para el más pálido, borde para el siguiente, texto para el más oscuro. En el código, un nombre dice al siguiente lector para qué sirve el color, y usted puede cambiar el número que hay detrás sin tocar las reglas que lo usan.
Temas claro y oscuro
Reflejar la rampa
Un tema oscuro suele ser el tema claro con la rampa dada la vuelta: el paso más pálido, que es el fondo de la página en el tema claro, pasa a ser el más oscuro como fondo en el oscuro. Si construyó la rampa en HSL, el tema oscuro no le cuesta más que un segundo juego de conversiones. Mantenga fijo el matiz, lo que conserva el carácter de la marca, y ajuste algo la saturación, ya que los colores saturados tienden a verse duros sobre fondos oscuros.
Comprobar ambos temas
Pruebe cada par de texto y fondo de ambos temas en cuanto a contraste. Un color que funciona sobre blanco puede fallar sobre casi negro, y la comprobación lleva un minuto con una herramienta de contraste y los códigos hexadecimales que acaba de producir.
Cuando solo tiene una idea aproximada del color
Empiece por la rueda, luego afine
A veces no tiene ningún código hexadecimal, solo una idea: un azul tranquilo, un naranja cálido, un verde fresco. HSL es un buen lugar para empezar, porque puede elegir un matiz de los puntos de referencia de la rueda, fijar una saturación moderada y una luminosidad intermedia, y luego convertir HSL a HEX para ver lo que tiene. Si se ve demasiado chillón, baje la saturación; si se ve plano, mueva la luminosidad. Cada prueba cuesta segundos, y termina con un código hexadecimal que puede poner directamente en una hoja de estilos.
Convertidores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver atrás, use HEX a HSL. 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 hace con las longitudes lo que esta página hace con los colores.
Un ejemplo resuelto
Digamos que ha elegido un verde para el estado de éxito de una aplicación: hsl(145, 55%, 38%). Lo escribe y lee #2C9658. Usa ese código en el archivo de tokens como --success. Para el fondo de un aviso de éxito toma el mismo matiz, hsl(145, 45%, 94%), y lee #E9F7EF. Para el borde, hsl(145, 45%, 78%), que se lee #AEE0C3. Tres códigos, un matiz, todos derivados en un minuto, y cada uno un simple código hexadecimal que cualquier herramienta del equipo puede abrir.
Una breve lista de comprobación
Antes de convertir
Compruebe el orden de los tres números: matiz, saturación, luminosidad. Decida qué forma es su maestro.
Mientras convierte
Escriba los valores, lea el hexadecimal y cópielo con su signo de almohadilla.
Después de convertir
Mire el color en pantalla en contexto, y anote los valores HSL junto al código para más adelante.
Errores comunes
Intercambiar saturación y luminosidad
El orden es matiz, saturación, luminosidad.
Esperar recuperar el hexadecimal antiguo
Puede acabar a un paso. Conserve el original si importa.
Comparar la luminosidad en lugar del contraste
Use una herramienta de contraste para el texto y el fondo.
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 HSL a HEX.
Resumen
Para convertir HSL a HEX aquí, escriba el matiz en grados y la saturación y la luminosidad en porcentaje, y lea el código hexadecimal 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. Las dos notaciones 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, conserve el hexadecimal. No se sube nada.