# Farbtemperatur im Design: warmes, kühles und neutrales Licht

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

Jede Farbe tendiert zu warm oder kühl, sogar die Grautöne. Hier steht, was die Kelvin-Skala bedeutet, warum sie andersherum läuft, als wir über Wärme sprechen, und wie du mit Temperatur die Stimmung eines Designs bestimmst.

## The short version

- Farbtemperatur beschreibt, ob Licht oder Farbe zu Orange und Rot tendiert, was warm wirkt, oder zu Blau, was kühl wirkt.
- Lichtquellen werden in Kelvin gemessen: Kerzenlicht liegt bei etwa 1.900 K, Haushaltslampen bei etwa 2.700 K und das sRGB-Standardweiß D65 bei etwa 6.500 K.
- Höhere Kelvinwerte sehen blauer aus, beim Licht bedeutet eine höhere Temperaturzahl also eine kühler wirkende Farbe.
- Auch Neutraltöne haben eine Temperatur: Warme Grautöne tendieren zu Braun oder Beige, kühle Grautöne zu Blau.
- Viele überzeugende Bilder kombinieren warmes Licht mit kühlen Schatten oder umgekehrt, weil dieser Kontrast als natürliche Tiefe wirkt.

**Farbtemperatur** beschreibt, wie warm oder kühl ein Licht oder eine Farbe wirkt. Warm heißt, sie tendiert zu Kerzenorange und Rot; kühl heißt, sie tendiert zu Tageslichtblau; neutral liegt dazwischen. Bei Licht wird sie in Kelvin gemessen, wobei eine Kerze bei etwa 1.900 K liegt und ein bedeckter Himmel bei etwa 6.500 K. Im Design nutzt du sie, um Stimmung zu erzeugen: Warme Paletten wirken nah und behaglich, kühle ruhig und weit, und die Mischung aus beiden gibt einem Bild Tiefe.

## Die Kelvin-Skala und warum sie verkehrt wirkt

Der Kelvinwert stammt aus der Physik: Er ist die Temperatur, die ein idealer glühender Körper erreichen müsste, um Licht dieser Farbe abzugeben. Ein langsam erhitzter Metallstab glüht rot, dann orange, dann gelblich weiß und bei extremen Temperaturen bläulich weiß. Eine höhere Zahl bedeutet also blaueres Licht, das Designer kühler nennen. Das Vokabular läuft der Physik entgegen, und das verwirrt anfangs alle.

| Lichtquelle | Ungefähre Temperatur | Wirkung |
| --- | --- | --- |
| Kerzenflamme | 1.900 K | Tiefes Bernstein |
| Warmweiße Haushaltslampe | 2.700 K | Weiches orangestichiges Weiß |
| Halogenlampe | 3.000 K | Warmweiß |
| Kaltweißes Bürolicht | 4.000 K | Neutralweiß |
| Mittagssonne | 5.500 K | Klares Weiß |
| Bedeckter Himmel, sRGB-Weißpunkt D65 | 6.500 K | Leicht kühles Weiß |
| Schatten unter blauem Himmel | 10.000 K und mehr | Deutlich blau |

Typische Werte. Echte Quellen schwanken, und Lampen werden in Stufen wie 2.700 K und 4.000 K verkauft.

Etwa 1.900 K bis 10.000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)`

Ungefähre Bildschirmfarben von Licht, von der Kerze bis zum blauen Schatten. Deine Augen passen sich an jedes Licht an, deshalb wirkt ein Raum mit 2.700 K weiß, wenn du eine Weile darin bist.

Diese Anpassung ist für Bildschirme wichtig. Der sRGB-Standard, von dem die meisten Web- und App-Farben ausgehen, nutzt D65, etwa 6.500 K, als Weiß. Funktionen wie Nachtmodi verschieben das Weiß eines Displays ins Wärmere, sodass deine gewählten Farben für jemanden, der nachts liest, wärmer wirken. Gestalte für den Standard und akzeptiere die Abweichung.

## Warme, kühle und neutrale Farben

Abseits der Beleuchtung geht es bei Temperatur darum, zu welcher Seite des Farbkreises eine Farbe tendiert. Rot, Orange und Gelb wirken warm; Blau, Petrol und Blauviolett wirken kühl. Grün und Lila liegen in der Mitte und können in beide Richtungen gehen: Oliv ist warm, Mint ist kühl. [Warme und kalte Farben](https://gradiently.design/de/guide/warm-and-cool-colors) behandelt den Farbkreis ausführlich; nützlich ist hier, dass Temperatur auch innerhalb eines Farbtons gilt. Es gibt warme Blautöne und kühle Rottöne.

- Warmes Rot, Ziegel: #c2372b
- Kühles Rot, Himbeere: #c2185b
- Warmes Blau, Denim: #2b5d8a
- Kühles Blau, Kobalt: #2563eb
- Warmes Grün, Oliv: #7a8b3a
- Kühles Grün, Mint: #3fbf9f

Drei Farbtöne, jeweils in einer warmen und einer kühlen Version. Die warmen Rottöne tendieren zu Orange, die kühlen zu Blau; das gilt für jeden Farbton.

Temperatur leistet in einer Palette viel emotionale Arbeit, oft mehr als der Farbton selbst. Warme Schemata wirken nah, gesellig und energiegeladen; kühle Schemata wirken still, weit und kontrolliert. [Farbpsychologie](https://gradiently.design/de/guide/color-psychology) untersucht diese Assoziationen und ihre Grenzen. Temperatur wirkt auch mit der Intensität zusammen: Eine kühle Palette mit voller [Sättigung](https://gradiently.design/de/guide/color-saturation) wirkt nicht mehr ruhig, und eine warme, stark zurückgenommene beginnt, eher vintage als lebendig zu wirken.

## Auch Neutraltöne haben eine Temperatur

Reines Grau ist in gutem Design selten. Die meisten gut eingesetzten Grautöne tendieren leicht warm, zu Stein und Taupe, oder leicht kühl, zu Schiefer und Stahl. Beide Familien in einem Layout zu mischen wirkt oft trüb, ohne dass jemand weiß, warum. Wähle eine Familie und nutze sie durchgehend für Hintergründe, Rahmen und Sekundärtext.

- Warme Grautöne: Papier bis Umbra: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)`
- Kühle Grautöne: Frost bis Schiefer: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)`
- Echte neutrale Grautöne: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)`

Drei Grauverläufe. Stell ein warmes Grau neben ein kühles, und der Unterschied ist offensichtlich; für sich allein wirken beide einfach grau.

```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;
}
```

Ein warmer Grauverlauf als Tokens. Setz die kühlen Werte ein für eine klarere, technischere Wirkung.

Warme Neutraltöne passen zu Food, Gastgewerbe, Wellness und Editorial-Marken. Kühle Neutraltöne passen zu Software, Finanzen und allem, was präzise wirken soll. [Neutrale Farbpaletten](https://gradiently.design/de/guide/neutral-color-palettes) bietet weitere Sets.

## Warmes Licht, kühler Schatten

Maler wissen seit Langem, dass sich Licht und Schatten in der Temperatur unterscheiden, nicht nur in der Helligkeit. Sonnenbeschienene Flächen werden warm, während Schatten Blau vom Himmel aufnehmen. Bau das in einem Verlauf oder einer Illustration nach, und es wirkt sofort echter als eine helle und dunkle Version eines einzigen Farbtons. Es funktioniert auch umgekehrt: kühles Mondlicht mit warmen, lampenbeleuchteten Schatten.

Bei Hintergründen ist das der Unterschied zwischen einem Verlauf, der beleuchtet wirkt, und einem, der wie ein Farbmuster wirkt. Setz das warme Licht dorthin, wo das Auge zuerst hinsehen soll, lass die kühlen Töne sich an den Rändern sammeln und leg Text über den ruhigeren der beiden Bereiche. [Verlaufshintergrund](https://gradiently.design/de/guide/gradient-background) führt durch die ganze Methode.

- Abendlicht, blauer Schatten: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)`
- Mondlicht, warmes Dunkel: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)`
- Goldene Stunde bis Dämmerung: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)`

Verläufe, die Temperaturen kombinieren. Vergleiche sie mit einem einzigen Farbton von hell nach dunkel, der daneben flach wirkt.

Ein Cover im Magazinstil mit dem Titel Lange Abende, Sommerausgabe

Ein Sommercover. Die Temperatur bestimmt die Jahreszeit, bevor jemand die Worte liest.

Ein Cover im Magazinstil mit dem Titel Stille Morgen, Winterausgabe

Ein Wintercover mit demselben Layout. Lass warmes Licht, falls vorhanden, weit weg von den Worten liegen.

## Farbtemperatur in Fotos

Der Weißabgleich ist die Schätzung einer Kamera für die Temperatur des Lichts. Ein Foto unter warmen Lampen mit Tageslicht-Weißabgleich wird orange; eines im Schatten wird blau. Wenn Fotos neben Markenfarben stehen, passe ihre Temperatur an die Palette an. Eine warme Marke mit kalten, blauen Fotos wirkt zerrissen. Fotos in den Farben der Palette einzufärben ist eine weitere Lösung: siehe [Duotone-Fotos](https://gradiently.design/de/guide/photo-duotone-in-mark-colours).

### Vermeiden

- Warme und kühle Grautöne in einem Layout gemischt
- Kalte, blaue Fotos bei einer warmen Marke
- Ein einziger Farbton von hell nach dunkel für Tiefe
- Farbe unter einer warmen Schreibtischlampe beurteilen

### Machen

- Eine Neutraltonfamilie, überall genutzt
- Fotos an die Wärme der Palette angepasst
- Warmes Licht mit kühlem Schatten oder umgekehrt
- Farbe bei Tageslicht oder am kalibrierten Bildschirm prüfen

Gradiently Marks tragen Licht als Teil ihres Rezepts, daher wirken sie in jeder Größe, in der du gestaltest, wie eine beleuchtete Fläche statt wie ein flaches Farbmuster.

## FAQ

### Was ist Farbtemperatur im Design?

Sie beschreibt, ob eine Farbe oder ein Licht zu warm tendiert, Richtung Orange und Rot, oder zu kühl, Richtung Blau. Designer nutzen sie, um Stimmung und Tiefe zu erzeugen.

### Ist ein höherer Kelvinwert wärmer oder kühler?

Kühler wirkend. Höhere Kelvinwerte erzeugen blaueres Licht, daher wirken 6.500 K kühler als 2.700 K.

### Welche Farbtemperatur hat Tageslicht?

Mittagssonne liegt bei etwa 5.500 K und ein bedeckter Himmel bei etwa 6.500 K. Das sRGB-Standardweiß D65 liegt bei etwa 6.500 K.

### Was ist der Unterschied zwischen warmem und kühlem Grau?

Warmes Grau tendiert leicht zu Braun oder Beige; kühles Grau leicht zu Blau. Wähle eine Familie und nutze sie konsequent.