Quin color és aquest?
Estàs començant a programar i no entens com donar-li el color que vols a un element a la pantalla? Clar, pots "googlar" o fer servir ChatGPT, però per què no entendre-ho?
Teoria dels colors ràpida
Sí, ho sé... has llegit teoria i gairebé tanques el navegador, però deixa-m'ho explicar molt simplement.
El model RGB (red, green, blue) o VVB (vermell, verd, blau) combina aquests tres colors per aconseguir-ne un de nou.
El sistema hexadecimal fa servir una escala de 0 a 15, on els darrers 6 valors estan representats per lletres: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15)).
El sistema HSL (to, saturació, lluminositat) o TSL (to, saturació, lluminositat) fa servir aquestes tres propietats dels colors per crear un color.
Com creo un color amb RGB?
Amb aquest model, hauràs de barrejar diferents quantitats de vermell, verd i blau.
Només necessites aprendre el format: rgb(vermell, verd, blau).
La quantitat de color va de 0 (negre) a 255 (màxim vermell, verd o blau).
RGB Tester
Acabes de veure gràficament el model RGB. Per a les pantalles, els colors PRIMARIS són VERMELL, VERD i BLAU. Per a la impressió, els colors PRIMARIS són Cian, Magenta, Yellow i blacK (model CMYK).
Per aconseguir cada un dels colors PRIMARIS per a PANTALLES, prova de donar el valor màxim (255) a un d'aquests colors, i deixa la resta en el valor mínim (0).
Per aconseguir cada un dels colors PRIMARIS per a IMPRESSIÓ, prova de donar el valor màxim (255) a dos d'aquests colors, i deixa l'altre en el valor mínim (0).
Si tornes a la imatge del model RGB, veuràs que en unir tots els colors primaris (valor 255), s'obté el color blanc, i si no en juntes cap (valor 0), s'obté el negre.
Et pots imaginar què passarà si barregem la mateixa quantitat de cadascun dels colors sense arribar al màxim (255) ni al mínim (0)?
Exactament! Si barregem la mateixa quantitat de tots, obtenim el color gris. Com més alt sigui el valor, més clar serà, i com més baix, més fosc.
Els colors TERCIARIS s'obtenen en barrejar un COLOR PRIMARI amb un COLOR SECUNDARI. Aquests són: AMBER, VERMILLON, MAGENTA, VIOLETA, TEAL i CHARTREUSE.
Anirem d'1 en 1. Per aconseguir el color AMBER, barreja 255 de vermell, 191 de verd, i 0 de blau.
Per aconseguir el color VERMILLON, barreja 227 de vermell, 66 de verd, i 52 de blau.
Per aconseguir el color MAGENTA, barreja 207 de vermell, 52 de verd, i 118 de blau.
Per aconseguir el color TEAL, barreja 0 de vermell, 127 de verd, i 127 de blau.
Per aconseguir el color VIOLETA, barreja 76 de vermell, 40 de verd, i 130 de blau.
Per aconseguir el color CHARTREUSE, barreja 127 de vermell, 255 de verd, i 0 de blau.
Com hauràs vist, algunes barreges per a terciaris són més fàcils que altres, ja que barregen el màxim d'un color (255) amb la meitat de l'altre (127).
Tot és qüestió de pràctica. Amb el temps, podràs trobar el color que busques en RGB, i si no, pots aprendre el sistema HEXADECIMAL!
Mostra color:
Hexa (16) són els valors d'aquest model: de 0 a la lletra F.
L'escala és 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, i les lletres representen els números 10, 11, 12, 13, 14, 15.
El format és: # + 6 números o 6 lletres (p. ex., #000000 representa el negre).
Hexa Tester
Acabes de veure gràficament el model RGB expressat amb notació hexadecimal. Pots tornar i copiar els colors de la imatge, però és millor entendre-ho.
Quan vegis un color en format "#000000", si has entès el model RGB, és el mateix escrit de manera diferent (#-00-00-00: cada parell de números o lletres representa la quantitat de VERMELL, VERD i BLAU).
Les quantitats de color en HEX es representen amb números i lletres: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15).
Per entendre bé el model i com funciona, cal entendre la seva fórmula... No et preocupis, no és complicada. Vegem un exemple amb el color VERMELL.
El color vermell en HEX és #FF0000. La quantitat de cada color és igual al primer valor multiplicat per 16 més el segon valor. Així, FF seria: F (15*16=240) + F (15). En RGB, FF seria 255 (el màxim).
No et preocupis si no ho has entès. No és necessari memoritzar la fórmula, només saber que el primer valor suma més a la quantitat perquè es multiplica per 16, mentre que el segon valor només es suma.
Els colors primaris de pantalla són fàcils d'intuir. T'atreveixes sense mirar la primera foto?
Genial! VERMELL: #FF0000, VERD: #00FF00 i BLAU: #0000FF.
El GROC és #FFFF00 (vermell i verd al màxim). El CIAN és #00FFFF (verd i blau al màxim). El MAGENTA és #FF00FF (vermell i blau al màxim).
El BLANC (#FFFFFF) i el NEGRE (#000000) són fàcils. Però i els grisos?
Si ho recordes, per als grisos, barregem la mateixa quantitat de tots els colors, així que segur que es repetiran els mateixos 2 números o lletres.
Per a un GRIS CLAR, podem fer servir #D0D0D0 (D és 13*16 i li sumem el segon valor 0). #D0D0D0 és el mateix que rgb(208,208,208).
Per a un GRIS FOSC, podem fer servir #5E5E5E, que és igual a 80 (5*16)+14 (E), és a dir, 94. rgb(94,94,94).
Recordes que dins dels 3 parells de números o lletres, és "mésimportant" el primer valor que el segon?
Vegem un exemple amb el BLAU (#0000FF): Prova de modificar-lo així: #0000F2. I després modifica'l així: #00002F. Quin ha canviat més?
Exactament! Ha canviat POC en tocar el segon valor, però MOLT al donar-li un primer valor molt baix (2), l'acostem més al color negre (l'obscurim).
Ara, diverteix-te experimentant! És qüestió de pràctica dominar completament el sistema HEX.
Mostra color:
HSL o TSL (To, Saturació, Lluminositat)
Aquest model fa servir aquestes tres propietats dels colors per crear un color.
El format és: HSL (número de color, saturació %, lluminositat %).
Per establir el número de color, imagina un cercle on el vermell està a 0º (número per a vermell: 0), el verd està a 120º (verd: 120), i el blau està a 240º (blau: 240).
HSL Tester
Mostra color: