# Farbverlauf oder Vollfarbe? Wann welche Lösung gewinnt [Canonical HTML page](https://gradiently.design/de/guide/gradient-vs-flat-color) Vollfarbe ist klar, günstig und exakt. Farbverläufe sind lebendig, unverwechselbar und schwerer zu kontrollieren. Die meisten guten Marken nutzen beides. So entscheidest du, was jede Fläche braucht. ## The short version - Vollfarbe gewinnt dort, wo Klarheit, exakte Wiedergabe und kleine Größen zählen, etwa bei Icons, Bedienelementen, Hintergründen für Fließtext und einfarbigem Druck. - Farbverläufe gewinnen dort, wo eine Fläche Stimmung, Tiefe oder Eigenständigkeit braucht, etwa bei Hintergründen, Covern, Hero-Bereichen, Social-Posts und Markenflächen. - Der Kontrast eines Farbverlaufs ändert sich über seine Fläche, deshalb muss Text darauf an der ungünstigsten Stelle geprüft werden, nicht im Durchschnitt. - Die meisten starken visuellen Identitäten nutzen einen Farbverlauf als Signatur und eine daraus entnommene Vollfarbe als Alltagslösung. - Bildschirme schwenkten Anfang der 2010er von glänzenden, texturierten Stilen zu Flat Design und später zurück zu weicheren Verläufen, keines von beiden ist also einfach modern oder veraltet. Bei der Frage **Farbverlauf vs. Flat Design** gewinnt keine Seite überall. Vollfarbe ist klarer, lässt sich exakt reproduzieren und übersteht winzige Größen und einfarbigen Druck. Farbverläufe tragen Stimmung, deuten Licht und Tiefe an und geben einer Marke viel mehr Raum, unverwechselbar zu sein. Die praktische Antwort für die meisten Marken lautet: beides. Ein Farbverlauf, wo die Fläche groß und ausdrucksstark ist, und eine Vollfarbe aus diesem Verlauf, wo die Aufgabe klein, funktional oder in einer Druckfarbe gedruckt ist. - Violett als Vollfarbe: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)` - Violetter Farbverlauf: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)` Dasselbe Violett als Vollfläche und als Farbverlauf, der darum herum gebaut ist. Das eine ist eine Farbe, das andere eine Oberfläche mit Licht darauf. ## Wo Vollfarbe gewinnt - **Kleine Größen:** Favicons, App-Badges und Icons verlieren die Details eines Verlaufs, eine Vollfarbe bleibt scharf - **Bedienelemente:** Buttons, Schalter und Zustände lesen sich klarer, wenn jeder Zustand eine Farbe hat - **Hinter langem Text:** gleichbleibender Kontrast bedeutet, dass jede Zeile gleich gut lesbar ist - **Einfarbiger Druck:** Stickerei, Siebdruck, Gravur, Stempel und Aufträge mit einer Druckfarbe können keinen Übergang wiedergeben - **Exakte Abstimmung:** eine einzelne Sonderfarbe lässt sich über Materialien hinweg viel zuverlässiger treffen als ein Übergang - **Diagramme und Daten:** Vollfarben halten Kategorien klar getrennt und vergleichbar ## Wo Farbverläufe gewinnen - **Große Flächen:** Hintergründe, Cover, Hero-Bereiche und Poster, auf denen Vollfarbe leer wirkt - **Stimmung und Licht:** ein Übergang deutet eine Tageszeit, ein Material oder ein Leuchten an, was eine einzelne Farbe nicht kann - **Eigenständigkeit:** es gibt nur begrenzt viele unterscheidbare Einzelfarbtöne, und die meisten sind in jeder Branche vergeben - **Social Feeds:** eine gut gebaute Verlaufsfläche fällt in einem Strom aus Fotos und flachen Vorlagen auf - **Tiefe in Interfaces:** ein dezenter Verlauf auf einem Hero oder einer Hauptkarte trennt Ebenen ohne Schatten - **Bewegung:** Farbverläufe können treiben und atmen, siehe [animierte Farbverlauf-Hintergründe](https://gradiently.design/de/guide/animated-gradient-background) ## Farbverlauf vs. Vollfarbe, Punkt für Punkt | Faktor | Vollfarbe | Farbverlauf | | --- | --- | --- | | Lesbarkeit | Überall gleicher Kontrast | Kontrast schwankt, ungünstigste Stelle prüfen | | Wiedererkennung | Stark, wenn dir ein seltener Farbton gehört | Stark, wenn das Rezept konsistent bleibt | | Eigenständigkeit | Begrenzt durch die Zahl der Farbtöne | Riesiger Raum an Kombinationen | | Kleine Größen | Hervorragend | Oft matschig oder verloren | | Druck | Exakt, sogar mit einer Druckfarbe | Braucht Vierfarbdruck, kann Stufen zeigen oder kippen | | Interface-Zustände | Klar und vorhersehbar | Am besten auf ein oder zwei Akzentbereiche beschränkt | | Stimmung und Tiefe | Begrenzt | Hervorragend | | Dateigröße und Aufwand | Minimal | Klein in CSS, größer als Bild und Video | Vollfarbe ist der sicherere Standard für Funktion. Farbverläufe sind die stärkere Wahl für Ausdruck. ## Die Frage der Lesbarkeit Auf einem einfarbigen Hintergrund gilt: Besteht ein Wort den Kontrasttest, bestehen ihn alle. Auf einem Farbverlauf ändert sich der Kontrast mit der Farbe, eine Überschrift kann also an einem Ende perfekt lesbar sein und am anderen verschwinden. Miss den Kontrast immer an der hellsten Stelle hinter hellem Text oder an der dunkelsten Stelle hinter dunklem Text. Die ganze Methode steht in [Text auf Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) und [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility). Ein Hochformat-Post, bei dem eine Überschrift den hellen und den dunklen Teil eines Farbverlaufs kreuzt Ein Farbverlauf, der mitten durch die Wörter läuft: Der Kontrast ändert sich Buchstabe für Buchstabe. Derselbe Post mit einem ruhigeren, gleichmäßigeren Bereich des Farbverlaufs hinter der Überschrift Derselbe Farbverlauf macht Platz für die Wörter: Der Ausdruck bleibt, die Lesbarkeit kommt zurück. ## Kurze Geschichte: erst flach, dann wieder Verläufe In den 2000ern waren Bildschirme glänzend: abgeschrägte Buttons, gläserne Lichtkanten und Texturen, die Leder und Papier nachahmten. Anfang der 2010er wechselten große Betriebssysteme zu Flat Design, mit Vollfarben, einfachen Icons und ohne falsche Tiefe, und ein Großteil des Webs zog nach. Ab Mitte der 2010er kehrten weichere Verläufe zurück, nun als sanfte Übergänge aus zwei oder drei Farben statt als Glanzeffekte, und einige sehr sichtbare Marken-Icons stellten auf Farbverläufe um. Mehr dazu in [der Geschichte der Farbverläufe](https://gradiently.design/de/guide/history-of-gradients). Die Lehre daraus: Keiner der beiden Stile ist dauerhaft modern. Was ein Design altern lässt, ist die konkrete Umsetzung. Starker Glanz lässt einen Verlauf alt aussehen, eine Standardpalette eine Vollfarbe. ## So entscheidest du für jede Fläche 1. **Frag, wofür die Fläche da ist** Hilft sie Menschen beim Handeln, Lesen oder Vergleichen, tendiere zu Vollfarbe. Setzt sie eine Stimmung oder stellt die Marke vor, tendiere zum Farbverlauf. 2. **Prüf die Größe** Unterhalb von ungefähr Icongröße nimm Vollfarbe. Farbverläufe brauchen Platz, um ihren Übergang zu zeigen. 3. **Prüf, wie sie reproduziert wird** Eine Druckfarbe, Garn oder Gravur heißt Vollfarbe. Bildschirme und Vierfarbdruck können einen Farbverlauf tragen. 4. **Prüf die Wörter** Langer Text will einen einfarbigen oder sehr ruhigen Grund. Eine Überschrift kann auf einem Verlauf stehen, wenn der Kontrast an der ungünstigsten Stelle hält. 5. **Halte beides verwandt** Nimm deine Vollfarben aus deinem Farbverlauf, damit beides immer wie eine Marke aussieht. ### Vollfarbe für - Favicons, App-Badges und kleine Icons - Buttons, Schalter, Tabs und Formularzustände - Seiten mit Fließtext und Datentabellen - Stickerei, Stempel und Druck mit einer Farbe ### Farbverlauf für - Cover, Poster und Social-Posts - Website-Heros und Launch-Seiten - Markenflächen hinter Logos und Überschriften - Loops, Wallpaper und Präsentationsanfänge ## Nutze beides: ein Farbverlauf mit einfarbiger Alternative Die stärksten Systeme behandeln den Farbverlauf als Signatur und wählen ein oder zwei Vollfarben aus seinem Inneren für Alltagsaufgaben. Der tiefste Ton wird zur Text- oder Iconfarbe, ein mittlerer Ton zur Buttonfarbe, und der Verlauf selbst erscheint auf Covern, Heros und Posts. So bekommst du Ausdruck und Funktion ohne zwei unverbundene Paletten. [Branding mit Farbverläufen](https://gradiently.design/de/guide/gradient-branding) zeigt, wie das geht. - Tief: Text und Icons: #2e1065 - Haupt: Buttons, Alternative: #6d28d9 - Hell: Akzente: #c084fc - Tönung: ruhige Flächen: #f5f3ff Vollfarben aus dem violetten Farbverlauf oben. Jede hat eine Aufgabe, und zusammen passen sie immer zum Verlauf. Jeder Mark in Gradiently ist ein Farbverlauf mit eingebauter eigener Palette, die Vollfarben für Text, Buttons und kleine Größen kommen also aus demselben Rezept wie der Hintergrund. ## FAQ ### Ist Flat Design besser als Farbverläufe? Keines ist überall besser. Vollfarbe ist am besten für kleine Größen, Interfaces und einfarbigen Druck, Farbverläufe für große, ausdrucksstarke Flächen und Eigenständigkeit. ### Sind Farbverläufe veraltet? Nein. Schwere, glänzende Verläufe wirken veraltet, aber weiche Verläufe aus zwei oder drei Farben sind in aktuellen Markenidentitäten und Interfaces weit verbreitet. ### Sollte mein Logo ein Farbverlauf oder eine Vollfarbe sein? Viele Logos haben eine Verlaufsversion für große Bildschirmflächen und eine einfarbige Version für kleine Größen und Druck mit einer Farbe. Die einfarbige Version brauchst du in jedem Fall. ### Ist Text auf einem Farbverlauf schwerer zu lesen? Das kann sein, weil sich der Kontrast über den Verlauf ändert. Prüf den Kontrast an der ungünstigsten Stelle hinter dem Text oder halte einen ruhigen Bereich für Wörter frei. ### Kann ich Farbverläufe und Vollfarben zusammen nutzen? Ja, und die meisten starken Marken tun das. Nimm die Vollfarben aus dem Inneren des Farbverlaufs, damit alles zusammenpasst.