# Varme og kalde farger: bruk temperatur med vilje

[Canonical HTML page](https://gradiently.design/nb/guide/warm-and-cool-colors)

Hver farge har en temperatur, også gråtonene og hvitfargene dine. Lær å lese den, så kan du få et design til å føles nærmere, roligere eller lysere uten å endre en eneste fargetone.

## The short version

- Varme og kalde farger er de to halvdelene av fargehjulet: rødt, oransje og gult føles varmt, mens grønt, blått og fiolett føles kaldt.
- Temperatur er relativ, så en fiolett ser varm ut ved siden av blått og kald ut ved siden av oransje.
- Varme farger føles gjerne nærmere og mer energiske, mens kalde farger gjerne trekker seg tilbake og roer ned, og derfor ser fjerne åser i landskap blå ut.
- Gråtoner og hvitfarger har også temperatur, og å blande varme og kalde nøytraler ved et uhell er en vanlig grunn til at et design føles litt feil.
- En gradient fra varmt til kaldt holder seg ren når den går gjennom en felles nabo som rosa eller fiolett, i stedet for gjennom grått.

**Varme og kalde farger** er de to halvdelene av fargehjulet. Rødt, oransje og gult føles varmt, som ild og sollys. Grønt, blått og fiolett føles kaldt, som vann, skygge og kveld. Temperaturen endrer hvordan et design føles før noen har lest det: varme farger kommer fram og gir energi, kalde farger trekker seg tilbake og roer ned. Å bruke den med vilje er en av de raskeste måtene å få en palett til å føles gjennomtenkt på.

- Varm rød: #d7263d
- Varm oransje: #f46036
- Varm gul: #f7b32b
- Kald grønn: #2e9e6f
- Kald blå: #1b7fbd
- Kald fiolett: #5b3cc4

Tre varme og tre kalde farger fra hver sin side av hjulet. Skillet går omtrent mellom gulgrønn og rødfiolett.

## Temperatur er relativ

Grensen mellom varmt og kaldt er ikke fast. Gulgrønne og rødfiolette toner ligger på grensen, og enhver farge ser varmere ut ved siden av en kaldere. En magenta ved siden av en himmelblå leses som varm, og den samme magentaen ved siden av oransje leses som kald. Derfor bør du bedømme temperatur i paletten, ikke fargeprøve for fargeprøve.

- Magenta ved blått: varm: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)`
- Magenta ved oransje: kald: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)`

Den samme magentaen til høyre i begge. Temperaturen endrer seg med naboen.

Farger har også temperatur *innenfor* en fargetone. En rød som heller mot oransje, er varmere enn en rød som heller mot blått, og en blå med et snev av grønt er varmere enn en som heller mot fiolett. Designere kaller denne helningen undertonen, og det er den som får to «røde» til å krasje.

## Hvordan varme og kalde farger skaper dybde

Varme farger ser gjerne ut til å komme fram, og kalde til å falle tilbake. Landskapsmalere har brukt dette i århundrer: luften sprer lyset, så fjerne åser ser faktisk blåere og blekere ut, og øynene våre leser kaldt og blekt som langt unna. Du kan låne den samme effekten i flatt design.

| Egenskap | Varme farger | Kalde farger |
| --- | --- | --- |
| Rom | Kommer fram, føles nære | Trekker seg tilbake, føles fjerne |
| Energi | Aktive, presserende, sosiale | Rolige, stødige, fokuserte |
| Best til | Knapper, priser, overskrifter, mat | Bakgrunner, store flater, data, helse |
| I store mengder | Kan føles høylytt eller hett | Kan føles kaldt eller fjernt |
| I lys | Lav kelvin, som en pære på 2700 K | Høy kelvin, som overskyet dagslys |

Tendenser, ikke lover. Metning og lyshet kan snu temperaturen på hodet: en blek fersken trekker seg mer tilbake enn en elektrisk blå.

Den praktiske regelen: legg kalde farger i store bakgrunnsflater og spar varme farger til det som skal nå betrakteren først. En varm handlingsknapp på en kald side skiller seg ut uten å måtte være stor, noe som passer fint med [60-30-10-regelen](https://gradiently.design/nb/guide/60-30-10-rule).

## Varme og kalde nøytraler

Grått, hvitt og svart har også temperatur, og den betyr mer enn folk venter. En varm, brukket hvit føles som papir, mens en kald hvit føles som en skjerm eller en klinikk. Et design som blander en varmgrå bakgrunn med kaldgrå tekst, ser ofte litt feil ut uten at noen kan si hvorfor.

- Varmt papir: #f5efe6
- Varm stein: #b8ada0
- Varm koks: #3d3530
- Kald tåke: #eef2f6
- Kald skifer: #a3adb8
- Kald koks: #2b3240

Varme nøytraler heller mot brunt og krem, kalde mot blått. Velg én familie for et helt design.

```css
:root {
  /* Warm neutrals: pair with reds, oranges, golds */
  --paper: #f5efe6;
  --stone: #b8ada0;
  --charcoal-warm: #3d3530;

  /* Cool neutrals: pair with blues, greens, violets */
  --mist: #eef2f6;
  --slate: #a3adb8;
  --charcoal-cool: #2b3240;
}
```

Når nøytralene ligger i navngitte varme og kalde sett, er utilsiktet blanding lett å oppdage i kodegjennomgang.

## Blande varmt og kaldt i én gradient

Gradienter fra varmt til kaldt er blant de mest slående som finnes, og solnedganger beviser det. De er også de som lettest går galt, fordi varme og kalde farger ofte ligger rett overfor hverandre på hjulet, og en rett overgang mellom dem går gjennom grått. Løsningen er å føre overgangen gjennom en farge som hører til begge sider, som regel rosa, magenta eller fiolett.

- Oransje til blå, direkte: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Oransje til blå via rosa: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Skumring: kaldt øverst, varmt nederst: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Gul til grønn via lime: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

Den direkte overgangen dupper ned i en matt midte. De andre går gjennom en felles nabo, så hvert punkt underveis er en ekte farge. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer geometrien.

Proporsjoner betyr noe her også. La én temperatur lede og den andre dukke opp som kontrast. En stort sett kald gradient med en varm glød i den ene kanten føles som kveldslys, mens en jevn deling mellom varmt og kaldt føles ubestemt. [Solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) har mange flere eksempler på varmt og kaldt som deler én flate.

## Varme og kalde farger i hverdagsdesign

- **En menytavle på en kafé:** varm kremfarget grunn, espressofarget skrift og én aksent i terrakotta, så den føles som rommet den henger i
- **En bankapp:** flater i kald skifer og blått, med én varm rav til varsler som trenger oppmerksomhet
- **En plakat for et nattarrangement:** en dyp, kald fiolett flate med en varm oransje overskrift som spretter fram
- **En hudpleielansering:** kald tåke og salvie, løftet av én varm fersken til produktnavnet
- **En sportskampanje:** varm rød og oransje leder, og en kald marine bare til den lille skriften

I hvert tilfelle setter én temperatur klimaet, og den andre styrer oppmerksomheten. Den kombinasjonen er også en mild form for [komplementærkontrast](https://gradiently.design/nb/guide/complementary-colors), uten det fulle sammenstøtet mellom ekte motsetninger.

## Velge en temperatur for merkevaren din

1. **Start med følelsen** Imøtekommende, livlige og praktiske merkevarer heller som regel mot varmt. Presise, rolige og tillitvekkende merkevarer heller som regel mot kaldt. Ingen av delene er bedre. Velg den som passer til det du gjør.
2. **Velg én ledende temperatur** Bygg det meste av paletten, også nøytralene, på den ene siden. Det gir merkevaren et konsekvent klima.
3. **Legg til én aksent fra den andre siden** Én varm aksent på en kald merkevare, eller en kald på en varm, gir kontrast og et tydelig sted for øyet å lande.
4. **Test i sammenheng** Sjekk paletten på de skjermene og materialene den faktisk skal leve på. Farger forskyver seg mellom skjermer og igjen på trykk, se [hvordan du velger merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors).

## FAQ

### Hva er varme og kalde farger?

Varme farger er rødt, oransje og gult, og kalde farger er grønt, blått og fiolett. Grensefargene, gulgrønn og rødfiolett, kan leses begge veier avhengig av naboene.

### Er lilla varm eller kald?

Det kommer an på helningen og naboene. Rødlilla og magenta leses som varme ved siden av blått, mens blåfiolette leses som kalde, og enhver lilla ser kald ut ved siden av oransje.

### Kommer varme farger virkelig fram?

De ser gjerne ut til å være nærmere, særlig når de er mettede, mens kalde, bleke farger gjerne trekker seg tilbake. Lyshet og metning kan overstyre effekten.

### Kan du blande varme og kalde farger i ett design?

Ja. La én temperatur lede, bruk den andre som aksent, og la gradienter gå gjennom en felles nabo som rosa eller fiolett for å unngå en grå midte.