El sistema de numeración hexadecimal es muy común en computación, y en CSS se lo utiliza para construir códigos de colores.
Por ejemplo, un color naranja sería #FF8800, mientras un violeta estaría cerca de #AA66FF.
Pero... ¿Cómo funciona eso?
Bueno, veamos... 🎨
Primero lo primero. “Hexadecimal” no es un término que escuchemos mucho fuera de estas ñoñadas de programación.
En el día a día utilizamos el sistema decimal, con sus 10 dígitos que van del 0 al 9. El sistema hexadecimal, en cambio, tiene 16 dígitos que van de 0 a F.
En decimal, sabemos que luego del 9 viene el 10, y luego del 19 viene el 20. Y así, se suma un número a la izquierda y sigue.
En Hexa, en cambio, al llegar al 9, continuamos con A, B, C, D, E y F, para cumplir con los 16 dígitos. ¿Y luego de F?
Pues lo mismo. 🤷♂️
Ahora, antes de ver cómo se construyen los colores, hay un temita que está bueno ver sobre cómo estos funcionan en nuestras pantallas.
¿Escuchaste alguna vez mencionar las siglas RGB y CYMK?
Bueno...
css-tricks.com/nerds-guide-co…
En un burdísimo resúmen, te cuento que ambas son modos de mezclar colores. Lo llamado "Color Mixing".
Nuestros monitores, compuestos por pixeles que emiten luces rojas, verdes y azules (RGB), pueden sumar sus intensidades para componer todos los colores que podemos ver.
Entonces ahí es donde entra hexa. ¿Cuánta intensidad de cada color vamos a usar? ¿Cuán fuerte será la luz roja? ¿Y la verde y azul?
Utilizamos un conjunto de tres valores hexa, de uno o dos dígitos de precisión (#RGB o #RRGGBB), para determinar la intensidad de cada color.
De esta manera, nuestra placa de video sabrá con cuánta intensidad encender cada color de ese diminuto pixel, que junto a los demás formarán la imagen que veremos finalmente.
Muy loco, ¿no? Con los tres al máximo se consigue un blanco, y con los tres en 0 se consigue un negro.
De hecho, si miras muy de cerca tu pantalla o TV, o con una lupa a tu celular, vas a poder ver que no es joda, físicamente se trata de grupitos de 3 luces RGB más o menos prendidas.
Aún me vuela la cabeza pensar cómo esos tres pueden formar millones de colores.
Así que, ¡genial!
Ahora que sabes cómo funcionan los colores hexadecimales, podes olvidarte de todo lo que te conté ya que en el día a día nadie los escribe a mano sino que se utilizan color-pickers y se copipastea el código en tu CSS :)
(Curiosidad: Entiendo que es muy común que las imprentas trabajen en CYMK, por lo que te dejo una linda lectura sobre sus diferencias con RGB) 💖
stampaprint.net/es/blog/acerca…
Btw, hay gente que puede interpretar el color sólo leyendo el hexa. 🤯
Así que a ver si prestaste atención: sin abrir un color picker ni leer los comentarios ¿qué color imaginas que formaría esto?
1.
🔴AA 🟢33 🔵FF
¿Y este otro?
2.
🔴66 🟢EE 🔵CC
RT a ver qué dicen.
Agrego esto: la cuenta @color_parrot es un bot que sube colores con sus nombres y hexas. Síganlo para ver colores seguido en sus feeds ❤️
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.