# Farbverlauf-Logo: wann es funktioniert und wann flach besser ist [Canonical HTML page](https://gradiently.design/de/guide/gradient-logo) Ein Verlauf kann ein Logo auf dem Bildschirm lebendig machen und auf einer Visitenkarte auseinanderfallen lassen. So entscheidest du, wie du eines baust, das besteht, und welche flache Version du immer brauchst. ## The short version - Ein Farbverlauf-Logo funktioniert am besten auf Bildschirmen, in mittleren und großen Größen und mit einer einfachen, kräftigen Form. - Jedes Farbverlauf-Logo braucht eine einfarbige Version für kleine Größen, einfarbigen Druck, Stickerei, Gravur und Stempel. - Logo-Verläufe wirken am besten als kurze Mischungen zwischen benachbarten Farbtönen ähnlicher Helligkeit, die auch klein leuchtend bleiben. - Gestalte das Logo zuerst in Vollschwarz. Wenn die Form flach nicht funktioniert, rettet sie auch ein Verlauf nicht. - Viele Marken halten das Logo flach und legen den Verlauf stattdessen in ihre Hintergründe, was dieselbe Energie mit weniger Fehlerquellen bringt. Ein **Farbverlauf-Logo** funktioniert, wenn das Logo hauptsächlich auf Bildschirmen lebt, in mittleren oder großen Größen erscheint und eine kräftige, einfache Form hat, die auch in einer einzigen flachen Farbe lesbar bleibt. Es hat Probleme bei winzigen Größen, im einfarbigen Druck, auf Stickerei und überall, wo Farbe begrenzt ist. Die Regel ist also einfach: Ein Farbverlauf-Logo ist als Hauptversion in Ordnung, aber du musst immer eine flache Version haben, und die Form muss zuerst ohne den Verlauf funktionieren. Farbverlauf-Logos wurden häufig, als Marken zuerst für Smartphones gestalteten, wo Farbe leuchtet und Bildschirme Mischungen gut wiedergeben. Unser Blick auf [berühmte Farbverlauf-Logos](https://gradiently.design/de/guide/famous-gradient-logos) behandelt die bekannten Beispiele. Dieser Leitfaden hilft dir zu entscheiden, ob dein Logo eines sein sollte, und es gut zu machen, wenn ja. ## Wann ein Farbverlauf-Logo funktioniert Ein Verlauf verdient seinen Platz in einem Logo, wenn er etwas hinzufügt, das flache Farbe nicht kann: ein Gefühl von Licht, von Bewegung oder von mehreren Dingen, die zusammenkommen. Am besten funktioniert er unter diesen Bedingungen. - **Zuerst Bildschirme.** App-Icons, Websites, Social-Avatare und Video, wo Farbe hinterleuchtet ist und Mischungen sich weich darstellen. - **Mittlere und große Größen.** Eine Mischung braucht Platz. Bei ein paar Millimetern Breite wirkt sie wie eine schlammige Farbe. - **Einfache, massive Formen.** Ein Kreis, ein kräftiger Buchstabe oder ein dickes Symbol gibt dem Verlauf eine Fläche, über die er wandern kann. Dünne Linien geben ihm keinen Raum. - **Zwei oder drei nahe Farben.** Kurze Mischungen zwischen benachbarten Farbtönen bleiben leuchtend. Lange Reisen quer über den Farbkreis werden in der Mitte grau. - **Eine Marke, die schon Verläufe nutzt.** Dann wiederholt das Logo die Sprache der übrigen Identität, statt die einzige Mischung weit und breit zu sein. - Bernstein zu Koralle: `linear-gradient(135deg, #ffb347 0%, #ff6f61 100%)` - Petrol zu Blau: `linear-gradient(135deg, #14b8a6 0%, #2563eb 100%)` - Violett zu Magenta: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)` - Limette zu Smaragd: `linear-gradient(135deg, #a3e635 0%, #059669 100%)` Logotaugliche Mischungen: benachbarte Farbtöne in ähnlicher Stärke, sodass die Farbe auch bei kleinem Logo sauber bleibt. Komplementärpaare wie Orange zu Blau werden in der Mitte tendenziell grau, siehe [schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients). ## Wo Farbverlauf-Logos scheitern Die meisten Orte, an denen ein Logo erscheint, sind kein Smartphone-Bildschirm. Bevor du dich festlegst, liste auf, wohin dein Logo tatsächlich kommt, und prüfe jeden Ort anhand dieser Tabelle. | Wo | Was mit einem Verlauf passiert | Stattdessen nutzen | | --- | --- | --- | | Browser-Tab-Icon | Zu klein, um die Mischung zu sehen, wirkt wie ein Fleck | Flaches Symbol in einer Farbe | | Einfarbiger Druck, Stempel, Kassenbons | Lässt sich gar nicht drucken | Vollschwarz oder eine Farbe | | Stickerei und Webetiketten | Garn lässt sich nicht weich mischen | Flache Version in ein oder zwei Garnfarben | | Lasergravur, Prägung | Überhaupt keine Farbe | Nur die Form | | Kleiner Druck (Visitenkarten, Etiketten) | Mischungen können Streifen bilden oder fleckig wirken | Flache Farbe oder ein kurzer, im Druck getesteter Verlauf | | Auf einem Verlaufshintergrund | Zwei Mischungen kämpfen gegeneinander | Einfarbig weiße oder dunkle Version | Steht der Großteil deiner Liste auf der rechten Seite dieser Tabelle, ist ein flaches Logo das bessere Original. Druck ist nicht unmöglich, nur anspruchsvoll. [Farbverläufe drucken](https://gradiently.design/de/guide/print-gradients) zeigt, wie du weiche Mischungen auf Papier bekommst. Und für die letzte Zeile siehe [ein Logo auf einen Verlaufshintergrund setzen](https://gradiently.design/de/guide/logo-on-gradient-background). ## So gestaltest du ein Farbverlauf-Logo, das besteht 1. **Gestalte die Form in Vollschwarz** Jedes Logo sollte zuerst als Silhouette funktionieren. Wenn es in Schwarz auf Weiß in kleiner Größe nicht erkennbar ist, verdeckt ein Verlauf das Problem nur. 2. **Wähle eine kurze Mischung** Nimm zwei oder drei benachbarte Farbtöne mit ähnlicher Helligkeit. Teste die Mitte: Sieht sie grau oder braun aus, verschiebe eine Farbe oder füge einen Zwischenstopp hinzu. 3. **Lege die Richtung mit Absicht fest** Diagonale Mischungen von oben links nach unten rechts sind am häufigsten. Eine Richtung, die zur Form passt, etwa von unten nach oben bei etwas, das aufsteigt, gibt dem Verlauf einen Grund, da zu sein. 4. **Wähle die einfarbige Ersatzfarbe** Nimm eine Volltonfarbe aus der Mischung, oft nahe der Mitte, die Menschen als dieselbe Marke lesen. Das ist die Farbe für kleine Größen und einfarbige Nutzung. 5. **Erstelle das ganze Set** Verlauf, flache Farbe, einfarbig Weiß und einfarbig Schwarz. Teste jede Version in Avatargröße, auf dunklen und hellen Hintergründen und gedruckt. 6. **Schreibe die Regeln auf** Halte die genauen Stopps, den Winkel und die Ersatzfarbe in deinem [Styleguide](https://gradiently.design/de/guide/brand-style-guide) fest, damit niemand den Verlauf nach Augenmaß nachbaut. - Startstopp: Violett: #7c3aed - Endstopp: Magenta: #db2777 - Ersatzfarbe: Mitte: #ab30b2 - Einfarbig hell: #ffffff - Einfarbig dunkel: #1a1026 Ein vollständiges Farbset für ein Farbverlauf-Logo: die zwei Stopps, eine einfarbige Ersatzfarbe aus der Mitte der Mischung und helle und dunkle einfarbige Versionen. ## Farbverlauf-Logo oder Farbverlauf-Hintergrund Viele Marken ziehen den Nutzen eines Verlaufs, ohne ihn überhaupt im Logo zu haben. Das Logo bleibt flach und scharf, und der Verlauf lebt in den Hintergründen von Posts, Verpackung und Website. Das Logo muss nie mit kleinen Größen oder Druckgrenzen kämpfen, und der Verlauf wird trotzdem Teil dessen, woran man dich erkennt. [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-branding) geht auf diesen Ansatz genauer ein. Ein quadratisches Design mit einer weißen Wortmarke „Northlight“ auf einem satten Farbverlauf Eine flache weiße Wortmarke mit dem Verlauf dahinter: in jeder Größe scharf, und die Farbe erledigt trotzdem die Arbeit der Marke. Ein breites Banner mit der Wortmarke Northlight in Weiß auf demselben Verlauf, für einen Header angelegt Dieselbe Paarung auf einem breiten Header. Das Logo ändert sich nie, der Verlauf wird für die Form gerendert. ## Ein Farbverlauf-Logo in SVG bauen Im Web sollte ein Farbverlauf-Logo ein SVG mit darin definiertem Verlauf sein, damit es in jeder Größe scharf bleibt. [SVG-Farbverläufe](https://gradiently.design/de/guide/svg-gradients) behandelt die Möglichkeiten vollständig. ```html ``` Gib dem Verlauf eine eindeutige id. Teilen sich zwei Inline-SVGs auf einer Seite eine id und das erste ist ausgeblendet, kann das zweite in manchen Browsern seine Füllung verlieren. > **Der Blinzeltest** Sieh dir dein Farbverlauf-Logo in Avatargröße an und blinzle. Siehst du eine einzige flache Farbe, ist das deine natürliche Ersatzfarbe. Siehst du Matsch, ist die Mischung zu lang. ## FAQ ### Sind Farbverlauf-Logos eine gute Idee? Sie können es sein, für Marken, die hauptsächlich auf Bildschirmen leben und eine kräftige, einfache Logoform haben. Sie brauchen eine einfarbige Version für kleine Größen und Druck. ### Wie mache ich eine flache Version eines Farbverlauf-Logos? Wähle eine Volltonfarbe aus der Mischung, meist nahe der Mitte, die Menschen als dieselbe Marke lesen, und erstelle außerdem einfarbig weiße und einfarbig schwarze Versionen. ### Kann man ein Farbverlauf-Logo drucken? Ja, im Vierfarbdruck in vernünftiger Größe, aber nicht im einfarbigen Druck, in Stickerei oder Gravur. Teste kleine gedruckte Größen auf Banding, bevor du dich festlegst. ### Welche Farben ergeben ein gutes Farbverlauf-Logo? Zwei oder drei benachbarte Farbtöne ähnlicher Helligkeit, etwa Bernstein zu Koralle oder Petrol zu Blau. Gegensätzliche Farben werden in der Mitte tendenziell grau. ### Sollte mein Logo ein Farbverlauf sein, wenn meine Marke Verläufe nutzt? Nicht unbedingt. Viele Marken halten das Logo flach und legen den Verlauf in ihre Hintergründe, was dieselbe Wiedererkennung mit weniger Problemen bei kleinen Größen bringt.