Culorile sunt primul lucru pe care îl observă un vizitator și primul pe care îl greșesc site-urile făcute în grabă. Vestea bună: nu ai nevoie de talent artistic, ci de trei-patru reguli aplicate consecvent.
Pasul 1: pornește de la o culoare de brand
Dacă ai un logo, culoarea principală există deja. Dacă nu ai, alege una care se potrivește domeniului și, mai important, care te diferențiază de concurenți. Într-o piață în care toți folosesc albastru, verdele sau portocaliul te face memorabil.
Orientări generale, valabile în cultura vizuală locală:
- Albastru — încredere, stabilitate; folosit masiv în IT, finanțe, medical.
- Verde — sănătate, natural, creștere; agricultură, wellness, eco.
- Portocaliu / galben — energie, accesibil, prietenos; HoReCa, retail, servicii.
- Negru / gri închis — premium, sobru; arhitectură, avocatură, lux.
- Roșu — urgență, apetit; fast-food, promoții, dar obosește dacă e folosit în exces.
Pasul 2: aplică regula 60-30-10
Cea mai simplă rețetă de echilibru:
- 60% — culoare dominantă, aproape întotdeauna neutră (alb, gri foarte deschis). Fundalul paginii.
- 30% — culoare secundară: secțiuni, carduri, footer.
- 10% — culoare de accent, folosită doar pentru butoane și linkuri importante.
Greșeala clasică este să folosești culoarea de accent pentru tot. Dacă totul este colorat, nimic nu iese în evidență, iar butonul principal se pierde.
Pasul 3: verifică contrastul (nu e opțional)
Textul trebuie să fie citibil pe telefon, în soare, de către oameni cu vedere slabă. Standardul WCAG cere un raport de contrast de minimum:
- 4,5:1 pentru text normal;
- 3:1 pentru text mare (peste 24px) și pentru elemente grafice importante.
Cazuri clasice de eșec: gri deschis pe alb, alb pe galben, text pe imagine fără suprapunere întunecată. Verifică fiecare combinație cu un verificator de contrast înainte să o folosești; durează un minut și îți scutește reproiectarea.
Pasul 4: definește culorile funcționale
Pe lângă brand, un site are nevoie de culori cu semnificație clară:
- Verde pentru succes („Mesaj trimis").
- Roșu pentru erori („Completează telefonul").
- Galben / portocaliu pentru avertismente.
- Gri pentru elemente inactive.
Nu folosi roșul de brand pentru erori dacă roșul este culoarea ta principală — mesajele de eroare devin invizibile.
Pasul 5: notează paleta și folosește-o consecvent
Scrie codurile hex într-un document sau, mai bine, ca variabile CSS:
:root {
--brand: #2563eb;
--brand-dark: #1d4ed8;
--text: #111827;
--muted: #6b7280;
--bg: #f9fafb;
--success: #16a34a;
--error: #dc2626;
}Astfel, când vrei să schimbi nuanța de brand, o schimbi într-un singur loc, iar site-ul rămâne coerent.
Greșeli frecvente
- Prea multe culori — mai mult de trei culori de brand fac site-ul să pară neterminat.
- Gradienturi peste tot — un gradient bine plasat ajută; cinci obosesc.
- Culori luate din logo-ul tipărit fără ajustare pentru ecran (CMYK vs RGB).
- Text pe fotografii fără strat de contrast dedesubt.
- Buton principal și secundar identice — vizitatorul nu mai știe ce se așteaptă de la el.
Test rapid: fă un screenshot al paginii și transformă-l în alb-negru. Dacă butonul principal nu se mai distinge, contrastul se sprijinea doar pe culoare — și trebuie corectat.
Și modul întunecat?
Nu este obligatoriu pentru un site de prezentare. Dacă îl faci, nu inversa doar culorile: fundalul închis ideal nu este negru pur (#000), ci un gri foarte închis, iar textul nu este alb pur. Altfel obții o pagină care obosește ochii.
Concluzie
O paletă profesionistă are o culoare de brand, două neutre și una de accent, folosite după regula 60-30-10 și verificate la contrast. Combină asta cu o alegere bună de fonturi și site-ul arată deja mai serios decât 80% din concurență.
