Psihologia culorilor pentru pagini de destinație cu conversie ridicată

Culoarea este primul lucru pe care îl procesează un vizitator — înainte de a citi un cuvânt din text. Comunică industria, credibilitatea și tonul în milisecunde. De asemenea, afectează direct dacă textul este lizibil, ceea ce afectează dacă oamenii rămân pe pagină.

Această postare explică cum funcționează sistemul de palete PAGEnza și de ce constrângerile pe care le impunem selecției de culori produc de fapt rezultate mai bune decât oferirea AI-ului libertate nelimitată.

Problema solicitării unui AI să „aleagă culori plăcute”

Dacă rugați un LLM să aleagă culori pentru un site web, veți obține coduri hex. Uneori arată bine împreună. Uneori nu. Modelul nu are o modalitate fiabilă de a evalua dacă culorile funcționează de fapt — dacă textul este lizibil, dacă paleta pare potrivită pentru industrie, dacă combinația este vizual coerentă, mai degrabă decât accidental potrivită.

Am văzut această problemă clar în testele timpurii. Generarea neconstrânsă de culori a produs palete care variau de la excelente la complet inutilizabile. Nu exista consistență.

Soluția a fost să scoatem selecția de culori din mâinile LLM-ului în totalitate și să construim un sistem algoritmic care garantează proprietăți specifice.

Sistemul de 4 culori

Fiecare site PAGEnza folosește exact patru culori numite:

ink — culoarea principală a textului. Întotdeauna închisă (contrast de luminanță ridicat față de fundaluri). Folosită pentru titluri, text de corp și elemente UI care trebuie citite.

bg1 — fundalul principal. De obicei, cea mai deschisă culoare din paletă. Folosită pentru fundalul paginii principale și secțiunile deschise.

bg2 — fundalul secundar. Creează varietate vizuală între secțiuni. Trebuie să aibă o temperatură de culoare diferită de bg1 — dacă bg1 este o cremă caldă, bg2 este un gri rece sau alb cu nuanță albastră.

accent — culoarea brandului. Folosită pentru butoane, linkuri, evidențieri și elemente decorative. De obicei, cea mai saturată culoare din paletă.

Această constrângere — patru roluri numite, nu coduri hex arbitrare — este ceea ce face să funcționeze sistemul de palete. AI-ul nu decide niciodată ce culoare merge unde; selectează doar ce paletă să folosească dintr-un set pre-auditat.

Cum sunt organizate paletele

Menținem peste 20 de grupuri de palete, fiecare construit în jurul unui arhetip:

• Îndrăzneț: contrast ridicat, accente saturate — tehnologie, SaaS, fintech
• Moale: estompat, desaturat — wellness, coaching, servicii creative
• Lux: fundaluri aproape negre cu accente metalice sau de bijuterii — servicii premium, retail de lux
• Pământiu: neutre calde cu accente de teracotă sau salvie — mâncare, sustenabilitate, meșteșuguri
• Închis: palete cu mod întunecat — dezvoltatori, agenții, jocuri
• Neutru: sigur, profesional — juridic, finanțe, sănătate

În cadrul fiecărui grup, există mai multe palete cu diferite temperaturi de culoare, niveluri de saturație și nuanțe de accent. Sistemul selectează un grup pe baza industriei și a arhetipului, apoi alege o paletă specifică din cadrul grupului.

Contrastul WCAG: constrângerea care îmbunătățește designul

WCAG AA necesită ca textul normal să aibă un raport de contrast de cel puțin 4,5:1 față de fundalul său. Textul mare necesită 3:1. Elementele interactive necesită 3:1 față de culorile adiacente.

Fiecare paletă din sistemul nostru este validată în raport cu aceste rapoarte înainte de a fi inclusă. În mod specific:

• ink trebuie să obțină un contrast ≥4,5:1 față de bg1, bg2 și orice suprafață unde apare textul
• accent trebuie să obțină un contrast ≥3,0:1 față de bg1 și bg2 (pentru utilizare ca fundaluri de butoane)
• Validarea folosește matematică reală a luminozității — L = 0,2126R + 0,7152G + 0,0722B după corecția gamma — nu aproximări

Efectul este că fiecare site generat este lizibil implicit. Dar există un beneficiu secundar: designurile cu contrast ridicat convertesc mai bine. Un buton care este clar vizibil primește mai multe clicuri decât unul care se contopește cu fundalul. Cerința de accesibilitate se dovedește a fi o cerință de conversie.

Contrastul temperaturii culorii între secțiuni

Un detaliu ușor de trecut cu vederea: bg1 și bg2 trebuie să aibă temperaturi de culoare contrastante. Dacă ambele fundaluri sunt calde, secțiunile alternante par monotone — pagina arată ca un bloc continuu, mai degrabă decât zone de conținut distincte.

Regula din sistemul nostru: dacă bg1 are o nuanță caldă (direcția portocaliu/galben sau un neutru cald precum crem), bg2 trebuie să fie rece (direcția albastru/gri). Dacă bg1 este un alb rece, bg2 poate fi un alb-crem cald.

Acesta este motivul pentru care secțiunile noastre par distincte chiar și fără separatoare grele sau umbre — schimbarea temperaturii fundalului creează o pauză vizuală clară.

Logică specifică industriei pentru culori

Anumite alegeri de culori sunt puternic codificate pe industrii. Vizitatorii au așteptări construite din ani de expunere la site-uri web dintr-o anumită categorie.

Sănătate și wellness: albastrul și verdele semnalează încredere și calm. Roșurile și portocaliile saturate par alarmante în acest context.

Juridic și finanțe: bleumarin închis, cărbune, griuri conservatoare. Accentele luminoase sunt acceptabile, dar trebuie să fie reținute. Paletele jucăușe subminează credibilitatea.

Alimentație și ospitalitate: tonurile calde — teracotă, ambră, crem — activează asocieri cu apetitul. Paletele clinice reci par greșite.

Tehnologie și SaaS: albastrul rămâne dominant, dar există mai multă varietate. Albastrul electric, indigo și chiar violet par orientate spre tehnologie. Fundalurile negre pure funcționează pentru instrumentele de dezvoltare.

Lux și premium: cheia este reținerea. Gamă limitată de culori, aproape negru sau bleumarin închis ca culori primare, accente aurii sau platină. Contrast ridicat, niciodată saturat.

Selecția arhetipului în Mandatul de Design mapează industria + tipul de afacere la grupul de palete corespunzător, astfel încât un antrenor de wellness să nu ajungă cu aceeași paletă ca un avocat, chiar dacă ambele sunt descrise ca fiind „profesionale”.

Ce pot schimba clienții

După generare, clienții își pot edita site-ul în Gutenberg. Selectorul de culori din editor afișează doar cele patru culori ale brandului — nimic altceva. Aceasta înseamnă:

• Pot schimba fundalurile secțiunilor între bg1, bg2 și suprafețe
• Pot schimba culorile butoanelor și linkurilor între accent și ink
• Nu pot introduce o a cincea culoare arbitrară care să strice paleta

Constrângerea este intenționată. Cea mai comună modalitate prin care clienții strică un site proiectat profesional este alegerea culorilor din roata completă a culorilor. Limitarea paletei la patru culori numite face acest lucru imposibil fără a intra în cod.