Cuando se trata de salpicar colores en la pantalla, hay varias formas de hacerlo con la codificación. Hex, RGBA y HSLA son tres de los sistemas de codificación de colores más utilizados.
Es posible que haya encontrado códigos RGB y hexadecimales en el pasado, pero HSL, aunque es más legible para los humanos, puede que aún no esté 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 la decisión correcta. Aquí explicaremos la diferencia entre RGB, HEX y HSL.
Qué es RGB (rojo, verde, azul)
Tiene sentido comenzar con un valor RGB, porque rojo, verdey azul Hay tres colores que el lienzo puede usar para producir casi cualquier otro color. Esto se realiza mediante la “mezcla de colores aditiva”, pero no es necesario estudiar este conocimiento para comprender RGB.
rgb (255, 0, 0) es rojo, porque R está maximizado. Si configura G o B en 255, obtendrá un color verde o azul completo. Establezca todo en 255 a la vez y obtendrá blanco (la suma de todos los colores) mientras se enfoca en negro. Si agrega un cuarto valor (canal alfa, ingrese 0 a 1) También puede obtener transparencia: rgba (0, 0, 0, .5) se traduce en negro transparente medio.
Simple, sí, pero no es tan inteligente. El balance RGB puede cambiar un poco, incluso si solo cambia el tono del color, lo que hace que sea muy difícil para los humanos hacer ajustes manuales sin algún tipo de generador RGB (que, afortunadamente, hay muchos).
¿Qué es un código de color hexadecimal?
Hex es una forma diferente de escribir valores RGB. Algo así como 6a79f7 (azul aciano) se asigna directamente a RGB (106, 121, 247). 6 es rojo79 es verdey f7 son azul.
Primero, debe saber que en el sistema de color hexadecimal, las letras “af” representan números del diez al quince. En segundo lugar, es hexadecimal, lo que significa que todo está en la parte inferior. 16. 21 es 2 * 10+ 1 en base 10, pero el hex se convertirá en 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 + 10 o 106. 79 = 7 * * 16 + 9 o 121.
Si bien las matemáticas son divertidas, sin duda hace que el código hexadecimal sea aún más doloroso para los humanos que RGB, aunque es fácil copiar y pegar combinaciones impresionantes de letras y números.
También puede agregar transparencia al código hexadecimal colocando un valor equivalente a un porcentaje de 255 al principio, como por ejemplo: 806a79f7. 80 en hexadecimal = 126, que es aproximadamente el 50% del valor máximo de 255.
¿Qué es HSL (Tono, Saturación, Ligereza)
HSL está más o menos diseñado para la legibilidad humana y se está volviendo cada vez más popular, especialmente como una alternativa a RGB. Funciona así:
Color significa color y usa la nota en la rueda de colores para indicar qué color lleva puesto. Si conoce la rueda de colores y la posición de estos colores principales, debe saber que 45 será naranja y 270 será púrpura solo por pensar por un momento.
0 = rojo60 = amarillo120 = verde180 = cian240 = azul300 = magenta
Saturación básicamente lo coloridos que son los colores. Saturación 0% significa que el color será solo gris, mientras que 100% significa que mostrará toda su fuerza. Si desea silenciar su color o hacerlo un poco más pop, puede cambiar este valor.
Alivio te dice qué tan oscuro o brillante es el color. 0% de brillo significa que su color será negro, independientemente de la configuración de Tono o Saturación, y 100% de brillo lo hace blanco. Como habrás adivinado, el 50% proporciona el color más preciso.
Con esta información, debe saber de inmediato qué hsl (0, 100%, 50%). ¡Solo rojo! ¿Quieres un rojo más oscuro y rico? pruébalo 0, 70%, 40%. Tal vez quieras, pero en azul? ¡Cambia 0 hasta 240 y lo tienes! También tiene transparencia: funciona como RGB: solo agregue un cuarto valor (tipo 0 y 1), como: hsla (240, 70%, 40%, .5)
HSV / HSB y HSI
¿De que? ¿Más modelos de color? ¿Cuando termina? Para la mayoría de las personas que trabajan con color en una computadora, esto ha terminado. Hex, RGB y HSL son, con mucho, las formas más comunes de distinguir 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 de imágenes, puede conocer a personas que usan uno de estos modelos de color más esotéricos o incluso uno de los otros que no lo hacen. enumerado aquí. .
HSB significa “Brillo de saturación de tono” y HSV significa Valor de saturación de tono. De hecho, son solo nombres diferentes para el mismo modelo, y la mayor diferencia para HSL es cómo definen la saturación. HSI (Intensidad de saturación de tono) tiene algunas pequeñas diferencias con respecto a HSB / HSV, pero no se usa ampliamente, por lo que probablemente no lo verá con frecuencia en la naturaleza.
¿Qué modelo de color debo usar?
En general, elegir un modelo de color es una decisión de diseño muy pequeña, pero se hacen cosas buenas con muchas decisiones pequeñas. En general, los códigos hexadecimales facilitan la copia y son buenos en situaciones donde los humanos pueden no estar muy involucrados. Vale la pena leer RGB / RGBA y se usa mejor cuando sería mejor si los humanos a veces cambiaran la transparencia. Si un humano necesita cambiar los colores manualmente, use HSL / HSLA. Además, esto es más una cuestión de preferencia, aunque las personas en el equipo de HSL tienden a ser más inteligentes y más atractivas.
Crédito de imagen: saturación de cilindro HSL gris sólido, color aditivo, XTerm, carta de colores HSL y HSV, Munsell 1943
¿Te ayudó este artículo? Sí No
