Fargepsykologi for landingssider som konverterer

Farge er det første en besøkende prosesserer — før de leser et eneste ord. Den kommuniserer bransje, troverdighet og tone på millisekunder. Den påvirker også direkte om tekst er lesbar, noe som påvirker om folk blir på siden.

Dette innlegget forklarer hvordan PAGEnzas palettesystem fungerer og hvorfor begrensningene vi pålegger fargevalg faktisk gir bedre resultater enn å gi AI-en ubegrenset frihet.

Problemet med å be en AI om å "velge fine farger"

Hvis du ber en LLM om å velge farger for et nettsted, får du hex-koder. Noen ganger ser de fine ut sammen. Noen ganger gjør de ikke det. Modellen har ingen pålitelig måte å vurdere om fargene faktisk fungerer — om teksten er lesbar, om paletten føles passende for bransjen, om kombinasjonen er visuelt sammenhengende snarere enn tilfeldig matchende.

Vi så dette problemet tydelig i tidlig testing. Ubegrenset fargegenerering ga paletter som varierte fra utmerket til fullstendig ubrukelig. Det var ingen konsistens.

Løsningen var å ta fargevalget helt ut av LLM-ens hender og bygge et algoritmisk system som garanterer spesifikke egenskaper.

4-fargersystemet

Hvert PAGEnza-nettsted bruker nøyaktig fire navngitte farger:

ink — primærtekstfargen. Alltid mørk (høy lysstyrkekontrast mot bakgrunner). Brukes for overskrifter, brødtekst og UI-elementer som må leses.

bg1 — primærbakgrunnen. Vanligvis den lyseste fargen i paletten. Brukes for hovedsidens bakgrunn og lyse seksjoner.

bg2 — sekundærbakgrunnen. Skaper visuell variasjon mellom seksjoner. Må ha en annen fargetemperatur enn bg1 — hvis bg1 er en varm kremfarge, er bg2 en kjølig grå eller blåtonet hvit.

accent — merkefargen. Brukes for knapper, lenker, uthevinger og dekorative elementer. Vanligvis den mest mettede fargen i paletten.

Denne begrensningen — fire navngitte roller, ikke vilkårlige hex-koder — er det som får palettesystemet til å fungere. AI-en bestemmer aldri hvilken farge som skal hvor; den velger bare hvilken palett den skal bruke fra et forhåndsgodkjent sett.

Hvordan paletter er organisert

Vi vedlikeholder 20+ palettgrupper, hver bygget rundt en arketype:

• Dristig: høy-kontrast, mettede aksenter — teknologi, SaaS, fintech
• Myk: dempede, umettede — velvære, coaching, kreative tjenester
• Luksus: nesten-sorte bakgrunner med metalliske eller juvel-lignende aksenter — premiumtjenester, high-end detaljhandel
• Jordnær: varme nøytrale med terrakotta- eller salvieaksenter — mat, bærekraft, håndverk
• Mørk: mørk modus-første paletter — utviklere, byråer, spill
• Nøytral: trygg, profesjonell — juridisk, finans, helsevesen

Innenfor hver gruppe er det flere paletter med ulik fargetemperatur, metningsnivå og aksentfargetone. Systemet velger en gruppe basert på bransje og arketype, deretter en spesifikk palett innenfor gruppen.

WCAG-kontrast: begrensningen som forbedrer design

WCAG AA krever at normal tekst har et kontrastforhold på minst 4,5:1 mot bakgrunnen. Stor tekst trenger 3:1. Interaktive elementer trenger 3:1 mot tilstøtende farger.

Hver palett i systemet vårt er validert mot disse forholdene før den inkluderes. Spesifikt:

• ink må oppnå ≥4,5:1 kontrast mot bg1, bg2, og enhver overflatefarge der tekst vises
• accent må oppnå ≥3,0:1 mot bg1 og bg2 (for bruk som knappebakgrunner)
• Valideringen bruker ekte lysstyrkeberegning — L = 0.2126R + 0.7152G + 0.0722B etter gamma-korreksjon — ikke tilnærminger

Effekten er at hvert genererte nettsted er lesbart som standard. Men det er en sekundær fordel: design med høy kontrast konverterer bedre. En knapp som er tydelig synlig får flere klikk enn en som smelter inn i bakgrunnen. Tilgjengelighetskravet viser seg å være et konverteringskrav.

Fargetemperaturkontrast mellom seksjoner

En detalj som er lett å overse: bg1 og bg2 må ha kontrasterende fargetemperaturer. Hvis begge bakgrunnene er varme, føles vekslende seksjoner monotone — siden ser ut som en kontinuerlig klatt snarere enn distinkte innholdsområder.

Regelen i systemet vårt: hvis bg1 har en varm fargetone (oransje/gul retning, eller en varm nøytral som krem), må bg2 være kjølig (blå/grå retning). Hvis bg1 er en kjølig hvit, kan bg2 være en varm off-white.

Dette er grunnen til at seksjonene våre føles distinkte selv uten tunge skillelinjer eller skygger — selve bakgrunnstemperaturforandringen skaper en klar visuell skille.

Bransjespesifikk fargelogikk

Noen fargevalg er sterkt kodet for bransjen. Besøkende har forventninger bygget opp gjennom års eksponering for nettsteder i en gitt kategori.

Helse og velvære: blå og grønne farger signaliserer tillit og ro. Mettede røde og oransje farger oppfattes som alarmerende i denne sammenhengen.

Juridisk og finans: mørke marineblå, kullgrå, konservative gråtoner. Lyse aksenter er akseptable, men må holdes tilbake. Leken palett undergraver troverdigheten.

Mat og gjestfrihet: varme toner — terrakotta, rav, krem — aktiverer appetittassosiasjoner. Kjølige kliniske paletter føles feil.

Teknologi og SaaS: blå farger forblir dominerende, men det er mer variasjon. Elektriske blåfarger, indigofarger og til og med fiolett oppfattes som teknologifokuserte. Rene sorte bakgrunner fungerer for utviklerverktøy.

Luksus og premium: nøkkelen er tilbakeholdenhet. Begrenset fargespekter, nesten-sorte eller dype marineblå som primærfarger, gull- eller platinumsaksenter. Høy kontrast, aldri mettet.

Arketypevalget i Design Mandate mapper bransje + forretningstype til den passende palettgruppen, slik at en velværecoach ikke ender opp med samme palett som et advokatfirma, selv om begge beskrives som "profesjonelle."

Hva kunder kan endre

Etter generering kan kunder redigere nettstedet sitt i Gutenberg. Fargevelgeren i redigeringsprogrammet viser bare de fire merkefargene — ingenting annet. Dette betyr:

• De kan endre bakgrunner mellom bg1, bg2, og overflater
• De kan endre knapp- og lengefarger mellom accent og ink
• De kan ikke introdusere en vilkårlig femte farge som bryter paletten

Begrensningen er bevisst. Den vanligste måten kunder ødelegger et profesjonelt designet nettsted på, er ved å velge farger fra hele fargehjulet. Å begrense paletten til fire navngitte farger gjør det umulig uten å gå inn i koden.