Farveteori i webdesign: Sådan finder du den rigtige farvepalette til dit websted

7 Min.
En introduktion til farveteori for webdesignere

Vi husker sandsynligvis alle valgte farveteorien i kunstuddannelsen: vigtigheden af primære, sekundære og tertiære farver. Som webdesigner arbejder du med farveteori hver dag – uanset om det er ubevidst eller bevidst. I denne artikel vil jeg vise dig, hvordan du bruger de rigtige principper og værktøjer til at opbygge gode farvekombinationer til dit næste webprojekt.

Farveteori: Hvorfor en opdatering nogle gange er nødvendig

De første optegnelser af farveteori, også kaldet Color Theory, og farvecirklen går mindst tilbage til begyndelsen af det 17. århundrede. Fremkomsten af farver, refleksion af lys, processen i det menneskelige øje - alt dette har besat samfundet i lang tid.

Vi designer er ofte primært visuelle typer. Oprettelse af farvekombinationer opstår ofte fra maven. Vi ser og analyserer konstant farverne omkring os. Dette skaber en intuitiv måde at håndtere farver på. 

Det faktuelle kendskab til farverne og deres virkninger er imidlertid ikke blot uundværligt for at kunne forklare farvevalget og -arrangementet. Det er også vigtigt at træffe beslutninger, der afviger fra normen.

For at finde de optimale farvekombinationer til dine kunder og hjemmesider er en god viden om farveteori uundgåelig.

Som designere har vi en afgørende fordel i forhold til de trykte medier: Hvor mange farver du ender med at bruge, og hvilke toner du vælger, har ingen effekt på prisen på produktet. Dette gælder dog kun, så længe projektet forbliver digitalt.

Du tror heller ikke på de tekniske begrænsninger, vi har i trykte medier. Dette giver dig som designer: først og fremmest den vidunderlige frihed til at være i stand til fuldt ud at udvikle dig selv.

Farvecirklen, temperaturen og krom

Vores skærme er normalt baseret på RGB (Rød, Grøn, Blå) - også kendt som additiv farvesystem. Som tommelfingerregel kan det siges, at alt, hvad der udstråler baggrundslys, er baseret på additive farvesystemet. I denne struktur bruger vi de primære farver som udgangspunkt. Hvid oprettes ved at kombinere alle farver, mens sort repræsenterer fraværet af farverne.

Primære, sekundære og tertiære farver

Ved hjælp af eksemplet med en simpel farvecirkel er primære farver gule, røde og blå. Sekundære farver opstår, når du blander primære farver med hinanden. Tertiære farver dannes af blandinger, der indeholder primære og sekundære farver.

Farveteori i webdesign
Farvecirklen beskriver og opdeler farver.

Nuancer, nuancer, nuancer og Chroma

Nuancer, eller nuance, beskriver de ublandede seks primære og sekundære farver:

  • Tonfarver beskriver den tonfarve, der kommer fra at tilføje hvid til en farve.
  • Nuancer bruger det samme princip som nuancer – men her blander vi sort.
  • Chroma, også kaldet mætning eller ler, vi kalder blanding af nuancer med grå eller neutrale farver som hvid og sort. Hvis vi følger denne definition, tilhører Shades and Tints også Chroma.

Temperatur og kontrast

Farveteori i webdesign
Temperatur og kontrast i farver

Du kan også klassificere farverne i temperaturer. Der er et par tommelfingerregler:

Varme farver ser mere dominerende ud, når du parrer dem med kolde farver. Dette giver dig også mulighed for at formidle følelsen af dybde. Kolde farver vises derfor længere væk end varme. Intense varmefarver kan også få kolde farver til at se endnu koldere ud.

Grå og nuancer af grå, hvid og sort tilhører gruppen af neutrale farver. Beige og brun er også ofte tildelt de neutrale farver. Personligt er jeg kun delvist enig i dette, fordi en nuance af grå helt sikkert kan se varm eller kold ud. Jeg tæller også beige og brun blandt de varme toner. For mig definerer neutrale farver sig selv som hvid og sort, og alle nuancer af grå i mellem, der ikke er blevet føjet til nogen anden farve.

Neutrale farver alene synes temmelig uinteresstig, hvilket er grunden til de har brug for mindst én farve til at skille sig ud. Undtagelser bekræfter reglen her, fordi der er nogle minimalistiske sort-hvide layout, der ikke kræver flere farver. Brun og beige kan også se meget attraktiv ud som en dominerende farve, f.B. i et monokromatisk design.

Primære farver står i kontrast til hinanden. Der er en anden måde at skabe kontrast på. Ved at se på de farver, der bevæger sig omkring 3 kvadrater fra hinanden på farvecirklen. Disse parringer kan nemt skabe et disharmoni. Fordi de bider hinanden. Hvis de bruges korrekt, f.eks. som opfordring til handling, kan de give dit design en interessant kontrast.

Otte principper for at skabe harmoniske farvepaletter

Komplementære farver

Komplementære farver er to farver, der er direkte modsatte, er kombineret i dette koncept, som i eksemplet med Youtube Kultur &Amp Trends Report.

Farveteori i webdesign
Komplementære farver i farvecirklen

To komplementære farver skiller sig ud fra hinanden på de fleste. Dette skaber en høj kontrast endnu harmonisk farveskema. Disse designs er velegnede til dynamiske, opsigtsvækkende designs. Derfor er det vigtigt at sikre, at dette også afspejler det produkt, du vil kommunikere.

Kombination af trekant

Trekantkombinationen beskriver tre farver, der er i samme afstand fra hinanden på farvecirklen.

I lighed med de tidligere kombinationer er denne også ret enkel og nem at bruge. Det giver mere mangfoldighed, men det er på den sikre side. Der er næppe nogen harmonisk sammensætning af det grundlæggende princip. Disse farvepaletter er særligt godt brugt på hjemmesider, som formodes at behage en bred vifte af brugere.

Du bør stadig vælge en farve, der overtager dominans af design. Dette sikrer et klart design og mere harmoni. Dette fremgår også af eksemplet med Slaveryfootprint.org.

Farveteori i webdesign
Trekantkombinationen ved hjælp af eksemplet med et websted
Farveteori i webdesign
Trekantkombinationen i farvecirklen

Opdelte komplementære farver

Opdelte komplementære farver beskriver et lignende koncept som de komplementære farver. Kun én side er delt op her. I stedet for den supplerende primære farve bruger du nu de omgivende tertiære farver. Dette sortiment tilbyder flere kombinationsmuligheder.

Tilføjelse af en tredje farve til det supplerende skema tilføjer lidt mere balance til layoutet. Denne kombination bruges ganske ofte på nettet. Farveskemaet behøver ikke at være så højt som i dette eksempel. 

Den tredje farve bruges ofte af designere: som accentfarve og bruges meget sparsomt. Med dette princip kan du give dine websteder en blid kontrast.

Farveteori i webdesign
Opdelte komplementære farver i farvecirklen
Farveteori i webdesign
Delte komplementære farver på et websted

Kombination af firkantede farver

I lighed med det tresidede koncept kombinerer den firkantede farvekombination fire farver. Dette er af alle de kombinationer, der hidtil er præsenteret, hvilket er det sværeste at mestre. 

Også her kombinerer vi to par komplementære farver. Der kræves dog følsomhed i hierarkiets fordeling her. På denne hjemmeside bruges den røde tone sparsomt til at forhindre den røde i at dominere de resterende farver. I stedet blev en koldblå og en neutral beige brugt som dominerende farver.

Når du bruger dette princip, skal du være omhyggelig med at bruge varme og kolde farver i harmoni med hinanden.

Farveteori i webdesign
Kombinationen af firkantede farver i farvecirklen
Farveteori i webdesign
Firkantet farvekombination på et websted

Firkantede komplementære farver

Består af to tilstødende farver og deres komplementære farver.

Med disse farver kan du oprette en farvepalet, der giver dig den tiltalende kontrast mellem komplementære farver, mens du er mere forskelligartet, som i dette eksempel.

Analog

Analoge farvepaletter er to eller flere farver, der ligger side om side på farvecirklen. Analoge farvepaletter er mindre høj kontrast end de kompositioner, der er beskrevet ovenfor, men gå ikke glip af deres virkning. 

For din hjemmeside er det et godt valg at udvikle et hierarki og bruge farverne i overensstemmelse hermed. I følgende eksempel valgte Crips Studios lilla som sin mest dominerende farve. Denne farve er så også den, der sætter stemningen på dit websted.

Farveteori i webdesign
Analoge farvepaletter i farvecirklen
Farveteori i webdesign
Analoge farvepaletter på et websted

Monokrom

Monokrom beskriver forskellige toner og/eller chroma af samme farve. Dette er den nemmeste måde at opnå en harmonisk farvekombination på. Godt anvendt, kan det stadig skille sig ud fra andre sider.

Brugen af monokrome farver forbedrer yderligere den følelsesmæssige effekt af den oprindelige farve og skaber også elegance. Minimal design drage fordel af monokrome farvepaletter. Du skal også vide, at monokrome websteder er med lav kontrast.

Farveteori i webdesign
Monokrome farver på en hjemmeside

Chroma og tonfarve

Brugen af farver med lignende chroma- eller toneværdier. I eksemplet med Bliss blev harmoni skabt af den konstante brug af pastelfarver.

Farveteori i webdesign
Chroma og farvetone er vigtige i webdesign.

Inspiration og online værktøjer

Ved nu er det mere af en klassisk og stadig en af mine foretrukne farvepalet skabelse værktøjer: Adobe Color Wheel.

Som en ny funktion kan du også kontrollere dit valg for at se, om det stadig er stor kontrast nok af brugere, der lider af farveblindhed.

  • Eggradients giver en række inspirationer til stigninger og de matchende CSS-stilarter.
  • Khroma er en AI-baseret browserapplikation, der lærer, hvilke farver der skal fortælle dig og skaber passende kombinationer. Absolut anbefales som en hurtig inspiration til farver og kombinationer.
  • Coolors er en platform, hvor du selv kan inspirere dig selv og skabe farvepaletter. Det tilbyder også udvidelser til Chrome og Adobe.

I lighed med Adobe Color Wheel fungerer Colourco også. Du kan angive det princip, som farvepaletten skal oprettes efter. Med enkel svævende kan du derefter teste og oprette farvekombinationer. Du kan downloade dit valg som Sass Stylesheet eller .png.

Farveteori i webdesign

Derudover tilbyder et attraktivt designet websted til udforskning af forskellige farver og deres virkninger dig https://emotivefeels.com/.

Dine spørgsmål om farveteori i webdesign

Hvad er dine erfaringer med farver i webdesign? Hvilke spørgsmål har du til Sonja? Lad os vide i kommentarerne! Du vil vide mere om nye bidrag til RAIDBOXES blive informeret? Følg os derefter på Twitter, Facebook eller via vores nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.