Lecția 03 · Culoarea¶

Roata cromatică¶

Roata cromatică așază culorile în ordinea în care se amestecă. Din ea se citesc toate schemele de culoare.

                    ROȘU
         ROȘU-VIOLET    ROȘU-PORTOCALIU
    VIOLET                        PORTOCALIU
 ALBASTRU-VIOLET              GALBEN-PORTOCALIU
    ALBASTRU                       GALBEN
         ALBASTRU-VERDE   GALBEN-VERDE
                    VERDE

Culori calde (roșu → galben): avansează spre privitor, energie, urgență, apetit. Culori reci (verde → violet): se retrag, calm, încredere, profesionalism, tehnologie.

Schemele de culoare¶

HEX, RGB, HSL¶

Aceeași culoare, trei moduri de a o scrie.

HEX — pentru copiat¶

#F97316 — șase caractere hexazecimale: două pentru roșu, două pentru verde, două pentru albastru, fiecare de la 00 la FF (0–255).

#F9 73 16
 │  │  │
 │  │  └── albastru: 0x16 = 22
 │  └───── verde:    0x73 = 115
 └──────── roșu:     0xF9 = 249

Este formatul pe care îl copiezi între Figma, CSS și Canva. Nu e util pentru gândit.

RGB — cum funcționează ecranul¶

rgb(249, 115, 22) — aceeași culoare. Ecranele adună lumină: roșu + verde + albastru la maximum dau alb. Se numește sinteză aditivă.

Varianta cu transparență: rgba(249, 115, 22, 0.5) — ultimul număr e opacitatea, de la 0 (invizibil) la 1 (opac).

HSL — pentru gândit¶

hsl(25, 95%, 53%) — trei valori care corespund modului în care oamenii vorbesc despre culoare:

În Figma, la selectorul de culoare, butonul cu trei puncte îți permite să comuți între HEX, RGB, HSL și CSS.

RGB vs. CMYK¶

Aceasta e diferența care strică cele mai multe afișe tipărite.

Regula 60-30-10¶

O paletă echilibrată distribuie culorile în proporții inegale:

• 60% — culoarea dominantă. De obicei un neutru: alb, gri foarte deschis, sau un gri foarte închis. Este fundalul.
• 30% — culoarea secundară. Susține structura: carduri, bare, secțiuni.
• 10% — culoarea de accent. Doar pentru ce trebuie apăsat sau observat: butonul principal, un badge, o cifră importantă.

Structura unei palete complete¶

Pentru un proiect serios ai nevoie de mai mult decât trei culori:

Contrastul și accesibilitatea¶

Aproximativ 1 din 12 bărbați și 1 din 200 de femei au o formă de daltonism. Mult mai mulți citesc pe telefon, în soare, pe un ecran ieftin. Contrastul nu este o opțiune estetică.

Raportul de contrast¶

Se măsoară ca raport între luminozitatea textului și cea a fundalului, de la 1:1 (identice) la 21:1 (negru pe alb). Standardul WCAG cere:

Cum verifici¶

• În Figma: pluginul gratuit Contrast sau Stark. Selectezi textul și îți arată raportul instant.
• În browser: WebAIM Contrast Checker — pui cele două coduri HEX și îți dă verdictul.

Culoarea nu poate fi singura informație¶

Dacă într-un grafic linia „vândut” e verde și „nevândut” e roșie, un daltonist vede două linii identice. Adaugă întotdeauna un al doilea semnal: o etichetă, o formă diferită, o linie punctată, o pictogramă.

Cum construiești o paletă în Figma¶

1. Alege culoarea primară. Nu o inventa din senin — pornește de la ceva: culorile școlii, o fotografie care îți place, un logo existent.
2. Deschide coolors.co, fixează culoarea primară (tasta space generează variante) și alege încă 2–4 care merg cu ea.
3. Generează neutrele: ia primara, du saturația la 5–10% și variază luminozitatea de la 98% la 10%. Vei avea griuri care „au” culoarea ta, nu griuri moarte.
4. Verifică fiecare pereche text/fundal cu pluginul Contrast.
5. Salvează-le ca stiluri în Figma: selectezi un element cu acea culoare, în panoul din dreapta la Fill apeși pe cele patru puncte → + → dai un nume.

Cum numești culorile¶

Slash-ul din nume creează automat foldere în panoul de stiluri din Figma.

Psihologia culorii, pe scurt și cu rezerve¶

Asocierile sunt reale, dar culturale și contextuale, nu universale.

Exerciții¶

Exercițiu 1 — Aceeași culoare în trei sisteme¶

Ia culoarea #2563EB și scrie-o în RGB și HSL. Apoi creează o variantă cu 15% mai închisă, folosind HSL.

Exercițiu 2 — Paletă 60-30-10¶

Construiește o paletă pentru un afiș al cercului de informatică: o primară, patru neutre și un accent. Aplic-o pe un frame A4 în proporțiile 60-30-10.

Exercițiu 3 — Repară trei combinații¶

Următoarele perechi cad testul de contrast. Corectează fiecare, păstrând nuanța (H) neschimbată.

1. Text #FFD700 pe fundal #FFFFFF
2. Text #FFFFFF pe fundal #FB923C
3. Text #9CA3AF pe fundal #F3F4F6

Mini-proiect: același afiș, trei palete¶

Ia mini-proiectul din lecția 02 (afișul „mișcare”) și fă trei variante identice ca formă, diferite doar prin paletă: una monocromatică, una complementară și una analogă. Verifică contrastul la fiecare.

Rezumat¶

• Roata cromatică dă schemele: monocromatică, analogă, complementară, triadică, split-complementară.
• HEX pentru copiat, RGB pentru ecran, HSL pentru gândit și pentru generat variante.
• RGB pe ecran, CMYK la tipar. Saturațiile mari nu se tipăresc.
• 60-30-10: dominant neutru, secundar de structură, accent rar.
• Nu folosi #000000 pe #FFFFFF — obosește ochiul.
• Contrast minim 4.5:1 pentru text normal, 3:1 pentru text mare (WCAG AA).
• Culoarea nu poate fi singura informație — adaugă etichetă, formă sau pictogramă.
• Numește stilurile după rol (brand/primary), nu după aspect (Portocaliu).
• Testul alb-negru îți spune dacă designul rezistă fără culoare.

Pasul următor: → Lecția 04: Tipografia