# Varma och kalla färger: använd temperatur med avsikt

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

Varje färg har en temperatur, även dina gråa och vita. Lär dig läsa den så kan du få en design att kännas närmare, lugnare eller ljusare utan att ändra en enda nyans.

## The short version

- Varma och kalla färger är färghjulets två halvor: rött, orange och gult känns varmt, medan grönt, blått och violett känns kallt.
- Temperatur är relativ, så en violett ser varm ut bredvid blått och kall ut bredvid orange.
- Varma färger tenderar att kännas närmare och mer energiska, medan kalla färger tenderar att dra sig tillbaka och lugna, vilket är varför avlägsna kullar i landskap ser blå ut.
- Grått och vitt har också temperatur, och att av misstag blanda varma och kalla neutrala toner är en vanlig orsak till att en design känns lite fel.
- En gradient från varmt till kallt förblir ren när den passerar en gemensam granne som rosa eller violett, i stället för att gå via grått.

**Varma och kalla färger** är färghjulets två halvor. Rött, orange och gult känns varmt, som eld och solljus, medan grönt, blått och violett känns kallt, som vatten, skugga och kväll. Temperaturen förändrar hur en design känns innan någon har läst den: varma färger kommer fram och ger energi, kalla färger sjunker tillbaka och lugnar. Att använda den med avsikt är ett av de snabbaste sätten att få en palett att kännas genomtänkt.

- Varm röd: #d7263d
- Varm orange: #f46036
- Varm gul: #f7b32b
- Kall grön: #2e9e6f
- Kall blå: #1b7fbd
- Kall violett: #5b3cc4

Tre varma och tre kalla färger från motsatta sidor av hjulet. Gränsen går ungefär mellan gulgrönt och rödviolett.

## Temperatur är relativ

Gränsen mellan varmt och kallt är inte fast. Gulgrönt och rödviolett ligger på gränsen, och varje färg ser varmare ut bredvid en kallare. En magenta bredvid en himmelsblå läses som varm, medan samma magenta bredvid orange läses som kall. Därför ska du bedöma temperaturen i paletten, inte prov för prov.

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

Samma magenta till höger i båda. Dess temperatur ändras med grannen.

Färger har också temperatur *inom* en nyans. En röd som lutar åt orange är varmare än en röd som lutar åt blått, och en blå med ett stänk grönt är varmare än en som lutar åt violett. Designers kallar den lutningen undertonen, och det är den som får två ”röda” att krocka.

## Så skapar varma och kalla färger djup

Varma färger tenderar att se ut att komma fram och kalla att falla tillbaka. Landskapsmålare har utnyttjat det i århundraden: luften sprider ljus, så avlägsna kullar ser verkligen blåare och blekare ut, och våra ögon läser kallt och blekt som långt bort. Samma effekt kan du låna i platt design.

| Egenskap | Varma färger | Kalla färger |
| --- | --- | --- |
| Rymd | Kommer fram, känns nära | Drar sig tillbaka, känns långt bort |
| Energi | Aktiva, brådskande, sociala | Lugna, stadiga, fokuserade |
| Bäst för | Knappar, priser, rubriker, mat | Bakgrunder, stora ytor, data, hälsa |
| I stora mängder | Kan kännas högljudda eller heta | Kan kännas kalla eller avlägsna |
| I ljus | Låg Kelvin, som en glödlampa på 2700 K | Hög Kelvin, som mulet dagsljus |

Tendenser, inte lagar. Mättnad och ljushet kan slå ut temperaturen: en blek persika drar sig tillbaka mer än ett elektriskt blått.

Den praktiska regeln: lägg kalla färger på stora bakgrundsytor och spara de varma för det som ska nå betraktaren först. En varm uppmaning på en kall sida sticker ut utan att behöva vara stor, vilket passar väl ihop med [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule).

## Varma och kalla neutrala toner

Grått, vitt och svart bär också temperatur, och den spelar större roll än folk tror. Ett varmt off-white känns som papper, ett kallt vitt känns som en skärm eller en klinik. En design som blandar en varmgrå bakgrund med kallgrå text ser ofta lite fel ut utan att någon kan säga varför.

- Varmt papper: #f5efe6
- Varm sten: #b8ada0
- Varmt kol: #3d3530
- Kall dimma: #eef2f6
- Kall skiffer: #a3adb8
- Kallt kol: #2b3240

Varma neutrala toner lutar åt brunt och grädde, kalla åt blått. Välj en familj för en hel 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;
}
```

Om du håller neutrala toner i namngivna varma och kalla uppsättningar är det lätt att upptäcka oavsiktlig blandning vid kodgranskning.

## Blanda varmt och kallt i en gradient

Gradienter från varmt till kallt är några av de mest slående som finns, och solnedgångar bevisar det. De är också de som oftast går snett, eftersom varma och kalla färger ofta ligger mitt emot varandra på hjulet och en rak övergång mellan dem passerar grått. Lösningen är att leda övergången via en färg som hör till båda sidor, oftast rosa, magenta eller violett.

- Orange till blått, direkt: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Orange till blått via rosa: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Skymning: kallt ovanför, varmt nedanför: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Gult till grönt via lime: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

Den direkta övergången sjunker ner i en glåmig mitt. De andra passerar en gemensam granne, så varje punkt på vägen är en riktig färg. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar geometrin.

Proportionerna spelar också roll. Låt en temperatur leda och den andra framträda som kontrast. En mestadels kall gradient med en varm glöd i ena kanten känns som kvällsljus, medan en jämn delning mellan varmt och kallt känns obestämd. [Solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient) har många fler exempel på varmt och kallt i samma fält.

## Varma och kalla färger i vardaglig design

- **En menytavla på ett kafé:** varm gräddvit botten, espressofärgad text och en accent i terrakotta, så att den känns som rummet den hänger i
- **En bankapp:** kalla skiffer- och blåtoner, med en varm bärnsten för varningar som kräver uppmärksamhet
- **En affisch för en nattevent:** ett djupt kallt violett fält med en varm orange rubrik som hoppar fram
- **En hudvårdslansering:** kall dimma och salvia, lyfta av en enda varm persika för produktnamnet
- **En sportkampanj:** varm röd och orange som leder, en kall marinblå bara för det finstilta

I varje fall sätter en temperatur klimatet och den andra styr uppmärksamheten. Den kombinationen är också en mild form av kontrast med [komplementfärger](https://gradiently.design/sv/guide/complementary-colors), utan den fulla krocken mellan verkliga motsatser.

## Välja temperatur för ditt varumärke

1. **Börja i känslan** Välkomnande, livliga och handfasta varumärken lutar oftast åt varmt. Precisa, lugna och pålitliga varumärken lutar oftast åt kallt. Ingen är bättre, välj den som stämmer med det du gör.
2. **Välj en ledande temperatur** Bygg det mesta av din palett, inklusive neutrala toner, på ena sidan. Det ger varumärket ett enhetligt klimat.
3. **Lägg till en accent från andra sidan** En enda varm accent på ett kallt varumärke, eller en kall på ett varmt, ger kontrast och en tydlig plats där blicken kan landa.
4. **Testa i sammanhanget** Kontrollera paletten på de faktiska skärmar och material den ska leva på. Färger skiftar mellan skärmar och igen i tryck, se [så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors).

## FAQ

### Vad är varma och kalla färger?

Varma färger är rött, orange och gult, kalla färger är grönt, blått och violett. Gränsfärgerna, gulgrönt och rödviolett, kan läsas åt båda håll beroende på sina grannar.

### Är lila varmt eller kallt?

Det beror på dess lutning och grannar. Rödlila och magenta läses som varma bredvid blått, medan blåvioletta läses som kalla, och all lila ser kall ut bredvid orange.

### Kommer varma färger verkligen fram?

De tenderar att se närmare ut, särskilt när de är mättade, medan kalla, bleka färger tenderar att dra sig tillbaka. Ljushet och mättnad kan slå ut effekten.

### Kan man blanda varma och kalla färger i en design?

Ja. Låt en temperatur leda, använd den andra som accent, och blanda i gradienter via en gemensam granne som rosa eller violett för att undvika en grå mitt.