miércoles, junio 12, 2024
No menu items!
InicioBlogsC√≥digo de color: ¬ŅCu√°l es la diferencia entre Hex, RGB y HSL?

C√≥digo de color: ¬ŅCu√°l es la diferencia entre Hex, RGB y HSL?

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.

Modelo de color rgba

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).

ūüĒ• Leer:  C√≥mo transferir Borderlands 3 entre Epic y Steam en PC

¬ŅQu√© es un c√≥digo de color hexadecimal?

Patrón de color hexagonal transparente

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.

Modelo de color de mesa hexagonal

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)

Modelo de color HSL

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.

Rueda de color RGB

0 = rojo60 = amarillo120 = verde180 = cian240 = azul300 = magenta

ūüĒ• Leer:  Lista completa de armas en PUBG Mobile, ¬Ņcu√°l es la m√°s letal?

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.

Modelo de color Hsla

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

Modelo de color hsv

¬Ņ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.

ūüĒ• Leer:  Mejor color para celular: ¬ŅCu√°l?

¬Ņ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

Recomendamos

Populares