Färgpsykologi för landningssidor med hög konvertering

Färg är det första en besökare bearbetar – innan de läser ett enda ord. Den kommunicerar bransch, trovärdighet och ton på millisekunder. Den påverkar också direkt om texten är läsbar, vilket påverkar om folk stannar kvar på sidan.

Det här inlägget förklarar hur PAGEnzas palettsystem fungerar och varför de begränsningar vi inför vid färgval faktiskt ger bättre resultat än att ge AI:n obegränsad frihet.

Problemet med att be en AI "välja fina färger"

Om du ber en LLM att välja färger för en webbplats får du hexkoder. Ibland ser de bra ut tillsammans. Ibland inte. Modellen har inget tillförlitligt sätt att utvärdera om färgerna faktiskt fungerar – om texten är läsbar, om paletten känns lämplig för branschen, om kombinationen är visuellt sammanhängande snarare än slumpmässigt matchande.

Vi såg detta problem tydligt i tidiga tester. Okontrollerad färggenerering gav paletter som varierade från utmärkta till helt oanvändbara. Det fanns ingen konsekvens.

Lösningen var att helt ta bort färgvalet från LLM:ens händer och bygga ett algoritmiskt system som garanterar specifika egenskaper.

4-färgssystemet

Varje PAGEnza-webbplats använder exakt fyra namngivna färger:

ink – primär textfärg. Alltid mörk (hög luminanskontrast mot bakgrunder). Används för rubriker, brödtext och UI-element som behöver läsas.

bg1 – primär bakgrund. Vanligtvis den ljusaste färgen i paletten. Används för huvudbakgrunden och ljusa sektioner.

bg2 – sekundär bakgrund. Skapar visuell variation mellan sektioner. Måste ha en annan färgtemperatur än bg1 – om bg1 är en varm gräddfärg, är bg2 en kall grå eller blåtonad vit.

accent – varumärkesfärgen. Används för knappar, länkar, markeringar och dekorativa element. Vanligtvis den mest mättade färgen i paletten.

Denna begränsning – fyra namngivna roller, inte godtyckliga hexkoder – är det som gör att palettsystemet fungerar. AI:n bestämmer aldrig vilken färg som ska användas var; den väljer bara vilken palett som ska användas från en förhandsgranskad uppsättning.

Hur paletter är organiserade

Vi underhåller 20+ palettgrupper, var och en byggd kring en arketyp:

• Djärv: högkontrast, mättade accenter – tech, SaaS, fintech
• Mjuk: dämpade, avmättade – wellness, coaching, kreativa tjänster
• Lyx: nästan svarta bakgrunder med metalliska eller juvelliknande accenter – premiumtjänster, high-end-detaljhandel
• Jordnära: varma neutrala färger med terrakotta- eller salviaccent – mat, hållbarhet, hantverk
• Mörk: mörka lägen-först-paletter – utvecklare, byråer, spel
• Neutral: säker, professionell – juridik, finans, hälsovård

Inom varje grupp finns flera paletter med olika färgtemperaturer, mättnadsnivåer och accentfärger. Systemet väljer en grupp baserat på bransch och arketyp, och väljer sedan en specifik palett inom gruppen.

WCAG-kontrast: begränsningen som förbättrar designen

WCAG AA kräver att normal text har ett kontrastförhållande på minst 4,5:1 mot sin bakgrund. Stor text behöver 3:1. Interaktiva element behöver 3:1 mot intilliggande färger.

Varje palett i vårt system valideras mot dessa förhållanden innan den inkluderas. Specifikt:

• ink måste uppnå ≥4,5:1 kontrast mot bg1, bg2 och alla ytfärger där text visas
• accent måste uppnå ≥3,0:1 mot bg1 och bg2 (för användning som knappbakgrunder)
• Valideringen använder verklig luminansmatematik – L = 0,2126R + 0,7152G + 0,0722B efter gamma-korrigering – inte approximationer

Effekten är att varje genererad webbplats är läsbar som standard. Men det finns en sekundär fördel: högkontrastdesigner konverterar bättre. En knapp som är tydligt synlig får fler klick än en som smälter in i bakgrunden. Tillgänglighetskravet visar sig vara ett konverteringskrav.

Färgtemperaturkontrast mellan sektioner

En detalj som är lätt att missa: bg1 och bg2 måste ha kontrasterande färgtemperaturer. Om båda bakgrunderna är varma, känns alternerande sektioner monotona – sidan ser ut som en enda kontinuerlig klump snarare än distinkta innehållsområden.

Regeln i vårt system: om bg1 har en varm ton (orange/gul riktning, eller en varm neutral som gräddfärg), måste bg2 vara kall (blå/grå riktning). Om bg1 är en kall vit, kan bg2 vara en varm off-white.

Detta är anledningen till att våra sektioner känns distinkta även utan tunga avdelare eller skuggor – själva bakgrundens färgtemperaturskifte skapar en tydlig visuell brytning.

Branschspecifik färglogik

Vissa färgval är starkt branschspecifika. Besökare har förväntningar som byggts upp genom års exponering för webbplatser i en viss kategori.

Hälsovård och välbefinnande: blå och gröna färger signalerar förtroende och lugn. Mättade röda och orange färger uppfattas som alarmerande i detta sammanhang.

Juridik och finans: mörka marinblå, kolfärgade, konservativa grå färger. Ljusa accenter är acceptabla men måste vara återhållsamma. Lekfulla paletter undergräver trovärdigheten.

Mat och gästfrihet: varma toner – terrakotta, bärnsten, gräddfärg – aktiverar aptitassociationer. Kalla kliniska paletter känns fel.

Teknik och SaaS: blå färger dominerar fortfarande, men det finns större variation. Elektriska blå, indigofärger och till och med violett uppfattas som tekniskt framåtblickande. Helt svarta bakgrunder fungerar för utvecklarverktyg.

Lyx och premium: nyckeln är återhållsamhet. Begränsat färgomfång, nästan svarta eller djupa marinblå som primärfärger, guld- eller platinaccent. Hög kontrast, aldrig mättad.

Valet av arketyp i Design Mandate mappar bransch + affärstyp till lämplig palettgrupp, så att en wellnesscoach inte får samma palett som en advokatbyrå, även om båda beskrivs som "professionella".

Vad kunder kan ändra

Efter generering kan kunder redigera sin webbplats i Gutenberg. Färgväljaren i redigeraren visar bara de fyra varumärkesfärgerna – inget annat. Detta innebär:

• De kan ändra sektionsbakgrunder mellan bg1, bg2 och ytor
• De kan ändra knapp- och länkarfärger mellan accent och ink
• De kan inte införa en godtycklig femte färg som bryter paletten

Begränsningen är avsiktlig. Det vanligaste sättet som kunder förstör en professionellt designad webbplats är genom att välja färger från hela färghjulet. Att begränsa paletten till fyra namngivna färger gör det omöjligt utan att gå in i koden.