Códigos de color: ¿Cuál es la diferencia entre Hex, RGB y HSL?

Cuando se trata de salpicaduras de color en la pantalla, hay algunas formas de hacerlo con codificación. Hex, RGBA y HSLA son tres de los sistemas de códigos de colores más utilizados.

Probablemente haya encontrado códigos hexadecimales y RGB en el pasado, pero HSL, a pesar de ser más legible por humanos, puede que aún no haya estado en su radar. Cada forma de escribir colores tiene sentido en diferentes situaciones, y todo lo que necesita es una comprensión básica de cada tipo para tomar una decisión informada. Aquí explicaremos las diferencias entre RGB, HEX y HSL.

¿Qué es RGB (rojo, verde, azul)?

Tiene sentido comenzar con valores RGB, ya que el rojo , el verde y el azul son los tres colores que las pantallas pueden usar para producir prácticamente cualquier otro color. Lo hace utilizando una “mezcla de colores aditiva”, pero no es necesario profundizar en la ciencia de eso para comprender el RGB.

rgb(255, 0, 0)es rojo, ya que la R está al máximo. Si configura G o B en 255, obtendrá un verde completo o un azul completo. Configúrelos todos en 255 a la vez y obtendrá el blanco (la suma de todos los colores), mientras que al ponerlos a cero se vuelve negro. Si agrega un cuarto valor (el canal alfa, entre 0 y 1), también puede obtener transparencia: se rgba(0, 0, 0, .5)traduce en un negro semitransparente.

Es simple, sí, pero en realidad no es tan intuitivo. El balance RGB puede cambiar bastante incluso si solo está cambiando el tono de un color, lo que dificulta que los humanos realicen ajustes manuales sin algún tipo de generador RGB (de los cuales, afortunadamente, hay muchos).

¿Qué son los códigos de color hexadecimales?

Los hexágonos son solo una forma diferente de escribir valores RGB. Algo como #6a79f7(azul aciano) se asigna directamente a rgb(106, 121, 247). 6a es el rojo , 79 es el verde y f7 es el azul .

Primero, debe saber que en el sistema de colores hexadecimales las letras “af” representan los números del diez al quince. En segundo lugar, es hexadecimal , lo que significa que todo está en base 16 . 21 está 2 * 10 + 1en base 10, pero en hexadecimal lo estaría 2 * 16 + 1. Simplemente multiplique el primer número por 16 y agregue el segundo número, ¡es tan fácil como eso! 6a = 6 * 16 + 10o 106. 79 = 7 * 16 + 9o 121.

Si bien las matemáticas son divertidas, obviamente hacen que los códigos hexadecimales sean aún más molestos para los humanos que el RGB, aunque son fáciles de copiar y pegar y pueden tener combinaciones memorables de letras y números.

También puede agregar transparencia a los códigos hexadecimales poniendo un valor equivalente a un porcentaje del 255 al principio, así: #806a79f7. 80 en hexadecimal = 126, que está cerca del 50% del valor máximo de 255.

¿Qué es HSL (tono, saturación, luminosidad)?

HSL fue diseñado básicamente para la legibilidad humana y está ganando popularidad, particularmente como una alternativa RGB. Funciona así:

Hue significa color y usa los grados de la rueda de colores para indicarle en qué color está. Si conoce la rueda de colores y las posiciones de estos colores principales, debería poder decir que 45 se verá naranja y 270 se verá púrpura con solo pensarlo por un segundo.

  • 0 = rojo
  • 60 = amarillo
  • 120 = verde
  • 180 = cian
  • 240 = azul
  • 300 = magenta

La saturación es esencialmente lo colorido que es el color. 0% de saturación significa que el color será solo un tono gris, mientras que 100% significa que se verá con toda su fuerza. Si desea silenciar su color o hacer que resalte un poco más, puede cambiar este valor.

La claridad te dice qué tan oscuro o brillante es el color. 0% de luminosidad significa que su color será negro, independientemente de la configuración de Tono o Saturación, y el 100% de luminosidad lo dejará blanco. Como habrás adivinado, el 50% te da el color más preciso.

Con esa información, debería poder decir instantáneamente qué hsl(0, 100%, 50%)significa. ¡Es rojo! ¿Quieres un rojo más oscuro y rico? Prueba 0, 70%, 40%. Tal vez quieras eso, ¿pero en azul? ¡Simplemente cambie 0 a 240 y lo tiene! Tiene la transparencia, también – que funciona como RGB: sólo tiene que añadir un cuarto valor (entre 0 y 1), así: hsla(240, 70%, 40%, .5).

HSV / HSB y HSI

¿Qué? ¿Más modelos de color? ¿Cuando termina? Para la mayoría de las personas que trabajan con colores en computadoras, ya se acabó. Hex, RGB y HSL son, con mucho, las formas más comunes de anotar colores. Sin embargo, si se encuentra en un campo que involucra muchas imágenes y colores, como el diseño gráfico o el aprendizaje automático en imágenes, puede encontrarse con personas que usan uno de estos modelos de color más esotéricos, o incluso uno de los otros que no se enumeran aquí.

HSB significa “brillo de saturación de tono” y HSV significa valor de saturación de tono. En realidad, son solo nombres diferentes para el mismo modelo, y su mayor diferencia con HSL es cómo definen la saturación. HSI (Intensidad de saturación de tono) tiene algunas diferencias menores con HSB / HSV, pero no se usa ampliamente, por lo que es probable que no lo veas mucho en la naturaleza.

¿Qué modelo de color debo utilizar?

En general, elegir un modelo de color es una decisión de diseño bastante menor, pero las cosas buenas se hacen con muchas decisiones pequeñas. En general, los códigos hexadecimales facilitan la copia y el pegado y son excelentes en situaciones en las que los humanos probablemente no se involucren mucho. RGB / RGBA es decente para la legibilidad y se usa mejor cuando sería bueno que un humano a veces pudiera modificar la transparencia. Si un humano necesita cambiar el color manualmente, opte por HSL / HSLA. Aparte de eso, es una cuestión de preferencia, aunque la gente del equipo HSL tiende a ser más inteligente y atractiva.

Créditos de imagen: HSL Color Solid Cylinder Saturation Grey , Additive Color , Tabla de colores XTerm , HSL y HSV , Munsell 1943

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario