Capitol gratuit

Teoria culorilor și psihologia vizuală

Culoarea este cel mai puternic element vizual din arsenalul unui designer. Alegerile cromatice influențează emoțiile, percepția brandului și deciziile util...

Introducere

Culoarea este cel mai puternic element vizual din arsenalul unui designer. Alegerile cromatice influențează emoțiile, percepția brandului și deciziile utilizatorilor. Acest capitol explorează teoria culorilor, armonia cromatică și aplicarea practică în design.

Roata culorilor

Roata culorilor (color wheel), dezvoltată inițial de Isaac Newton, organizează culorile într-un cerc care arată relațiile dintre ele:

Clasificarea culorilor

  • Culori primare - Roșu, Galben, Albastru (RYB) sau Roșu, Verde, Albastru (RGB)
  • Culori secundare - Obținute prin amestecul a două primare (portocaliu, verde, violet)
  • Culori terțiare - Amestec de primară + secundară (roșu-portocaliu, galben-verde etc.)

Armonii cromatice

Armoniile cromatice sunt combinații de culori care funcționează bine împreună. Folosiți aceste scheme ca punct de plecare în proiectele dvs.:

Armonie Definiție Efect Utilizare
Complementare Culori opuse pe roată Contrast puternic, dinamic CTA-uri, accente, sport
Analogice Culori vecine pe roată Armonios, calm Natură, wellness, organic
Triadice 3 culori echidistante Vibrant, echilibrat Jucării, copii, creative
Split-complementare O culoare + cele 2 adiacente complementarei Contrast moderat Versatil, ușor de folosit
Monocromatice O singură nuanță, variații de saturație Elegant, sofisticat Minimal, corporate, lux

Psihologia culorilor

Fiecare culoare evocă emoții și asocieri diferite. Aceste asocieri variază cultural, dar există tendințe universale:

Roșu - Pasiune, urgență, energie, pericol. Folosit în: alimentație (McDonald's), reduceri, butoane de acțiune
Albastru - Încredere, profesionalism, calm, stabilitate. Folosit în: bănci, tech (Facebook, LinkedIn), corporații
Verde - Natură, sănătate, creștere, bani. Folosit în: eco-friendly, finanțe, sănătate, succes
Galben - Optimism, atenție, căldură, avertizare. Folosit în: semne de avertizare, oferte, creativitate
Portocaliu - Entuziasm, prietenie, accesibilitate. Folosit în: e-commerce, sport, divertisment
Violet - Lux, creativitate, mister, regalitate. Folosit în: cosmetice, premium, spiritual
Negru - Eleganță, putere, sofisticare, mister. Folosit în: modă de lux, tech premium, editorial
Alb - Puritate, simplitate, curățenie, spațiu. Folosit în: medical, minimal, Apple-style design

Contrastul și accesibilitatea

Contrastul de culoare nu este doar o alegere estetică - este o cerință de accesibilitate. Standardele WCAG 2.1 definesc rapoarte minime de contrast:

✓ Contrast suficient
Text normal: minim 4.5:1
Text mare (18px+): minim 3:1
Elemente UI: minim 3:1
Verificați cu Contrast Checker
✗ Contrast insuficient
Text gri deschis pe alb
Text colorat pe fundal colorat
Informații transmise doar prin culoare
Ignorarea daltonismului
💡 Instrumente de verificare: WebAIM Contrast Checker, Colour Contrast Analyser, pluginul Stark pentru Figma, și funcția „Proof Setup" din Photoshop pentru simularea daltonismului.

Crearea unei palete de culori

O paletă profesională conține de obicei 5-7 culori cu roluri bine definite:

Structura unei palete

  • Culoare principală (Primary) - Culoarea brandului, folosită cel mai des
  • Culoare secundară (Secondary) - Completează culoarea principală
  • Accent - Pentru CTA-uri și elemente care trebuie să iasă în evidență
  • Neutru deschis - Fundal, carduri, spații albe
  • Neutru închis - Text, headere, elemente de navigare
  • Succes/Eroare/Avertisment - Verde, roșu, galben pentru feedback

Instrumente pentru generarea paletelor

  • Coolors.co - Generator rapid de palete cu export în multiple formate
  • Adobe Color - Bazat pe roata culorilor, cu reguli de armonie
  • Realtime Colors - Previzualizare a paletei pe un layout real
  • Huemint - Generator de palete bazat pe AI
⚠️ Greșeală frecventă: Nu folosiți mai mult de 3-4 culori distincte într-un design. Prea multe culori creează haos vizual. Variați mai degrabă saturația și luminozitatea aceleiași culori.

Continuați cu restul cursului

Acesta este capitolul 2 din cele 20 ale cursului, cu 6 lecții din 122. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 90 €