Design og UX Artikel

Sådan bygger du en farvepalette

Farver spiller en afgørende rolle i design. De påvirker vores følelser, styrer vores opmærksomhed og former, hvordan vi opfatter et brand eller et budskab. Samtidig er farver noget af det mest subjektive i designprocessen, og det kan være svært at gennemskue, hvordan man egentlig sammensætter en god farvepalette. Her kan farveteori fungere som et nyttigt udgangspunkt og hjælpe med at skabe balance i farvevalgene.

 

Rasmus Otto-Sidelmann
Digital Designer, GoPublic

De seks klassiske farvekombinationer

I UI- og UX-design bruges farver ikke kun til æstetik. De er også et redskab til at påvirke adfærd, fremhæve vigtige elementer og skabe genkendelighed omkring et brand. Mange farveskemaer består derfor af én primær farve, én sekundær farve og én eller to accentfarver.

En af de mest almindelige måder at skabe en farvepalette på er ved at tage udgangspunkt i farvehjulet. Her findes en række klassiske farvekombinationer, som designere ofte bruger. Her kan du tage udgangspunkt i én farve, fx jeres logofarve, og bruge én af de seks kombinationer til at skabe en palette, der passer til jeres identitet.

Komplementærfarver

Komplementære farver ligger over for hinanden på farvehjulet. Eksempler er rød og grøn eller blå og orange. 

Denne type kombination skaber høj kontrast og stærk visuel energi. Derfor bruges komplementære farver ofte, når man vil skabe opmærksomhed eller tydelig differentiering mellem elementer. Det er også et godt udgangspunkt, hvis man føler sig på bar bund og har svært ved at finde farver, som passer sammen. Brug farven fra jeres logo og find derefter komplementærfarven til den, og I er hurtigt i gang med at lave en palette.

Nærliggende farver

Nærliggende farver ligger ved siden af hinanden på farvehjulet.

Paletter baseret på denne kombination opleves ofte som harmoniske og naturlige, fordi de minder om farvekombinationer, vi kender fra naturen, for eksempel solnedgangens orange, pink og lilla toner.

Én farve i flere nuancer

Et monokromatisk farveskema tager udgangspunkt i én enkelt farve og arbejder videre med dens nuancer.

Ved at variere lyshed og mørke kan man skabe en palette, der føles rolig, minimalistisk og meget sammenhængende.

Næsten-komplementære farver

Paletten tager udgangspunkt i én farve og kombinerer den med de to farver, der ligger på hver side af dens komplementære farve.

Resultatet giver stadig kontrast, men opleves ofte mindre aggressivt end en klassisk komplementær palette.

Tre jævnt fordelte farver

En palette med tre jævnt fordelte farver består af tre farver, der ligger med lige stor afstand på farvehjulet.

Hvis man forestiller sig en trekant på farvehjulet, vil de tre hjørner markere palettens farver. Resultatet er ofte en energisk og livlig farvekombination, som kræver lidt balance for ikke at virke for dominerende og som om den stikker i mange, mange retninger.

Kvadratiske farver

En kvadratisk palette består af fire farver med lige stor afstand på farvehjulet.

Denne type palette giver stor variation og fleksibilitet, men kan også hurtigt blive visuelt overvældende, hvis ikke man balancerer den med neutrale farver.

Fra farvekombinationer til palette

Når du har valgt en grundkombination fra farvehjulet, er næste skridt at udvide den til en egentlig farvepalette. Det gør man typisk ved at arbejde videre med farvernes tints, tones og shades:

  • Tint: En farve blandet med hvid (lysere nuance)
  • Shade: En farve blandet med sort (mørkere nuance)
  • Tone: En farve blandet med grå (mere afdæmpet nuance)

Når man begynder at arbejde med disse variationer, udvider man i praksis farvehjulets 12 grundfarver til et næsten uendeligt antal nuancer. Herfra er det din egen subjektive holdning, der skal udvælge de farver, du synes passer godt sammen. Her er det vigtigt at du vælger både nogle lysere og mørkere versioner af farven. Desuden er det vigtigt at tilføje nogle neutrale farver, så man skaber nogle visuelle pauser i designet.

Husk de neutrale farver

Grå, sort, hvid, beige og forskellige off-white nuancer fungerer som visuelle pauser i designet. De hjælper med at skabe balance mellem de mere markante farver og gør det lettere at strukturere indhold. 

  • Beige, brun og cremefarver giver ofte en varmere oplevelse
  • Grå kan opleves både som kold og varm afhængigt af de omkringliggende farver
  • Sort og hvid kan ligeledes skifte karakter alt efter konteksten

Det er altid en god idé at bruge lyse farver, når I arbejder med web. Både for kraftige farver og mørke nuancer kan tage meget opmærksomhed og give et overvældende indtryk hos modtageren. 

Trods alt dette kan den endelige farvepalette være svær at få helt på plads. En god tommelfingerregel er den velkendte 60-30-10-regel, der kan hjælpe dig med at træffe det afgørende valg.

Brug 60–30–10-reglen

En klassisk tommelfingerregel fra både design og arkitektur er 60–30–10-princippet.

  • 60% primær farve: Den dominerende farve i designet
  • 30% sekundær farve: Understøtter og skaber kontrast
  • 10% accentfarve: Fremhæver vigtige elementer

Denne fordeling hjælper med at skabe balance og tydelig visuel hierarki, når du skal bruge din palette i virkeligheden.

Husk tilgængelighed

Når du arbejder med farver i digitale løsninger, er det vigtigt også at teste dem i forhold til tilgængelighed. Ifølge WCAG (Web Content Accessibility Guidelines) skal der være tilstrækkelig kontrast mellem tekst og baggrund, så indholdet kan læses af brugere med nedsat syn eller farveblindhed.

Du kan kontrollere kontrastforholdet med et værktøj som WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

Det kan også være en fordel at dokumentere i designmanualen, hvilke baggrundsfarver der skal bruges med lys tekst, og hvilke der skal bruges med mørk tekst. På den måde bliver det tydeligt for alle, hvordan farverne må anvendes, og man undgår utilsigtede kombinationer, der ikke lever op til tilgængelighedskravene.

Test dine farver

Inden du låser din palette fast, er det en god idé at teste den i praksis og indhente feedback. En palette kan se god ud isoleret, men fungere anderledes i et konkret design eller i samspil med tekst, billeder og layout.

En simpel måde at teste sine farver på er at lave en lille designskabelon, hvor farverne bruges i en realistisk kontekst. Det kan for eksempel være en sideopsætning med:

  • En hero-sektion med overskrift og baggrundsfarve
  • En brødtekst med den primære tekstfarve
  • En call-to-action-knap i accentfarven

Når farverne anvendes i konkrete UI-elementer, bliver det tydeligere, om kontrasterne fungerer, og om nogle farver dominerer for meget.

Det kan også være en god idé at teste paletten i forskellige situationer, for eksempel:

  • Tekst på farvede baggrunde: Er kontrasten høj nok til, at teksten er let at læse?
  • Knapper og interaktive elementer: Er det tydeligt, hvad man kan klikke på?
  • Store flader vs. små detaljer: Nogle farver fungerer godt som accent, men bliver for dominerende som baggrund.
  • Sammen med billeder: Farver kan ændre karakter afhængigt af de billeder, de optræder sammen med.

Til sidst kan det være værd at vise designet til andre. Friske øjne opdager ofte hurtigt ting, man selv er blevet blind for, for eksempel hvis en farve virker for aggressiv, eller hvis elementer ikke skiller sig tydeligt nok ud.