# Färgtemperatur i design: varmt, kallt och neutralt ljus

[Canonical HTML page](https://gradiently.design/sv/guide/color-temperature)

Varje färg lutar åt varmt eller kallt, även de grå. Här är vad kelvinskalan betyder, varför den går åt motsatt håll mot hur vi pratar om värme, och hur du använder temperatur för att sätta stämningen i en design.

## The short version

- Färgtemperatur beskriver om ljus eller färg lutar åt orange och rött, vilket känns varmt, eller åt blått, vilket känns kallt.
- Ljuskällor mäts i kelvin: levande ljus ligger kring 1,900 K, hushållslampor kring 2,700 K och sRGB-standardens vita, D65, kring 6,500 K.
- Högre kelvinvärden ser blåare ut, så i ljus betyder ett högre temperaturtal en kallare färg.
- Neutrala toner har också temperatur: varma gråa lutar mot brunt eller beige och kalla gråa lutar mot blått.
- Många övertygande bilder parar varmt ljus med kalla skuggor, eller tvärtom, eftersom den kontrasten läses som naturligt djup.

**Färgtemperatur** är hur varmt eller kallt ett ljus eller en färg känns. Varmt betyder att luta mot stearinljusets orange och rött; kallt betyder att luta mot dagsljusets blått; neutralt ligger mittemellan. För ljus mäts den i kelvin, där ett stearinljus ligger kring 1,900 K och en mulen himmel kring 6,500 K. I design använder du den för att sätta stämning: varma paletter känns nära och bekväma, kalla känns lugna och rymliga, och en blandning av de två ger en bild djup.

## Kelvinskalan, och varför den verkar bakvänd

Kelvinvärdet kommer från fysiken: det är den temperatur ett idealiskt glödande föremål skulle behöva nå för att avge ljus i den färgen. En metallstång som värms långsamt glöder rött, sedan orange, sedan gulaktigt vitt och vid extrema temperaturer blåaktigt vitt. Så ett högre tal betyder ett blåare ljus, som designers kallar kallare. Vokabulären går åt motsatt håll mot fysiken, och det förvirrar alla till en början.

| Ljuskälla | Ungefärlig temperatur | Så ser det ut |
| --- | --- | --- |
| Stearinljuslåga | 1,900 K | Djup bärnsten |
| Varmvit hushållslampa | 2,700 K | Mjukt orangevitt |
| Halogenlampa | 3,000 K | Varmvitt |
| Kallvitt kontorsljus | 4,000 K | Neutralt vitt |
| Middagssol | 5,500 K | Rent vitt |
| Mulen himmel, sRGB-vitpunkt D65 | 6,500 K | Svagt kallt vitt |
| Öppen skugga under blå himmel | 10,000 K och över | Tydligt blått |

Typiska värden. Verkliga källor varierar, och lampor säljs i intervall som 2,700 K och 4,000 K.

Ungefär 1,900 K till 10,000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)`

Ungefärliga skärmfärger för ljus från stearinljus till blå skugga. Dina ögon anpassar sig till det ljus du befinner dig i, vilket är varför ett rum med 2,700 K ser vitt ut när du varit i det en stund.

Den anpassningen spelar roll för skärmar. sRGB-standarden som de flesta webb- och appfärger utgår från använder D65, omkring 6,500 K, som sin vita. Funktioner som nattlägen skiftar en skärms vita varmare, så färgerna du valde ser varmare ut för någon som läser på natten. Designa för standarden och acceptera driften.

## Varma, kalla och neutrala färger

Utanför belysning handlar temperatur om vilken sida av hjulet en färg lutar mot. Rött, orange och gult läses varmt; blått, blågrönt och blåviolett läses kallt. Grönt och lila ligger i mitten och kan gå åt båda håll: en oliv är varm, en mynta är kall. [Varma och kalla färger](https://gradiently.design/sv/guide/warm-and-cool-colors) tar upp hjulet i detalj; det användbara här är att temperatur gäller även inom en nyans. Det finns varma blå och kalla röda.

- Varmt rött, tegel: #c2372b
- Kallt rött, hallon: #c2185b
- Varmt blått, denim: #2b5d8a
- Kallt blått, kobolt: #2563eb
- Varmt grönt, oliv: #7a8b3a
- Kallt grönt, mynta: #3fbf9f

Tre nyanser, var och en i en varm och en kall version. De varma röda lutar åt orange, de kalla åt blått; detsamma gäller varje nyans.

Temperatur gör mycket av det känslomässiga arbetet i en palett, ofta mer än själva nyansen. Varma scheman känns nära, sociala och energiska; kalla scheman känns stilla, rymliga och kontrollerade. [Färgpsykologi](https://gradiently.design/sv/guide/color-psychology) utforskar de associationerna och deras gränser. Temperatur samverkar också med intensitet: en kall palett uppskruvad till full [mättnad](https://gradiently.design/sv/guide/color-saturation) slutar kännas lugn, och en varm som dämpats rejält börjar kännas vintage snarare än livlig.

## Neutrala toner har också en temperatur

Rent grått är sällsynt i bra design. De flesta grå som används väl lutar svagt varmt, mot sten och taupe, eller svagt kallt, mot skiffer och stål. Att blanda de två familjerna i en layout ser ofta lerigt ut utan att någon vet varför. Välj en familj och använd den för bakgrunder, ramar och sekundär text genomgående.

- Varma grå: papper till umbra: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)`
- Kalla grå: frost till skiffer: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)`
- Rent neutrala grå: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)`

Tre gråskalor. Lägg ett varmt grått bredvid ett kallt och skillnaden är uppenbar; var för sig läses båda bara som grått.

```css
:root {
  /* A warm neutral ramp: pick one family and keep it */
  --grey-50: #f6f3ee;
  --grey-200: #e4ded4;
  --grey-400: #bdb4a7;
  --grey-600: #7d7468;
  --grey-900: #2f2a25;
}
```

En varm gråskala som tokens. Byt in de kalla värdena för en skarpare, mer teknisk känsla.

Varma neutrala toner passar mat, gästfrihet, välmående och redaktionella varumärken. Kalla neutrala toner passar mjukvara, finans och allt som ska kännas exakt. [Neutrala färgpaletter](https://gradiently.design/sv/guide/neutral-color-palettes) har fler uppsättningar.

## Varmt ljus, kall skugga

Målare har länge lagt märke till att ljus och skugga skiljer sig i temperatur, inte bara i ljusstyrka. Solbelysta ytor blir varma medan skuggor tar upp blått från himlen. Återskapa det i en gradient eller illustration och den känns genast mer verklig än en ljus och mörk version av en enda nyans. Det fungerar också åt andra hållet: kallt månljus med varma lampskuggor.

För bakgrunder är det skillnaden mellan en gradient som känns belyst och en som känns som ett färgprov. Placera det varma ljuset där ögat ska gå först, låt de kalla tonerna samlas vid kanterna och håll texten över den lugnare av de två. [Gradientbakgrund](https://gradiently.design/sv/guide/gradient-background) går igenom hela metoden.

- Solnedgångsljus, blå skugga: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)`
- Månljus, varmt mörker: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)`
- Gyllene timmen till skymning: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)`

Gradienter som parar temperaturer. Jämför dem med en enda nyans som går från ljus till mörk, som ser platt ut bredvid dem.

Ett omslag i tidningsstil med rubriken Långa kvällar, sommarnumret

Ett sommaromslag. Temperaturen sätter årstiden innan någon läst orden.

Ett omslag i tidningsstil med rubriken Stilla morgnar, vinternumret

Ett vinteromslag med samma layout. Låt varmt ljus, om det finns något, ligga långt från orden.

## Färgtemperatur i fotografier

Vitbalans är kamerans gissning av ljusets temperatur. Ett foto taget under varma lampor med dagsljusvitbalans blir orange; ett taget i skugga blir blått. När foton ligger bredvid varumärkesfärger, matcha deras temperatur mot paletten. Ett varmt varumärke med kalla, blå foton känns osammanhängande. Att tona foton i palettens egna färger är en annan lösning: se [duotonfoton](https://gradiently.design/sv/guide/photo-duotone-in-mark-colours).

### Undvik

- Varma och kalla grå blandade i en layout
- Kalla, blå foton på ett varmt varumärke
- En enda nyans från ljus till mörk för djup
- Att bedöma färg under en varm skrivbordslampa

### Gör så här

- En neutral familj, använd överallt
- Foton korrigerade till palettens värme
- Varmt ljus med kall skugga, eller tvärtom
- Kontrollera färg i dagsljus eller på en kalibrerad skärm

Gradiently Marks bär ljus som en del av sitt recept, så de läses som en belyst yta snarare än ett platt färgprov, i varje storlek du designar i.

## FAQ

### Vad är färgtemperatur i design?

Den beskriver om en färg eller ett ljus lutar varmt, mot orange och rött, eller kallt, mot blått. Designers använder den för att sätta stämning och skapa djup.

### Är högre kelvin varmare eller kallare?

Kallare. Högre kelvinvärden ger blåare ljus, så 6,500 K ser kallare ut än 2,700 K.

### Vilken färgtemperatur har dagsljus?

Middagssol ligger kring 5,500 K och en mulen himmel kring 6,500 K. sRGB-standardens vita, D65, är omkring 6,500 K.

### Vad är skillnaden mellan varmt grått och kallt grått?

Varmt grått lutar svagt mot brunt eller beige; kallt grått lutar svagt mot blått. Välj en familj och använd den konsekvent.