Invatare Atomica

Culoarea digitala: modele RGB, CMYK si HSB, paleta si profilul de culoare; formate de fisier imagine

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum descrie calculatorul culoarea prin trei modele (RGB, CMYK, HSB), ce este o paleta si un profil de culoare, si cum alegi formatul de fisier potrivit (JPG, PNG, GIF, SVG, WEBP) in functie de situatie — ecran, tipar, portofoliu digital sau web.

Dupa aceasta lectie vei putea:

  • Sa explici modelele de culoare RGB, CMYK si HSB si sa spui cand se foloseste fiecare
  • Sa descrii ce este o paleta de culori si un profil de culoare (spatiu de culoare)
  • Sa compari compresia cu pierderi (lossy) si fara pierderi (lossless)
  • Sa enumeri caracteristicile formatelor JPG, PNG, GIF, SVG si WEBP
  • Sa alegi formatul potrivit pentru un proiect artistic: portofoliu online, tipar, logo, animatie

Incearca singur!

Provocare:

Ai terminat o ilustratie digitala pentru portofoliul tau. Vrei sa o trimiti profesorului (pentru tipar A3), sa o pui pe Instagram si sa o folosesti ca logo pe un site. Crezi ca acelasi fisier functioneaza in toate trei cazurile? Noteaza ce crezi si de ce.

💡 Ai nevoie de un indiciu?

Gandeste-te la doua lucruri diferite: calitatea culorii (ecranul lucreaza cu lumina, tiparul cu cerneala) si formatul fisierului (unele pastreaza transparenta, altele nu; unele sunt scalabile la orice marime, altele se pixeleaza).

Raspunsul scurt: nu, nu acelasi fisier. Vei sti exact de ce si ce sa alegi la finalul acestei lectii.

1

1. Modelul RGB — culoarea ecranului

RGB (Red, Green, Blue — rosu, verde, albastru) este modelul de culoare folosit de toate ecranele digitale: monitor, telefon, tableta, televizor. Fiecare pixel este format din trei surse minuscule de lumina (una rosie, una verde, una albastra) care se aprind cu intensitati diferite. Prin amestecare aditiva — adica adunarea luminilor — se obtin toate culorile posibile.
Valorile RGB

Fiecare canal (R, G, B) are o valoare de la 0 (stins) la 255 (maxim). Exemplu: RGB(255, 0, 0) = rosu pur; RGB(0, 255, 0) = verde pur; RGB(255, 255, 0) = galben (rosu + verde amestecate).

Notatie hexadecimala

In design web si aplicatii grafice, RGB se scrie si ca cod hex de 6 cifre: #RRGGBB. Exemplu: #FF0000 = rosu pur; #FFFFFF = alb (toate la maxim); #000000 = negru (toate stinse). Designerii grafici folosesc frecvent aceasta notatie pentru a asigura culorile exacte intr-un proiect.

Analogie sigura: lanterna de culori

Imagineaza-ti trei lanterne: una rosie, una verde, una albastra, proiectate pe acelasi perete alb. Acolo unde se suprapun toate trei la intensitate maxima, apare alb. Acolo unde niciuna nu lumineaza, ramane negru. Exact asa functioneaza pixelul de pe ecran — aduna lumini, nu amesteca vopsele.

Unde se foloseste RGB: orice continut destinat ecranului — ilustratii digitale, fotografie, design UI/UX, prezentari, portofoliu online.
2

2. Modelul CMYK — culoarea tiparului

CMYK (Cyan, Magenta, Yellow, Key/Black — cian, magenta, galben, negru) este modelul de culoare al tiparului profesional. In loc sa adauge lumina, cernelurile absorb anumite lungimi de unda reflectate de hartia alba — acesta se numeste amestec substractiv. K (negrul) este adaugat separat deoarece amestecul pur CMY produce un maro murdar, nu un negru profund.
Valorile CMYK

Fiecare canal are o valoare intre 0% si 100%. Exemplu: C:0 M:100 Y:100 K:0 = rosu; C:0 M:0 Y:0 K:100 = negru pur de cerneala. La imprimare profesionala (afise, cataloage de arta, carti), fisierele trebuie convertite in CMYK inainte de tipar.

Atentie: conversie RGB → CMYK

Gama CMYK (multimea culorilor reproducibile) este mai mica decat gama RGB. Unele culori luminoase de pe ecran (verde electric, albastru neon) nu pot fi reproduse identic prin cerneala — vor aparea mai saturate pe ecran decat pe hartie. De aceea, atunci cand lucrezi la un proiect pentru tipar, deschizi fisierul in modul CMYK din start, nu faci conversia in ultimul moment.

Unde se foloseste CMYK: afise, cataloage de expozitie, materiale publicitare tiparite, carti de vizita, plansei art-print.
3

3. Modelul HSB — culoarea intuitiva a artistului

HSB (Hue, Saturation, Brightness — nuanta, saturatie, luminozitate) este modelul de culoare cel mai intuitiv pentru artisti si designeri, pentru ca reflecta modul in care oamenii percep si descriu culoarea — nu in canale tehnice de lumina sau cerneala.
Cele trei componente HSB

H — Hue (nuanta): unghiul pe cercul cromatic, de la 0° la 360°. 0°/360° = rosu, 120° = verde, 240° = albastru, 60° = galben, 300° = magenta.

S — Saturation (saturatie): puritatea culorii, de la 0% (gri complet neutru) la 100% (culoarea cea mai intensa, fara alb/negru adaugat).

B — Brightness (luminozitate): cat de deschisa sau inchisa este culoarea, de la 0% (negru) la 100% (culoarea la maxima stralucire).

Cum il folosesti in practica

Vrei sa faci o culoare mai inchisa fara sa-i schimbi tonul? Scazi B. Vrei sa o faci mai stearsa, ca in tehnicile acuarela spalata? Scazi S. Vrei sa treci de la rosu la portocaliu? Muti H de la 0° catre 30°. Selectorul de culoare din Photoshop, GIMP sau Illustrator afiseaza HSB alaturi de RGB tocmai pentru ca e mai natural sa gandesti in nuante si saturatii decat in valori R/G/B separate.

Analogie sigura: paleta pictorului

Cand un pictor spune „vreau un albastru mai palid", el nu gandeste „mai mult rosu si mai mult verde in amestec". El gandeste in nuanta (albastru), puritate (mai putina culoare pura, mai multa apa/alb) si luminozitate. Modelul HSB transpune exact aceasta logica in cifre digitale.

4

4. Paleta de culori si profilul de culoare

In grafica digitala, paleta de culori si profilul de culoare sunt doua concepte distincte, adesea confundate.
Paleta de culori

O paleta este un set selectat de culori folosit intr-un proiect sau document grafic. Poate fi:

  • Paleta limitata (indexata): imaginea foloseste un numar fix de culori (ex. maxim 256), ca in formatul GIF. Reduce dimensiunea fisierului, dar limiteaza fidelitatea culorii.
  • Paleta de brand: setul de culori definite pentru o identitate vizuala (ex. culorile unui logo, ale unui pliant de expozitie).
  • Paleta din aplicatia grafica: setul de culori salvate in Photoshop/GIMP cu care lucrezi intr-un proiect specific.
Profilul de culoare (spatiul de culoare)

Un profil de culoare (ICC profile) este o specificatie tehnica care defineste exact ce culori reale corespund valorilor numerice dintr-un fisier de imagine. Cel mai comun este sRGB — standardul web si al majoritatii monitoarelor si camerelor foto. Adobe RGB acopera o gama mai larga de culori (in special verzi saturati), ideal pentru fotografie profesionala si pretiparire.

De ce conteaza: daca exporti o ilustratie pentru web fara profil sRGB incorporat, unele browsere o pot afisa cu culorile decolorate sau saturate excesiv. Daca trimiti un fisier la tipar fara profilul CMYK corect al tiparnitei, culorile tiparite pot fi total diferite de ce ai vazut pe ecran.

Regula practica pentru elevi de Arte

Web si ecran → salveaza cu profil sRGB. Tipar profesional → converteste in CMYK si cere tipografiei profilul lor ICC. Fotografie avansata/retusare → lucreaza in Adobe RGB, converteste la export.

5

5. Formate de fisier imagine si compresia

Orice imagine digitala trebuie salvata intr-un format de fisier care decide: cat spatiu ocupa, cat din calitate se pastreaza, daca suporta transparenta, si daca poate fi deschisa pe orice dispozitiv. Exista doua tipuri de compresie:
Compresie cu pierderi (lossy)

Algoritmul arunca definitiv o parte din informatia de culoare considerata mai putin vizibila, reducand mult dimensiunea fisierului. Calitatea scade ireversibil — cu fiecare resalvare pierde mai mult. Exemple: JPG/JPEG, WEBP lossy.

Compresie fara pierderi (lossless)

Algoritmul comprima datele fara a arunca nimic — imaginea se poate decompresa perfect, identica cu originalul. Fisierul e mai mare decat lossy, dar calitatea ramane intacta. Exemple: PNG, GIF, WEBP lossless, TIFF.

Mai jos, un tabel comparativ al celor mai folosite formate:
JPG / JPEG — Joint Photographic Experts Group

Compresie: lossy (cu pierderi). Culori: milioane (24-bit). Transparenta: NU. Animatie: NU.
Ideal pentru: fotografii, ilustratii cu gradiente fine, continut web cu fotografii. Reducere semnificativa a dimensiunii fisierului (o fotografie de 10 MB poate deveni 500 KB la calitate buna).
Evita la: logo-uri cu margini nete (apar artefacte de compresie), imagini care necesita transparenta, imagini resalvate frecvent.

PNG — Portable Network Graphics

Compresie: lossless (fara pierderi). Culori: milioane (24-bit sau 32-bit cu canal alpha). Transparenta: DA (canal alpha, 256 niveluri). Animatie: NU (exista APNG, dar rar).
Ideal pentru: logo-uri, ilustratii cu zone transparente, capturi de ecran, orice imagine care trebuie sa fie neta la margini si fara artefacte.
Dezavantaj: fisiere mai mari decat JPG pentru fotografii.

GIF — Graphics Interchange Format

Compresie: lossless, dar paleta limitata. Culori: maxim 256 (8-bit indexat). Transparenta: DA (binara: un pixel e fie transparent, fie nu — fara semitransparenta). Animatie: DA (cadre succesive).
Ideal pentru: animatii simple (butoane animate, ilustratii animate pentru social media), pictograme cu putine culori.
Evita la: fotografii (256 culori produc benzi vizibile, posterizare), continut care necesita semitransparenta neteda.

SVG — Scalable Vector Graphics

Compresie: nu e raster — e un fisier text XML ce descrie forme matematice. Culori: nelimitat. Transparenta: DA. Animatie: DA (prin CSS/SMIL).
Ideal pentru: logo-uri, iconite, ilustratii vectoriale — se scaleza la orice dimensiune fara pierdere de calitate (de la favicon 16x16 la banner 10 m).
Evita la: fotografii sau ilustratii raster complexe (nu e formatul potrivit).

WEBP — Web Picture format (Google)

Compresie: lossy SAU lossless (la alegere). Culori: milioane. Transparenta: DA. Animatie: DA.
Ideal pentru: web modern — inlocuieste JPG si PNG cu fisiere cu 25-35% mai mici la aceeasi calitate vizuala. Suportat de toate browserele moderne.
Dezavantaj: nu toti clientii de email sau aplicatiile mai vechi il suporta.

6

6. Cum alegi formatul potrivit — ghid practic

Nu exista un format „cel mai bun" in absolut — fiecare are locul lui. Intrebarea corecta este: unde va fi folosita imaginea si ce trebuie sa faca?
Fotografie sau ilustratie cu gradiente fine, pentru web

Alege JPG (calitate 80-90% e de obicei suficienta) sau WEBP (mai mic, aceeasi calitate). Evita PNG — fisierele vor fi inutilutil de mari pentru fotografii.

Ilustratie digitala sau grafica cu transparenta, pentru web sau prezentare

Alege PNG daca ai nevoie de transparenta neteda (canal alpha) sau margini nete. Alege WEBP pentru o varianta mai mica cu aceleasi avantaje.

Logo, iconita, diagrama — pentru web

Alege SVG: arata perfect la orice marime, fisierul e mic, accepta transparenta si poate fi animat prin CSS.

Animatie simpla sau sticker

Alege GIF pentru compatibilitate universala (email, forumuri vechi, Messenger). Alege WEBP animat sau video MP4 scurt pentru web modern — calitate mai buna, fisier mai mic.

Imagine pentru tipar (afis, pliant, plansa)

Lucreaza in TIFF (lossless, 300 DPI) sau formatul nativ al aplicatiei (PSD, AI). Exporta in PDF pentru tipografie sau in TIFF/JPG maxim daca tipografia cere raster. Asigura-te ca fisierul e in modul CMYK, nu RGB.

Portofoliu digital online

Fotografii de lucrari → JPG (calitate 85%, profil sRGB). Ilustratii digitale cu transparenta → PNG sau WEBP. Logo personal → SVG. Regula de aur: optimizeaza pentru incarcare rapida fara a sacrifica vizibil calitatea.

7

7. Recapitulare — Culoarea si formatele la un loc

In aceasta lectie ai parcurs doua mari teme interconectate: cum descrie calculatorul culoarea si cum se stocheaza imaginile. Iata esentialul intr-o privire:
Modele de culoare

RGB — amestecare aditiva de lumina (ecran); valori 0-255 per canal; notatie hex.
CMYK — amestecare substractiva de cerneala (tipar); valori 0-100% per canal; gama mai mica decat RGB.
HSB — nuanta (0-360°), saturatie (0-100%), luminozitate (0-100%); cel mai intuitiv pentru artisti.

Paleta si profil

Paleta = setul de culori dintr-un proiect sau fisier (indexata la GIF: max 256 culori; libera la PNG/JPG).
Profil de culoare = specificatia tehnica (sRGB pentru web; Adobe RGB pentru foto profesional; CMYK pentru tipar) care asigura ca valorile numerice produc aceleasi culori reale pe orice dispozitiv calibrat.

Formate — tabel rapid

JPG: lossy, fara transparenta, fotografii web.
PNG: lossless, transparenta alpha, ilustratii/logo raster.
GIF: lossless + 256 culori + animatie, compatibilitate universala.
SVG: vector XML, scalabil infinit, web/logo.
WEBP: lossy sau lossless, transparent, animat, mai mic — web modern.

Regula de aur

Inainte de a exporta orice imagine, raspunde la trei intrebari: 1) Unde ajunge? (ecran sau tipar) → alege RGB sau CMYK. 2) Are nevoie de transparenta? → PNG/SVG/WEBP, nu JPG. 3) Cat de mica trebuie sa fie? → JPG/WEBP lossy pentru fotografii, PNG pentru vectori/logouri raster.

Exercitii practice

Exercitiul 1 (Nivel minim) — Sortare formate

Ai urmatoarele situatii: a) o fotografie a unui tablou pentru Instagram, b) un logo cu fundal transparent pentru site, c) o animatie simpla de sticker pentru Messenger, d) un afis A2 pentru tipar la tipografie. Asociaza fiecare situatie cu formatul cel mai potrivit din lista: JPG, PNG, GIF, SVG, PDF/TIFF. Justifica in 1-2 propozitii pentru fiecare.

Exercitiul 2 (Nivel standard) — RGB vs CMYK in practica

Ai un poster digital creat in RGB cu o culoare turcoaz stralucitoare RGB(0, 200, 210). Explica ce se intampla cand il trimiti la tipar fara sa convertesti in CMYK. De ce culorile de pe ecran si de pe hartie vor fi diferite? Ce pasi ar trebui sa urmezi pentru a livra un fisier corect pentru tipar?

Exercitiul 3 (Nivel performanta) — Proiect portofoliu complet

Esti un artist vizual care pregateste un portofoliu digital pentru o aplicatie la un liceu de arte din strainatate. Portofoliul va contine: 5 fotografii ale lucrarilor tale, 2 ilustratii vectoriale (logo si o lucrare digitala), si o animatie scurta de prezentare. Descrie pentru fiecare categorie: modelul de culoare ales (RGB sau CMYK), profilul de culoare, formatul de fisier si motivul alegerii. Calculeaza aproximativ care va fi dimensiunea totala a portofoliului daca fotografiile sunt 4000x3000px la 72 DPI in JPG calitate 85% (aprox. 2-4 MB/fotografie).

Ce ai invatat astazi

  • RGB = amestec aditiv de lumina (ecran); 0-255 per canal; notatie hex #RRGGBB
  • CMYK = amestec substractiv de cerneala (tipar); 0-100% per canal; gama mai mica decat RGB
  • HSB = Hue (nuanta 0-360°), Saturation (puritate 0-100%), Brightness (luminozitate 0-100%) — intuitiv pentru artisti
  • Paleta = setul de culori al unui proiect; profilul ICC (sRGB, Adobe RGB, CMYK) = specificatia de reproducere corecta a culorii
  • Compresie lossy (JPG, WEBP) = calitate redusa, fisier mic; lossless (PNG, GIF) = calitate intacta, fisier mai mare
  • JPG: fotografii web | PNG: transparenta, margini nete | GIF: animatii simple, 256 culori | SVG: vectori scalabili | WEBP: web modern, toate avantajele
  • Regula de aur: verifica destinatia (ecran/tipar), transparenta si dimensiunea fisierului inainte de export

Ai terminat modulul!

Ai parcurs ambele lectii din Introducere in Grafica Digitala: imaginea raster vs vectoriala si acum culorile si formatele. Poti reveni la modulul pentru a recapitula sau a trece la urmatorul modul.

Inapoi la modul →