# Logo-Farbkombinationen, die funktionieren, mit Hex-Codes [Canonical HTML page](https://gradiently.design/de/guide/color-combinations-for-logos) Ein Logo muss ein Favicon, eine graue Kopie und einen Header im Dunkelmodus überstehen. Diese Paare und Dreiergruppen sind dafür gewählt, mit Codes und Kontrast, die du selbst prüfen kannst. ## The short version - Die meisten starken Logos nutzen eine oder zwei Farben, denn jede weitere Farbe macht das Zeichen schwerer klein, im Druck und auf wechselnden Hintergründen zu reproduzieren. - Ein gutes zweifarbiges Logo kombiniert eine dunkle Farbe mit einer hellen oder leuchtenden, damit die Formen auch dann klar bleiben, wenn man die Farben kaum unterscheiden kann. - Zwei Farben ähnlicher Helligkeit, etwa ein mittleres Rot und ein mittleres Blau, scheinen dort zu flimmern, wo sie sich berühren, und verlieren im Graudruck ihre Kante. - Jedes Logo sollte außerdem in einer einzigen Farbe funktionieren, in Schwarz und in Weiß, bevor irgendeine Farbe hinzukommt. - Die Farben eines Logos müssen nicht die ganze Markenpalette sein: Das Zeichen kann schlicht bleiben, während die Hintergründe darum die reichere Farbe tragen. Die **Logo-Farbkombinationen**, die am besten funktionieren, verbinden eine dunkle Farbe mit einer hellen oder leuchtenden, etwa Marineblau und Gold, Waldgrün und Creme oder Anthrazit und Limette. Der Helligkeitsunterschied hält die Formen in Favicon-Größe und in Graustufen lesbar, der Farbtonunterschied gibt dem Zeichen seine Persönlichkeit. Unten findest du zehn getestete Paare und drei Dreiergruppen mit Hex-Codes und Kontrastwerten, dann eine schnelle Methode, jede Kombination selbst zu prüfen. ## Warum Logos so wenige Farben nutzen Ein Logo ist das am häufigsten vervielfältigte, was ein Unternehmen besitzt. Es erscheint als 16-Pixel-Browsersymbol, aufgestickt auf einem Hemd, aufgestempelt auf einem Kaffeebecher und einfarbig gedruckt auf einem Kassenbon. Jede Farbe, die du hinzufügst, ist eine weitere Sache, die an einem dieser Orte schiefgehen kann. Deshalb sind so viele bekannte Zeichen einfarbig und die meisten übrigen zweifarbig. Beginne in Schwarz. Funktioniert die Form in Schwarz auf Weiß und Weiß auf Schwarz, kann Farbe nur helfen. Wenn nicht, rettet keine Kombination sie. [Grundlagen des Logodesigns](https://gradiently.design/de/guide/logo-design-basics) behandelt die Formseite; dieser Artikel setzt voraus, dass die Form feststeht. ## Zehn zweifarbige Logo-Kombinationen - Marineblau und Gold: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)` - Wald und Creme: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)` - Anthrazit und Limette: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)` - Pflaume und Blush: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)` - Burgunder und Sand: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)` - Tinte und Orange: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)` - Lila und Minze: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)` - Kobalt und Weiß: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)` - Schwarz und Signalrot: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)` - Petrol und Koralle: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)` Zehn Paare als harte Teilung gezeigt, so wie sie sich im Zeichen treffen. Klicke auf ein Farbfeld, um seinen Code zu kopieren. | Paar | Codes | Kontrast | Wirkt wie | | --- | --- | --- | --- | | Marineblau und Gold | `#14213d` `#fca311` | 7,9:1 | Etabliert, selbstsicher, ein wenig klassisch | | Wald und Creme | `#1b4332` `#f1e9da` | 9,2:1 | Natürlich, handwerklich, ruhig | | Anthrazit und Limette | `#2d2d2d` `#c6f432` | 10,7:1 | Energisch, sportlich, technisch | | Pflaume und Blush | `#4a1942` `#f7c8d0` | 9,4:1 | Warm, Beauty, Boutique | | Burgunder und Sand | `#6b0f1a` `#e9d8a6` | 8,7:1 | Tradition, Wein, Gastgewerbe | | Tinte und Orange | `#1c1917` `#f97316` | 6,2:1 | Praktisch, freundlich, Handwerk und Werkzeug | | Lila und Minze | `#5b21b6` `#a7f3d0` | 7,0:1 | Modern, verspielt, Software | | Kobalt und Weiß | `#1d4ed8` `#ffffff` | 6,7:1 | Klar, verlässlich, digital | | Schwarz und Signalrot | `#111111` `#e63946` | 4,5:1 | Kühn, dringlich, redaktionell | | Petrol und Koralle | `#0f766e` `#ff7f6e` | 2,2:1 | Lebendig, aber nur als aneinandergrenzende Formen, nie Text auf Text | WCAG-Kontrastverhältnisse zwischen den Paaren. Über 4,5:1 kann eine Farbe als Schrift auf der anderen stehen; niedrigere Paare sollten als Formen nebeneinander stehen. Beachte, dass Petrol und Koralle der Ausreißer ist. Beide Farben liegen in ähnlicher Helligkeit, korallenfarbene Buchstaben auf einem petrolfarbenen Abzeichen wären also schwer lesbar und würden im Schwarzweißdruck zu einem grauen Klecks. Das Paar funktioniert trotzdem, wenn die Farben getrennte Formen sind, etwa ein petrolfarbenes Symbol neben einer korallenfarbenen Wortmarke, jeweils auf Weiß oder dunklem Grund. Die Zahlen stammen aus der WCAG-Formel, die in [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt wird. ## Dreifarbige Logo-Kombinationen Drei Farben passen zu Zeichen aus getrennten Teilen: ein Symbol aus Kacheln, eine Wortmarke mit farbigem Punkt, ein Set aus Formen für eine Kindermarke. Verankere das Trio mit einer dunklen Farbe und wähle dann zwei, die sich im Farbton klar unterscheiden. Verteilst du sie um den Farbkreis, wie bei [Triadischen Farben](https://gradiently.design/de/guide/triadic-colors), konkurrieren sie nicht miteinander. - Tiefsee: #003049 - Mohn: #d62828 - Senf: #fcbf49 Primär, erwachsen. Ein dunkles Blau verankert ein Rot und ein Gelb, die sonst schreien würden. Gut für Schulen, Sport und Spielzeug, das sich an Eltern richtet. - Schieferpetrol: #264653 - Safran: #e9c46a - Gebranntes Koralle: #e76f51 Küstenwärme. Schieferpetrol trägt die Wortmarke; Safran und gebranntes Koralle füllen die Formen des Symbols. - Nacht: #10002b - Magenta: #f72585 - Cyan: #4cc9f0 Digital und laut. Magenta und Cyan leuchten vor einem fast schwarzen Anker, für Musik-, Gaming- und Nachtlebenzeichen. ## Logo-Farbkombinationen, die du vermeiden solltest ### Vermeiden - Mittleres Rot und mittleres Blau, die sich berühren: Sie scheinen zu flimmern - Reines Rot und reines Grün zusammen: für viele Farbenblinde schwer zu unterscheiden - Gelb oder blasse Pastelltöne auf Weiß: Das Zeichen verschwindet - Vier oder mehr gleich gewichtete Farben - Ein Verlauf als einzige Version des Logos ### Stattdessen - Eine der beiden Farben deutlich dunkler machen - Sie nach Helligkeit trennen, nicht nur nach Farbton - Blasse Farben auf dunklen Grund setzen oder umranden - Eine führende Farbe, ein oder zwei unterstützende - Zuerst eine flache Version, der Verlauf als Variante Verlaufslogos sind ein Sonderfall. Groß können sie hervorragend aussehen, aber im Druck zeigen sie Banding und in kleinen Größen verschwimmen sie. Behalte eine flache ein- oder zweifarbige Version und behandle den Verlauf als Variante; [Verlaufslogos](https://gradiently.design/de/guide/gradient-logo) erklärt, wie du beide baust. ## So testest du eine Logo-Farbkombination 1. **In Graustufen drucken** Wandle das Logo in Grau um. Werden beide Farben zum selben Grau, ist der Helligkeitsunterschied des Paars zu gering. 2. **Auf 16 Pixel verkleinern** Sieh es dir als Browser-Tab-Symbol an. Dünne Teile in einer blassen Farbe verschwinden zuerst. 3. **Umkehren** Setze das Logo auf deine dunkelste Markenfarbe und auf Weiß. Notiere, welche Farbe in jedem Fall getauscht werden muss. 4. **Farbenblindheit prüfen** Schick es durch einen Simulator für Farbenblindheit. Rot-Grün-Paare verschmelzen bei den häufigsten Formen der Farbenblindheit oft. 5. **Auf einen echten Hintergrund setzen** Ein Logo liegt in der Praxis selten auf reinem Weiß. Teste es auf einem Foto, einem Verlauf und in einem vollen Feed. Ein quadratisches Design mit dem Wort Hafen über einem Verlauf, wobei Teile der Buchstaben darin verschwinden Eine Wortmarke, die direkt über einen lebhaften Hintergrund läuft, kann Teile ihrer Buchstaben verlieren. Dasselbe quadratische Design, bei dem der Hintergrund hinter dem Wort Hafen ruhiger ist, sodass jeder Buchstabe lesbar bleibt Dieselbe Wortmarke mit einem Hintergrund, der dahinter ruhiger und tiefer wird. Dieser letzte Test ist der, an dem viele Logos scheitern. [Ein Logo auf einen Verlaufshintergrund setzen](https://gradiently.design/de/guide/logo-on-gradient-background) behandelt die Techniken. In Gradiently weiß ein Mark, wo Worte und Logo sitzen: Seine ruhigste Region wandert hinter sie, und Automatische Farbe wählt pro Zeile hell oder dunkel aus der eigenen Palette des Marks, sodass ein schlichtes zweifarbiges Logo ohne Kasten dahinter auf einem reichen Hintergrund sitzen kann. ## Das Logo schlicht halten und die Marke reich sein lassen Das Logo muss nicht jede Farbe tragen, die deine Marke nutzt. Viele Marken halten das Zeichen in einer oder zwei Farben und legen die Tiefe in Hintergründe, Fotografie und Schrift. Wenn du als Nächstes die größere Palette wählst, bietet [Markenfarben-Ideen](https://gradiently.design/de/guide/brand-color-ideas) 30 zum Start, und [Berühmte Verlaufslogos](https://gradiently.design/de/guide/famous-gradient-logos) zeigt, wie etablierte Marken ein schlichtes Zeichen mit ausdrucksstarker Farbe ausbalancieren. ## FAQ ### Welche Farbkombination ist die beste für ein Logo? Das eine beste Paar gibt es nicht, aber eine dunkle Farbe mit einer hellen oder leuchtenden, etwa Marineblau und Gold oder Wald und Creme, funktioniert fast überall, weil die Formen klar bleiben. ### Wie viele Farben sollte ein Logo haben? Bei den meisten Logos eine oder zwei. Drei können bei Zeichen aus getrennten Teilen funktionieren, aber jede weitere Farbe erschwert Druck und kleine Größen. ### Welche Farben sollte man in einem Logo nicht zusammen verwenden? Vermeide gleich helle Farben, die sich berühren, etwa mittleres Rot und mittleres Blau, und verlass dich nicht auf Rot neben Grün, das viele Farbenblinde nicht trennen können. ### Sollte ein Logo in Schwarzweiß funktionieren? Ja. Ein Logo sollte in einer Farbe, in Schwarz und in Weiß funktionieren, bevor Farbe hinzukommt, denn es wird einfarbig gedruckt und gestempelt. ### Kann ein Logo ein Verlauf sein? Kann es, aber behalte für kleine Größen, Stickerei und Einfarbdruck eine flache Version und nutze den Verlauf dort, wo er Platz hat.