Com genera colors l'ordinador: RGB, HEX i números binaris
#FF0000. #00FF00. #0000FF. És una notació que haureu vist algun cop en maquetes de disseny o en codi. Sembla un xifrat, o potser un codi de joc. En realitat és el nom d’un color.
De dalt a baix: vermell, verd, blau. Així és com l’ordinador anomena els colors. A continuació expliquem d’on ve aquesta notació.
RGB — les tres lletres que creen el color
Red, Green, Blue. Els tres colors primaris de la llum. Combinant-los en diferents proporcions s’obtenen tots els colors que veiem.
RGB és a tot arreu, cada dia
On hi ha una pantalla, gairebé sempre hi ha RGB.
- Monitor / televisió — cada píxel està format per tres punts: vermell, verd i blau
- Pantalla de mòbil — mateixa estructura, píxels més petits
- LED de teclat gaming — tres LEDs R·G·B per cada tecla
- Il·luminació de torre de PC — les tires RGB són exactament això, senyals RGB
Si amplieu prou una pantalla, ho veureu clarament: vermell, verd, blau. Res més. Milions de petits punts RGB reunits formen la imatge que veieu.
El color es crea barrejant
Cada canal RGB té una intensitat de 0 a 255.
RGB(255, 0, 0)— només vermell al màxim → vermell purRGB(0, 255, 0)— només verd al màxim → verd purRGB(255, 255, 0)— vermell + verd → grocRGB(0, 0, 0)— tot apagat → negreRGB(255, 255, 255)— tot al màxim → blanc
Pot semblar contraintuïtiu que vermell i verd formin groc, però això és síntesi additiva de llum. És diferent de barrejar pintures com a classe d’art (vermell + verd = marró). La llum es torna més brillant en combinar-se i suma blanc quan es barregen tots els colors.
Moveu els tres controls lliscants per comprovar-ho vosaltres mateixos.
El número de 8 dígits que apareix a la dreta és la representació binària d’aquell canal. En moure el control lliscant, el número també canvia. El tema següent és com s’expressen 256 valors amb només zeros i uns.
Per què exactament de 0 a 255?
L’ordinador només treballa amb 0 i 1. Cada posició que conté un 0 o un 1 s’anomena bit. Cada bit que s’afegeix dobla el nombre de valors possibles.
8 bits = 1 byte. Un color té tres canals RGB, la qual cosa suma 3 bytes = 24 bits. 24 bits permeten representar aproximadament 16,7 milions de colors — suficients per a l’ull humà, per això 1 byte es va convertir en l’estàndard per canal.
Llegir binari directament
Cada posició té un valor fix. D’esquerra a dreta: 128, 64, 32, 16, 8, 4, 2, 1 — potències de 2.
Sumant els valors de les posicions amb un 1 s’obté el número decimal.
Per això el valor màxim de 8 bits és 255. És la raó exacta per la qual el rang de cada canal RGB va de 0 a 255.
HEX — el mateix número, més curt
RGB(255, 255, 255). Són 16 caràcters. Massa llarg per escriure en cada línia de CSS o en cada camp d’una eina de disseny. Per això sorgeix una forma d’escriure el mateix número de manera més compacta.
Què és l’hexadecimal
El sistema hexadecimal representa valors de 0 a 15 amb un sol caràcter. Però els dígits que fem servir habitualment només arriben del 0 al 9, deu en total. Els sis restants es treuen prestats de l’alfabet.
Les regles són tres:
- 0–9 s’utilitzen igual que sempre
- A partir del 10 comença la A
- F és el valor màxim d’un sol caràcter (= 15)
Per què hexadecimal?
4 dígits binaris (0000 ~ 1111) representen exactament 16 valors.
4 dígits binaris = 1 caràcter hexadecimal. Quatre dígits es comprimen en un. Com que un canal RGB té 8 bits, encaixa perfectament en dos caràcters hexadecimals.
Com convertir RGB a HEX
Convertirem RGB(255, 87, 51).
Els 14 caràcters es converteixen en 7 caràcters.
Endevinar el color llegint HEX
Al revés, mirant un codi HEX podeu intuir de quin color es tracta.
#FF5733— R màxim (FF), G mig (57), B baix (33) → taronja amb molt de vermell#3576E0— R baix (35), G mig (76), B alt (E0) → blau amb toc violeta#29A85A— R baix (29), G alt (A8), B baix (5A) → verd fresc
Si identifiqueu els tres parells, ja podeu distingir si alguna cosa és “taronjosa o blavosa”, la qual cosa permet que dissenyadors i desenvolupadors parlin el mateix idioma.
Resum en una línia
- RGB — tres canals: vermell, verd, blau; cadascun de 0 a 255
- Binari 8 bits — la raó per la qual un canal expressa 256 valors
- HEX — la mateixa xifra escrita en dos caràcters, de forma compacta
Quan aquestes tres idees es connecten, el codi de color deixa de ser un jeroglífic. Els tres números de RGB són exactament els sis caràcters de HEX.
El pas següent és convertir aquests nombres en el llenguatge del dissenyador. Peticions com «una mica més clar», «menys saturat» o «el mateix resultat en paper» són difícils de resoldre amb RGB i HEX sols. Com HSL, CMYK i OKLCH resolen això continua a El RGB no és suficient: les notacions de color HSL, CMYK i OKLCH.