[ad_1]
Una de los parámetros fundamentales cuando estamos trabajando con CSS son los colores. Ya sea por un aspecto puramente estético, o por accesibilidad, el uso del color al crear una web es de una importancia tremenda. En la gran mayoría de los casos, lo más global es usar alguno de estos tres código de color (y sus variantes con transparencias): RBG/RGBA, HEX o HSL/HSLA. Si has conocido o trabajas con CSS de forma habitual, habrás notado que el uso de RGB y HEX es conveniente mayoritario con respecto a HSL. Y en este artículo vamos a intentar comprender como se construyen estos tres código de color, y por qué deberías utilizar HSL en tu flujo de trabajo.
En primer empleo, vamos a ver como se construyen los códigos de color RGB y HEX, ya que somos muchos los que muchas veces los utilizamos sin conocer muy proporcionadamente de donde vienen. Y una vez sepamos esto, explicaremos como funciona HSL, y porque es un código mucho más obediente de entender, y de construir paletas de colores simplemente cambiando sus números, aunque no veamos directamente el color.
Cómo funcionan los códigos HEX y RGB
Las tres cifras que se ven en un código RGB representan los títulos del rojo, verde y celeste en una escalera de 0 a 255, donde el 0 es la abandono de ese color, y el 255 es su mayor. Y con la mezcla de estos tres colores obtenemos nuestro color final. Pero, ¿sabríais decirme que color es el rgb(10, 117, 173)?. Porque si podría opinar que si mezclo rojo a 255 con verde a 255 voy a obtener un tono amarillo. Pero ya mezclar tres colores se vuelve poco más difícil.
Si os pongo el código HEX #0A75AD, ¿qué color diríais que es?. ¿Es un tipo de verde, de rojo, de celeste o de amarillo?. Sinceramente, yo no lo sé, y tendría que irme a un software de dibujo o agenciárselas en Google para conocer exactamente que color es. Si, es cierto que por ejemplo, en VS Code, si escribimos el código, al banda tendremos un cuadradito con el color. Pero tenemos un problema, y es que muchos no sabremos ni acercarnos al color que representa ese código HEX. Por resumir, el código de color HEX se plinto en un sistema hexadecimal, que va del 0 al 9, y sigue de la A a la F. Y las seis cifras del código se dividen en tres, siendo las dos primeras la que definen el rojo, la tercera y cuarta el verde, y la chale y sexta emblema el celeste. Muy parecido a como funciona el RGB.
Una vez sabemos esto, el problema es claro. No son códigos intuitivos. Es verdad que se suelen conocer ciertos código, como el blanco puro, el infausto puro, o algún otro que usamos asiduamente. Pero los sabemos más por memoria que por intuición. Y esto es un problema, porque no conocer rebuscar un color mediante su código hace que siempre necesitemos herramientas externas, tanto para conocer con que estamos trabajando, como para crear paletas de colores, o tonalidades complementarias. Por suerte, esto lo soluciona el código de color HSL.
Entendiendo el significado de HSL
El código de color HSL se plinto en tres variables: hue o matiz, saturation o saturación, y lightness o brillo. La primera se mide de grados de 0° a 360°, y los otros dos en porcentajes de 0% a 100%. Al principio, puede parecer que es igual de difícil que los código RGB y HEX, pero una vez entendamos como funciona cada una de estas tres variables, no solo vamos a rebuscar el color inmediatamente, sino que crear cualquier tipo de paleta, o gradaciones de un mismo color será tremendamente sencillo.
Matiz / Hue
Con hue o matiz nos referimos al color. El rojo está a 0°, el verde a 120° y el celeste a 270°. En esta imagen podemos ver más claramente donde se situaría cada color.
Como vemos, simplemente sabiendo la posición de ciertos colores básicos, reconoceremos casi instantáneamente el color de nuestro HSL. Sabiendo que el rojo son 0° y el amarillo 60°, cualquier valencia intermedio va a tener una tonalidad anarajanda, mas rojiza o amarillenta según sea un valencia mas cercano a 0° o 60°, respectivamente. Si entramos en el código CSS, opinar que no es necesario usar el símbolo de cargo para el matiz. Podemos poner la emblema directamente.
Saturación / Saturation
La saturación nos indica el colorido o la pureza de un color. Si este valencia es del 100%, obtenemos el color más puro del matiz que tengamos. Si es un 0%, tendremos un tono ceniciento, es opinar, estamos desaturando el color.
Brillo / Lightness
El brillo, como su nombre indica, es el brillo del color. Un brillo del 0% es infausto, un brillo del 100% es blanco.
Ahora que sabemos esto, vamos a ponernos a prueba. Imaginemos que tenemos el próximo color en nuestro CSS:
.font {
color: hsl(201, 89%, 36%);
}El matiz es 201, por lo que estará entre el cyan (180°) y el celeste (240°). Podemos opinar que es un tono azulado. Su saturación es del 89%, por lo que es casi un color puro. Y su brillo es del 36%, por lo que será más anfibológico. Veamos que color es.
Creo que hemos poliedro en el clavo. Es tremendamente sencillo conocer con que color estamos trabajando simplemente sabiendo el significado de las tres variables del código HSL. Si queremos ir un paso más allá, podemos añadir una cuarta emblema para la transparencia, que como en RGBA, va desde el 0 al 1, siendo 0 completamente transparente, y 1 sin transparencia.
Con esto damos por concluida esta primera parte sobre códigos de color y HSL. Próximamente publicaremos otro artículo sobre como crear paletas y esquemas de color de forma sencilla e intuitiva con HSL, simplemente modificando ciertos títulos de sus variables. Algo tremendamente útil para, por ejemplo, modificar el color de un botón al hacer hover sobre él. Pero no adelantemos acontecimientos, ya que lo veremos todo de forma más detallada en ese artículo.
Como siempre, está a vuestra disposición los comentarios para que nos hagáis conservarse vuestras sugerencias dudas y experiencias sobre este tema. Seguro que muchos hace tiempo que estáis usando HSL en vuestros proyectos, y podéis compartir algunos trucos que hayáis descubierto.
[ad_2]
Alfonso Serrano
0 comentarios