# Warme und kalte Farben: Farbtemperatur bewusst einsetzen [Canonical HTML page](https://gradiently.design/de/guide/warm-and-cool-colors) Jede Farbe hat eine Temperatur, auch deine Grau- und Weißtöne. Lerne sie zu lesen, und du kannst ein Design näher, ruhiger oder heller wirken lassen, ohne einen einzigen Farbton zu ändern. ## The short version - Warme und kalte Farben sind die zwei Hälften des Farbkreises: Rot, Orange und Gelb wirken warm, Grün, Blau und Violett wirken kalt. - Temperatur ist relativ, deshalb wirkt ein Violett neben Blau warm und neben Orange kalt. - Warme Farben wirken eher nah und energisch, kalte Farben treten eher zurück und beruhigen, deshalb sehen ferne Hügel in Landschaften blau aus. - Auch Grau und Weiß haben eine Temperatur, und warme und kalte Neutraltöne versehentlich zu mischen, ist ein häufiger Grund, warum ein Design leicht falsch wirkt. - Ein Farbverlauf von warm nach kalt bleibt sauber, wenn er durch einen gemeinsamen Nachbarn wie Pink oder Violett läuft statt durch Grau. **Warme und kalte Farben** sind die zwei Hälften des Farbkreises. Rot, Orange und Gelb wirken warm, wie Feuer und Sonnenlicht; Grün, Blau und Violett wirken kalt, wie Wasser, Schatten und Abend. Temperatur verändert, wie ein Design wirkt, bevor irgendjemand etwas liest: Warme Farben treten hervor und geben Energie, kalte Farben treten zurück und beruhigen. Sie bewusst einzusetzen, ist einer der schnellsten Wege, eine Palette gewollt wirken zu lassen. - Warmes Rot: #d7263d - Warmes Orange: #f46036 - Warmes Gelb: #f7b32b - Kaltes Grün: #2e9e6f - Kaltes Blau: #1b7fbd - Kaltes Violett: #5b3cc4 Drei warme und drei kalte Farben von gegenüberliegenden Seiten des Farbkreises. Die Grenze verläuft ungefähr zwischen Gelbgrün und Rotviolett. ## Temperatur ist relativ Die Grenze zwischen warm und kalt ist nicht fest. Gelbgrün und Rotviolett sitzen genau darauf, und jede Farbe wirkt neben einer kälteren wärmer. Ein Magenta neben Himmelblau wirkt warm; dasselbe Magenta neben Orange wirkt kalt. Deshalb solltest du Temperatur in der Palette beurteilen, nicht Farbfeld für Farbfeld. - Magenta neben Blau: warm: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)` - Magenta neben Orange: kalt: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)` Dasselbe Magenta jeweils rechts. Seine Temperatur ändert sich mit seinem Nachbarn. Farben haben auch *innerhalb* eines Farbtons eine Temperatur. Ein Rot, das zu Orange neigt, ist wärmer als ein Rot, das zu Blau neigt, und ein Blau mit einem Hauch Grün ist wärmer als eines, das zu Violett neigt. Designer nennen diese Neigung den Unterton, und er ist der Grund, warum sich zwei „Rottöne“ beißen. ## Wie warme und kalte Farben Tiefe erzeugen Warme Farben scheinen eher hervorzutreten, kalte eher zurückzuweichen. Landschaftsmaler nutzen das seit Jahrhunderten: Luft streut Licht, also sehen ferne Hügel wirklich blauer und blasser aus, und unsere Augen lesen kalt und blass als weit weg. Denselben Effekt kannst du im flachen Design nutzen. | Eigenschaft | Warme Farben | Kalte Farben | | --- | --- | --- | | Raum | Treten hervor, wirken nah | Weichen zurück, wirken fern | | Energie | Aktiv, dringlich, gesellig | Ruhig, stetig, konzentriert | | Am besten für | Buttons, Preise, Überschriften, Essen | Hintergründe, große Flächen, Daten, Gesundheit | | In großen Mengen | Können laut oder heiß wirken | Können kühl oder distanziert wirken | | Beim Licht | Niedrige Kelvin, wie eine 2700-K-Glühbirne | Hohe Kelvin, wie bedecktes Tageslicht | Tendenzen, keine Gesetze. Sättigung und Helligkeit können die Temperatur übertrumpfen: Ein blasses Pfirsich weicht stärker zurück als ein elektrisches Blau. Die praktische Regel: Setz kalte Farben in große Hintergrundflächen und spar warme Farben für das, was den Betrachter zuerst erreichen soll. Ein warmer Call to Action auf einer kalten Seite fällt auf, ohne groß sein zu müssen, und passt damit gut zur [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule). ## Warme und kalte Neutraltöne Grau, Weiß und Schwarz tragen ebenfalls eine Temperatur, und sie zählt mehr, als man erwartet. Ein warmes Gebrochenweiß wirkt wie Papier; ein kaltes Weiß wie ein Bildschirm oder eine Klinik. Ein Design, das einen warmgrauen Hintergrund mit kaltgrauem Text mischt, wirkt oft leicht falsch, ohne dass jemand sagen könnte, warum. - Warmes Papier: #f5efe6 - Warmer Stein: #b8ada0 - Warmes Anthrazit: #3d3530 - Kalter Nebel: #eef2f6 - Kalter Schiefer: #a3adb8 - Kaltes Anthrazit: #2b3240 Warme Neutraltöne neigen zu Braun und Creme, kalte zu Blau. Wähle für ein ganzes Design eine Familie. ```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; } ``` Wenn Neutraltöne in benannten warmen und kalten Sätzen stehen, fällt versehentliches Mischen im Code-Review sofort auf. ## Warm und kalt in einem Farbverlauf mischen Verläufe von warm nach kalt gehören zu den eindrucksvollsten überhaupt, Sonnenuntergänge beweisen es. Sie gehen aber auch am ehesten schief, weil warme und kalte Farben oft gegenüber auf dem Farbkreis liegen und eine direkte Mischung zwischen ihnen durch Grau läuft. Die Lösung: Führ die Mischung durch eine Farbe, die zu beiden Seiten gehört, meist Pink, Magenta oder Violett. - Orange zu Blau, direkt: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)` - Orange zu Blau über Pink: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)` - Dämmerung: oben kalt, unten warm: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)` - Gelb zu Grün über Limette: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)` Die direkte Mischung sackt in eine matte Mitte ab. Die anderen laufen durch einen gemeinsamen Nachbarn, also ist jeder Punkt unterwegs eine echte Farbe. [Matschige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) erklärt die Geometrie. Auch hier zählen die Anteile. Lass eine Temperatur führen und die andere als Kontrast erscheinen. Ein überwiegend kalter Verlauf mit warmem Leuchten an einem Rand wirkt wie Abendlicht; eine gleichmäßige Teilung zwischen warm und kalt wirkt unentschieden. [Sonnenuntergang-Farbverläufe](https://gradiently.design/de/guide/sunset-gradient) zeigt viele weitere Beispiele, in denen sich warm und kalt eine Fläche teilen. ## Warme und kalte Farben im Design-Alltag - **Eine Menütafel im Café:** warmer Cremegrund, Schrift in Espressobraun und ein Terrakotta-Akzent, damit sie sich anfühlt wie der Raum, in dem sie hängt - **Eine Banking-App:** kalte Flächen in Schiefer und Blau, mit einem warmen Bernstein für Hinweise, die Aufmerksamkeit brauchen - **Ein Poster für ein Nachtevent:** tiefe, kalte violette Fläche mit einer warmen orangefarbenen Überschrift, die nach vorn springt - **Ein Hautpflege-Launch:** kalter Nebel und Salbei, angehoben durch ein einziges warmes Pfirsich für den Produktnamen - **Eine Sport-Promo:** warmes Rot und Orange führen, ein kaltes Marineblau nur fürs Kleingedruckte In jedem Fall bestimmt eine Temperatur das Klima, und die andere lenkt die Aufmerksamkeit. Diese Paarung ist auch eine sanfte Form des Kontrasts von [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors), ohne den vollen Zusammenprall echter Gegensätze. ## Eine Temperatur für deine Marke wählen 1. **Vom Gefühl ausgehen** Einladende, lebhafte und zupackende Marken neigen meist zu warm. Präzise, ruhige und vertrauenswürdige Marken neigen meist zu kalt. Keins ist besser; wähl das, was zu deiner Arbeit passt. 2. **Eine führende Temperatur wählen** Bau den Großteil deiner Palette, auch die Neutraltöne, auf einer Seite auf. Das gibt der Marke ein einheitliches Klima. 3. **Einen Akzent von der anderen Seite hinzufügen** Ein einziger warmer Akzent bei einer kalten Marke oder ein kalter bei einer warmen gibt Kontrast und einen klaren Landeplatz für das Auge. 4. **Im Kontext testen** Prüf die Palette auf den echten Bildschirmen und Materialien, auf denen sie leben wird. Farben verschieben sich zwischen Bildschirmen und noch einmal im Druck; siehe [Markenfarben wählen](https://gradiently.design/de/guide/how-to-choose-brand-colors). ## FAQ ### Was sind warme und kalte Farben? Warme Farben sind Rot, Orange und Gelb; kalte Farben sind Grün, Blau und Violett. Die Grenzfarben Gelbgrün und Rotviolett können je nach Nachbarn in beide Richtungen wirken. ### Ist Lila warm oder kalt? Das hängt von seiner Neigung und seinen Nachbarn ab. Rotlila und Magenta wirken neben Blau warm, Blauviolett wirkt kalt, und jedes Lila wirkt neben Orange kalt. ### Treten warme Farben wirklich hervor? Sie wirken meist näher, besonders wenn sie gesättigt sind, während kalte, blasse Farben eher zurückweichen. Helligkeit und Sättigung können den Effekt übertrumpfen. ### Kann man warme und kalte Farben in einem Design mischen? Ja. Lass eine Temperatur führen, nutze die andere als Akzent und mische in Verläufen über einen gemeinsamen Nachbarn wie Pink oder Violett, um eine graue Mitte zu vermeiden.