Explicando el tono, la saturación y el brillo. Diario de viaje hacia el diseño #3
Foto de Greyson Joralemon en Unsplash
HSB significa matiz, saturación, brillo. Es un sistema de color, para elegir color. Se dice que este sistema es más amigable para los humanos a la hora de describir el color. En Wikipedia, el término se llama HSV (matiz, saturación, valor). Antes de escribir esta historia, la única forma que tengo de elegir el color es utilizando el sistema de color RGB. Lo sé por aprender CSS en desarrollo web. Pasemos a los detalles sobre el tono, la saturación y el brillo.
Matiz
El tono es el color que elegimos. Va de 0 a 360. Podemos visualizarlo como un círculo, ya que tiene 360°.
Rueda de colores HSB.
Si miramos de cerca la imagen de arriba, en realidad es una mezcla de colores rojo, verde y azul. Podemos considerarlo como color base. Como son 360 grados, eso significa que tenemos tres regiones para tres colores base.
Rojo = 0° (o 360°)Verde =120°Azul = 240°
Dado que el rojo es 0°. y un grado representa solo un color, eso significa que 1° ya NO es ese “rojo base”, aunque todavía se ve rojo a los ojos humanos, al menos a mis propios ojos. Pero en formato HEX, el “rojo base” es #FF0000, y el “rojo de un grado” es #FF0400. Eso será diferente a los “ojos” de la computadora, porque dentro de la computadora, todo se procesa en 1 y 0, lo que significa que el color son solo bits.
Entonces, cuando intento elegir qué color usar, puedo simplemente escribir un número y recordar ese color base, para imaginar en qué región de color estoy ahora (aunque debemos tener un selector de color en nuestra aplicación que pueda ayudarnos). ).
Es sólo un pensamiento/opinión (se agradece la crítica), tal vez un intermezzo. Puede omitirlo a “Saturación” de inmediato. Me gustaría visualizarlo de esta manera. digamos que el color base (R,G,B) es el “presidente”. Y el presidente lidera su nación de 120 grados de ancho. Los presidentes están en el centro de su nación, lo que significa que su “pueblo” está distribuido por todo el país (derecha e izquierda) de manera uniforme. Así, el “presidente R” lleva a “persona 300°” a “persona 60°”. Eso significa que el color 60° está en la región de R (en realidad es amarillo), pero el color 61° ya no es R. Pero como 60° (y también 180° y 300°) es una mezcla uniforme de los colores base, yo diría que esos colores tienen “doble ciudadanía”. Por ejemplo, el color 60° es amarillo, es una mezcla uniforme de las bases R y G o digamos que está en el borde entre R y G. En HEX, el valor es #FFFF00. En formato hexagonalel formato es (#RRGGBB), FF es como el valor máximo y 00 es el mínimo. Entonces, de acuerdo con esto hoja de trucos de colores180° y 300° son respectivamente cian (#00FFFF) y magenta (#FF00FF).
Saturación
La saturación es la riqueza del tono (color). Piensa en ello como cuánto color le pones a tu objeto. Es un número entre 0 y 100. Mientras que el tono se presenta con grados (°), en saturación podemos usar porcentaje (%). Por lo tanto, 0% es el color mínimo que se aplica, mientras que 100% es el máximo, lo que hace que el color se “sature”, de ahí que esté de acuerdo con el término.
Esto ilustra el efecto de la saturación con el valor de tono y brillo de los ejemplos uno y dos respectivamente (H:240, B:100) y (H:320, B:100).
Rango de saturación
Brillo
El brillo es la cantidad de luz que pones en el objeto. También es un número entre 0 y 100 y se escribe en porcentaje, como la saturación.
0% de brillo es negroindependientemente de cuánto sea el tono y la saturación. 100% de brillo es el color según el tono y la saturación, será blanco si la saturación es 0%.
Esto ilustra el efecto del brillo con el tono y el valor de saturación (H:0, S:100)
Visualización del efecto de brillo.
Cuando la bombilla está apagada (0% de brillo), el color se vuelve negro, pero cuando la bombilla está completamente encendida (100%), el color es visible, depende del tono y la saturación.