Analoge Farben: Paletten, Hex-Codes & UI-Beispiele (2026)

# Analoge Farben: Eine ruhige, stimmige Palettenstrategie

Analoge Farben sind drei bis fünf Farbtöne, die direkt nebeneinander auf dem Farbkreis liegen — etwa Blau, Blaugrün und Grün. Sie teilen einen zugrundeliegenden Ton, also harmonieren sie ohne zu kollidieren. Designer greifen zu ihnen, wenn ein Layout ruhig, stimmig oder natürlich wirken soll, statt laut und kontrastreich. Dieser Leitfaden geht speziell auf analoge Farben ein: was sie sind, acht sofort einsetzbare Paletten mit Hex-Codes, wo sie glänzen, wo sie scheitern und wie du in unter einer Minute deine eigene baust. Für die vollständige Theorie, wie jedes Schema auf dem Kreis zusammenhängt, siehe unseren Farbtheorie-Leitfaden.

Was ein Farbschema analog macht

Ein analoges Farbschema verwendet Nachbarn. Wähle eine beliebige Farbe auf einem 12-Speichen-Kreis und nimm dann die zwei oder drei Plätze auf jeder Seite. Weil jeder Schritt Pigment mit dem letzten teilt, liest dein Auge die Gruppe als eine Familie.

Deshalb wirken analoge Paletten harmonisch. Es gibt keinen entgegengesetzten Farbton, der mit dem dominanten kämpft. Kontrast entsteht aus Helligkeit (hell vs. dunkel) und Sättigung, nicht aus dem Farbton — ideal für Naturszenen, ruhige Marken und Verläufe.

Drei Farben wirken kompakt und kontrolliert. Fünf geben dir eine längere Rampe für Verläufe und Illustrationen.

8 sofort nutzbare analoge Paletten

Jede Palette unten ist ein funktionierendes Set aus Hex-Codes, das du heute in Figma, Tailwind oder CSS einfügen kannst. Verwende die erste Farbe als deine Dominante, den Rest als unterstützende Töne.

1. Sunset (warm)

#F94144 #F3722C #F8961E #F9C74F

Rot in Orange in Gelb. Verwende es für Reise-, Food- und Lifestyle-Marken, die Energie ohne Neon wollen.

2. Ocean (kühl)

#0077B6 #0096C7 #00B4D8 #48CAE4

Reines Blau, das in Cyan übergeht. Perfekt für SaaS, Fintech und alles, was als „ruhig und vertrauenswürdig" gelesen werden soll.

3. Forest

#386641 #6A994E #A7C957 #F2E8CF

Tiefes Grün zu Gelbgrün mit einem cremefarbenen Off-Ton. Großartig für Outdoor-Marken, Wellness-Apps und redaktionelle Seiten.

4. Lavender Mist

#3A0CA3 #7209B7 #B5179E #F72585

Violett, das in Magenta übergeht. Liest sich kreativ und modern — verbreitet in Beauty, Gaming und Lifestyle.

5. Autumn Earth

#582F0E #7F4F24 #936639 #A68A64

Braun in Tan in Ocker. Verwende es für Hautpflege, Food und jede Marke, die ein warmes, geerdetes Gefühl sucht.

6. Citrus

#FFBA08 #FAA307 #F48C06 #E85D04

Gelb in tiefes Orange. Laut, aber nicht chaotisch — eine starke Wahl für Essenslieferung und Fitness.

7. Berry

#7B2D26 #A63A50 #D33F49 #E8505B

Wein in Rot in Koralle. Redaktionell und selbstbewusst; funktioniert gut für Restaurants und mutige Lifestyle-Marken.

8. Dawn

#264653 #2A9D8F #8AB17D #E9C46A

Türkis, das durch Grün zu Gold wandert. Die breiteste der acht — nützlich, wenn du eine längere Verlaufsrampe brauchst.

Wie analoge Schemata in der Praxis funktionieren

Der Trick, eine analoge Palette absichtlich und nicht matschig wirken zu lassen, ist Hierarchie. Du verwendest nicht alle vier Farben gleichermaßen.

Wähle eine Dominante, dann 1–2 unterstützende

Wähle eine Farbe, die 60 % der Fläche trägt — meist die gesättigste. Such einen oder zwei Nachbarn als unterstützende Töne für Karten und sekundäre Buttons. Die restlichen werden zu Akzenten.

Das 60-30-10-Verhältnis (mit einem Akzent-CTA)

Designer nutzen eine 60-30-10-Aufteilung. Deine Dominante deckt Hintergründe ab. Die unterstützende Farbe deckt Blöcke und Überschriften ab. Der dritte Ton übernimmt Details. Der Kontrast bleibt natürlicherweise niedrig — gut für Stimmung, schlecht für einen „Jetzt kaufen"-Button, der knallen muss.

Die Lösung: Borg dir einen Akzent von außerhalb der Familie. Ein einzelner Komplementärton oder Neutral-Pop reicht. Wir behandeln diesen Tradeoff im Artikel zu Komplementärfarben.

Wo sie glänzen

• Naturszenen und Illustration. Sonnenuntergänge, Wälder und Seestücke sind von Natur aus analog.
• Beruhigende Markensysteme. Wellness-, Finanz- und Meditations-Apps lehnen sich aus gutem Grund an diese Schemata.
• Verlaufshintergründe. Ein dreistufiger Verlauf durch Nachbarn sieht weich aus. Unser Leitfaden zu Verlaufshintergründen zeigt das CSS.

Wo sie scheitern

Der größte Fallstrick ist Kontrast. Hellgelber Text auf einem leicht dunkleren gelben Hintergrund mag in Figma hübsch wirken, aber an WCAG-Farbkontrast für Barrierefreiheit scheitern. Teste Fließtext mit einem Kontrast-Checker. Liegt das Verhältnis unter 4,5:1, tausch einen Ton gegen einen dunkleren oder helleren Nachbarn.

Analoge Farbschemata in bekannten Marken

Reale Beispiele machen die Theorie greifbar.

• Mailchimp verwendet Gelb, das in Orange übergeht, für seine Kernillustrationen — pures analoges Citrus.
• FedEx kombiniert Lila mit einem blauvioletten Schriftzug, zwei Schritte voneinander entfernt auf dem Kreis.
• Spotify umgibt sein grünes Logo mit Türkis- und Limettenverläufen über Marketingflächen hinweg.
• BPs Sonnenstrahl-Logo fließt von Gelb über Gelbgrün zu Grün.
• Firefox wandert von Rotorange über Orange in Gelb auf seinem Fuchs.
• Starbucks sitzt in einer reinen Grün-Familie mit dunkleren Forest-Akzenten — ein enges dreifarbiges analoges Set.

Beachte das Muster: Wenn eine Marke zugänglich oder natürlich wirken will, wählt sie Nachbarn. Will sie scharf und dringlich wirken (denk an Target, Coca-Cola), wählt sie stattdessen Gegensätze.

Wie du analoge Farben findest

Du musst dir den Kreis nicht merken. Du brauchst nur einen Ausgangsfarbton.

Der Farbkreis-Walkthrough

Öffne einen beliebigen 12-Speichen-Kreis und wähle deine Dominante. Schiebe zwei oder drei Plätze nach links und rechts — das sind deine Nachbarn. Für die vollständige Aufschlüsselung von Primär-/Sekundär-/Tertiärfarben führt dich unser Farbtheorie-Hub von Grund auf durch den Kreis.

Tool-Walkthrough

Schneller als Plätze zu zählen: Nutze einen Generator. Unser kostenloser Farbpalettengenerator hat einen analogen Modus — wirf irgendeinen Hex-Code rein und er liefert vier Nachbarn in den richtigen Abständen zurück.

Um eine Palette aus einem Foto zu ziehen (Sonnenuntergang, Wald, Ozean), nutze den Farbpaletten-Extraktor. Für exakte Hex-Codes aus einem Screenshot erledigt das der Farbwähler mit einem Klick.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Variationen: warm, kühl und entsättigt

Innerhalb der analogen Familie hast du drei nützliche Geschmacksrichtungen.

Warm-analog läuft durch Rot, Orange und Gelb. Energetisch, aber nicht aggressiv. Gut für Food, Fitness und Lifestyle.

Kühl-analog läuft durch Grün, Blau und Violett. Beruhigend und professionell. Gut für Finanzen, Gesundheit und B2B SaaS.

Entsättigt-analog zieht die Sättigung um 30–50 % runter. Oft funktioniert das besser als die lebendige Version — reine Paletten können cartoonhaft wirken, während gedämpfte redaktionell wirken.

Analog vs. komplementär vs. monochromatisch

Drei der häufigsten Farbschemata, nebeneinander:

Jedes Schema hat seine eigenen Stärken. Für den Tiefgang zu den anderen beiden siehe die Artikel zu Komplementärfarben und monochromatische Farbpalette. Sie teilen sich einen Hub mit diesem Leitfaden: Farbtheorie.

Profi-Tipp: Paletten aus Screenshots ziehen

Du entdeckst ein analoges Schema in freier Wildbahn — eine Website, ein Magazin, ein Produktfoto — fang es ein und jag es durch einen Paletten-Extraktor. ScreenSnap Pro ist ein einmaliger Kauf für 29 $ und übernimmt Aufnahme und schnelle Annotation in einem Schritt, sodass du die Referenz erfasst, die wichtigen Stellen markierst und sie an ein Paletten-Tool fütterst, ohne zwischen Apps zu springen. Funktioniert auf Mac und Windows.

Häufig gestellte Fragen

Was ist ein analoges Farbschema?

Ein analoges Farbschema verwendet drei bis fünf Farben, die direkt nebeneinander auf dem Farbkreis liegen. Weil jede Farbe Pigment mit ihrem Nachbarn teilt, liest sich die Gruppe als eine harmonische Familie — ruhig, stimmig und angenehm fürs Auge.

Wie viele Farben sollten in einem analogen Schema sein?

Drei bis fünf. Drei wirken kompakt und kontrolliert (gut für enge UI-Arbeit). Fünf geben dir eine breitere Rampe für Verläufe und Illustrationen. Über fünf hinauszugehen, bricht meist die „Nachbar"-Regel und wirkt verwaschen.

Analog vs. komplementär — was ist der Unterschied?

Analoge Farben sind Nachbarn auf dem Kreis; Komplementärfarben sind Gegensätze. Analoge Schemata wirken ruhig und einheitlich. Komplementäre Schemata wirken kühn und kontrastreich. Verwende analog für Stimmung und Atmosphäre; verwende komplementär, wenn ein CTA knallen muss. Siehe unseren Leitfaden zu Komplementärfarben für die vollständige Aufschlüsselung.

Was sind die besten analogen Paletten für Naturthemen?

Forest (#386641 #6A994E #A7C957) für Waldszenen, Ocean (#0077B6 #0096C7 #00B4D8) für Wasser und Sunset (#F94144 #F3722C #F8961E) für warme Himmel. Alle drei ziehen direkt aus realem Licht, weshalb sie als natürlich gelesen werden.

Warum wirken analoge Farben harmonisch?

Weil sie einen zugrundeliegenden Farbton teilen. Blaugrün und Grün enthalten beide Grünpigment, also muss dein Auge nicht zwischen ihnen umschalten. Es gibt keine entgegengesetzte Farbe, die visuelle Spannung erzeugt — der Kontrast kommt aus Hell/Dunkel statt aus dem Farbton.

Kann ich nur zwei analoge Farben verwenden?

Zwei Nachbarn zählen technisch, aber der Effekt ist schwach — die meisten Designer würden das kein analoges Schema nennen. Mit nur zwei Farbtönen verlierst du das Verlaufsgefühl, das analoge Paletten besonders macht. Bleib bei mindestens drei.

Wie füge ich Kontrast zu einer analogen Palette hinzu?

Zwei Wege. Erstens: Variiere die Helligkeit aggressiv — pair einen tiefen Marineton mit einem blassen Mintton, beide bleiben analog. Zweitens: Borg dir eine Akzentfarbe von außerhalb der Familie für Buttons und Warnhinweise. Ein kleiner Spritzer eines komplementären Farbtons reicht aus, um deinen CTAs den nötigen Punch zu geben, ohne die ruhige Stimmung zu brechen.

Zusammenfassung

Analoge Paletten sind das einfachste Schema, das man gut bauen kann. Wähl eine dominante Farbe, nimm ihre Nachbarn, achte auf den Kontrast für die Barrierefreiheit und borg dir einen Akzent von außen, wenn ein CTA knallen soll. Die acht Paletten oben sind sofort einsatzbereit.

Mehr darüber, wie alle Schemata zusammenpassen, findest du in unserem Farbtheorie-Hub. Zum sofortigen Experimentieren probier den Farbpalettengenerator oder zieh Paletten aus echten Fotos mit dem Farbpaletten-Extraktor. Für tieferen Hintergrund siehe den Wikipedia-Eintrag zu analogen Farben, den Farbrechner des Sessions College und Adobes Farbkreis. Für eine breitere Einführung lohnt sich die Farbtheorie-Seite der Interaction Design Foundation.