Kortversjonen
- Fargelære er et sett med praktiske ideer om hvordan farger forholder seg til hverandre, kombineres og påvirker hva folk ser først.
- Hver farge kan beskrives med tre egenskaper: fargetone, fargefamilien, metning, hvor intens den er, og lyshet, hvor nær den er hvitt eller svart.
- Lyshetskontrast betyr mer for lesbarhet enn fargetonekontrast, og derfor bør et design fortsatt fungere i gråtoner.
- Fargeharmonier som komplementære, analoge, triadiske og monokrome er posisjoner på fargehjulet som pålitelig ser balanserte ut.
- De fleste gode paletter bruker én dominerende farge, én eller to støttefarger og én liten aksent.
På denne siden
Fargelære (også kalt fargeteori) er settet av praktiske ideer designere bruker for å velge farger som fungerer sammen og gjør det de skal. Det kommer ned til seks ting: fargetone, metning, lyshet, temperatur, harmoni og kontrast. Forstår du dem, kan du forklare hvorfor en palett føles rolig eller høylytt, hvorfor noe tekst er vanskelig å lese og hvorfor to farger kolliderer.
Denne siden er utgangspunktet for alle fargeartiklene i Designguiden. Hver del lenker til en dypere når du trenger det.
Fargetone, metning og lyshet
Enhver farge kan beskrives med tre egenskaper. Fargetone er fargefamilien: rød, oransje, grønn, blå. Metning (også kalt kroma) er hvor intens den er, fra grå til livlig. Lyshet er hvor nær den er svart eller hvitt. Endrer du én og holder de andre fast, ser du hva hver gjør.
Disse tre er måten fargekoder som HSL og OKLCH beskriver farge på, noe som gjør dem lette å justere i kode. Fargekoder forklart tar for seg HEX, RGB, HSL og OKLCH.
Varme og kalde farger
Farger har også en temperatur. Røde, oransje og gule toner føles varme, mens blå, grønne og fiolette føles kalde. Varme farger føles gjerne nærmere og mer energiske, kalde farger lenger unna og roligere. Temperatur er likevel relativ: en fiolett med mye rødt i seg kan føles varm ved siden av et rent blått.
Varme og kalde farger går lenger, blant annet i hvordan du blander temperaturer i én gradient.
Fargeharmoni og fargehjulet
Ordner du fargetoner i en sirkel, ser noen forhold pålitelig balanserte ut. Dette er fargeharmoniene. De er ikke regler, men de er gode utgangspunkt når du er usikker. Guiden om fargehjulet forklarer hvordan du leser dem.
| Harmoni | Hvor fargene ligger | Hvordan det føles |
|---|---|---|
| Monokrom | Én fargetone i flere lyshetsgrader | Rolig, samlet, raffinert |
| Analog | Naboer på hjulet | Harmonisk, naturlig, lett |
| Komplementær | Rett overfor hverandre | Høy kontrast, energisk |
| Splittet komplementær | Én fargetone pluss de to ved siden av motsatsen | Livlig, men mindre spent |
| Triadisk | Tre fargetoner med jevn avstand | Leken, balansert, dristig |
Kontrast: hvorfor noen farger er vanskelige å lese
Kontrast er forskjellen mellom to farger. For lesing er det lysheten som betyr mest, ikke fargetonen. Rød tekst på grønn bakgrunn kan være to svært ulike fargetoner og likevel være vanskelig å lese, fordi de to kan ha lik lyshet. Mange med fargesynsvikt kan ikke skille dem i det hele tatt.
Bare fargetonekontrast
- Rødt på grønt med lik lyshet
- Blått på lilla
- Oransje på rosa
- Forsvinner når det gjøres om til gråtoner
Lyshetskontrast
- Nesten hvitt på dyp marineblå
- Nesten svart på blekt gult
- Mørkt blekk på en lys pastell
- Leses fortsatt i gråtoner
Gråtonetesten er den raskeste sjekken: gjør designet grått og se om ordene fortsatt trer fram. For tekst setter retningslinjene for tilgjengelig webinnhold (WCAG) minimumsforhold for kontrast, 4,5:1 for brødtekst og 3:1 for stor tekst. Fargekontrast forklarer hvordan du måler dem.
Proporsjon: hvor mye av hver farge
De samme fem fargene kan se rolige eller kaotiske ut avhengig av hvor mye du bruker av hver. En nyttig standard er én dominerende farge som dekker det meste av flaten, én eller to støttefarger og en liten aksent til det du vil skal legges merke til. 60-30-10-regelen er den vanlige versjonen av denne ideen.
Hva farger betyr
Farger bærer assosiasjoner, men de er lærte og ikke innebygde, og de varierer med kultur og sammenheng. Grønt kan bety natur, penger eller gå, og rødt kan bety fare, hell eller salg. Se på betydning som et spørsmål om målgruppen og kategorien din, ikke en fast ordbok. Fargepsykologi skiller det som holder fra det som ikke gjør det, og fargers betydning rundt om i verden viser hvor mye de er forskjellige.
Slik setter du fargelæren i arbeid
- 1
Start fra én farge
Velg fargen som betyr mest: merkevarefargen din, eller en hentet fra et foto. Å hente en palett fra et bilde hjelper.
- 2
Velg en harmoni
Bestem om paletten skal være rolig (monokrom eller analog) eller energisk (komplementær eller triadisk).
- 3
Bygg et lyshetsspenn
Legg til en veldig mørk og en veldig lys versjon til tekst og bakgrunner. De fleste paletter feiler fordi de mangler disse.
- 4
Fordel proporsjonene
Bestem hvilken farge som dominerer, hvilken som støtter og hvilken som er aksenten.
- 5
Test kontrast og sammenheng
Sjekk tekstkontrasten, kjør gråtonetesten og se på paletten i et ekte oppsett, ikke bare som fargeprøver.
For merkevarearbeid gjør slik velger du merkevarefarger disse stegene om til en full metode.
Spørsmål folk stiller
Hva er fargelære?
Fargelære er et sett med praktiske ideer om hvordan farger forholder seg til hverandre, hvordan de kombineres til harmoniske paletter og hvordan kontrast påvirker hva folk ser og leser.
Hva er de tre egenskapene til farge?
Fargetone, fargefamilien, metning, hvor intens eller grå den er, og lyshet, hvor nær den er svart eller hvitt.
Hva er de viktigste fargeharmoniene?
Monokrom, analog, komplementær, splittet komplementær og triadisk. Hver beskriver hvor fargene ligger på fargehjulet i forhold til hverandre.
Hva betyr mest for lesbarhet, fargetone eller lyshet?
Lyshet. Tekst trenger en tydelig forskjell i lyshet fra bakgrunnen, og derfor fungerer et lesbart design også når det gjøres om til gråtoner.
Har farger universelle betydninger?
Nei. Fargeassosiasjoner er lærte og ulike mellom kulturer, kategorier og sammenhenger, så sjekk dem mot målgruppen din.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
