¿Qué significa RGB? ¿Cómo funciona?
RGB son las siglas de tres colores en inglés que son el Red, Green y Blue que son el rojo, verde y azul respectivamente en español. Con la mezcla de estos tres colores primarios, podemos obtener el resto de los diferentes colores que somos capaces de captar mediante nuestros ojos.
Para poder representar la gran gama de colores que conocemos, cada color de los que hemos citado anteriormente está compuesto como máximo por tres dígitos cada uno de ellos. Estos dígitos pueden abarcar desde el número 0 hasta el 255, siendo el 0 el de menor valor y el 255 el de máximo. Según el número que represente a cada color, tendrá mayor o menor intensidad de este. La manera de representar el RGB sería (x, x, x) siendo rojo, verde y azul.
Un ejemplo fácil de ver sería si tuviéramos el (255, 0, 0) sería el color rojo, ya que solo le estamos dando valor a esa tonalidad. En cambio, si todos los pusiéramos a su máxima potencia (255, 255, 255) daría lugar al blanco y si por el contrario le diéramos la mínima (0, 0, 0) daría lugar al negro que es la ausencia total de luz.
Aquí arriba podrás combinar los tres colores con la intensidad que decidas en cada uno y como consecuencia podrás observar el color que resulta de la mezcla elegida.
También podemos observar que encontramos la notación RGBA en la cual A es el parámetro adicional que indica la opacidad/transparencia de un color. Este parámetro se encuentra entre los valores 0 y 1, en el que el 0 es transparente del todo y 1 es lo más opaco posible.
¿Qué significa HSL? ¿Cómo funciona?
Ahora para comprender más, vamos a tratar el tema del HSL, que estas son las siglas de Hue Saturation Lightness, es decir, sería el tono, la saturación y la luminosidad. Describamos brevemente cada uno de ellos:
- Hue (tono): Es un círculo de 360 grados en el que están todos los colores y dependiendo de la posición en la que estemos situados, estaremos marcando un color u otro.
En este círculo de colores, hay algunas tonalidades clave que tienen su lugar exacto como por ejemplo sería el color rojo que lo encontraríamos en el grado 0 o en el 360, ya que sabemos que en un círculo se trata de la misma posición. Otro de los colores sería el verde que lo ubicamos en 120 grados y el azul que estaría en 240. Estos son los colores principales, pero en este círculo podemos encontrar cualquiera de los colores que conocemos.
Aunque estemos hablando en grados, cuando representamos el HSL lo haremos sin unidades, directamente ponemos solamente el número. - Saturation (saturación): Esto es la cantidad de color que hay, va desde el 0% que es gris hasta el 100% que sería el color que hayamos elegido a su máxima potencia.
Para que se comprenda mejor, podemos poner un ejemplo con unos pantalones. Cuando vamos a comprar unos pantalones, estos se encuentran perfectos, al 100% de su color, pero después de utilizarlo durante muchos años y tantos lavados, nada tiene que ver con el color que tenía originalmente. Ahora, podríamos decir que tiene un color más desgastado, ya no se encuentra en ese 100%, poco a poco va bajando y cuanto más desgastado esté, menor porcentaje de color tendrá. - Lightness (luminosidad): En este caso, es la cantidad de luz que hay. Como ya sabemos, cuanta más luz haya, el color será más claro, estará dirigido hacia el blanco, en cambio si privamos de esta luz, el color será más oscuro, es decir, tirará hacia el negro.
Igual que en la saturación, la luminosidad se mide mediante porcentajes, en el que el 0% es la ausencia de luz y el 100% sería el contrario.
Pongamos aquí también un ejemplo fácil de ver: Si pongo un objeto al lado de una ventana donde está dando el sol, el objeto tendrá un color más claro al tener mayor cantidad de luz. Ahora imaginemos que pusiésemos otro objeto entre esa ventana y nuestro objeto principal, ¿qué pasaría?, fácil, a consecuencia de esto, a nuestro objeto le daría la sombra, privamos de una parte de la luz por lo que este se volvería más oscuro y por lo tanto su porcentaje sería menor.