Andreus Profile picture
May 4, 2021 12 tweets 6 min read Read on X
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 ❤️

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Andreus

Andreus Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @AndreusCafe

Jul 16, 2023
¿Alguna vez escuchaste sobre @churrosoft? Probablemente no. Y está bien, porque este sería nuestro primer lanzamiento.

Tras un año entero de electrónica, código, diseño, modelado 3D, impresión, testeo y churros, hoy te presentamos nuestra última invención.

El buen Deck-8.
Image
Image
El Deck-8 es un streamdeck (o macropad) bocetado, diseñado, modelado, electrónicamente diagramado, programáticamente firmwareado, tridimensionalmente impreso y artesanalmente ensamblado y empaquetado en la Ciudad de la Furia.


Image
Image
Image
Image
Pensado para streamers que quieren mejorar el control de su stream con hardware especializado pero no pueden permitirse los precios de las opciones importadas.

Nuestro deck es lowcost pero robusto, personalizable y FACHERO.
Image
Image
Read 19 tweets
Mar 24, 2019


Los comentarios de ese video me hacen llorar.

Aprendé a programar en tu casa, en youtube, google, stackoverflow, a tu ritmo; se autodidacta en el mundo del desarrollo. No pierdas MAS el tiempo en cumplir expectativas de profesores. (hilo de descargo)
Ninguna respuesta que cumpla el objetivo planteado está mal; sólo hay formas más o menos óptimas, y aprendiendo, tu deadline es la vida misma. No tenés que pretender empezar siendo un/a gurú del código porque jamás se termina de aprender acá. Siempre se puede mejorar.
Siempre puede haber más abstracción posible, o mejor sintaxis, o mejor gestión de recursos, o mejor metodología, o mejor lógica, o una más robusta, o una más rápida, o una más legible... No hay reglas de oro porque es un trabajo de CREATIVIDAD, y acá vos sos un/a artista.
Read 13 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(