# Farbpaletten für Tech-Marken jenseits von Konzernblau [Canonical HTML page](https://gradiently.design/de/guide/tech-color-palettes) Blau sagt vertrauenswürdig, und das Blau jeder anderen Tech-Firma sagt dasselbe. Hier sind acht Paletten mit echten Codes, die trotzdem nach Software wirken, und die Struktur, mit der jede davon im Produkt funktioniert. ## The short version - Eine funktionierende Tech-Farbpalette hat fünf Teile: einen dunklen Grund, einen hellen Grund, eine neutrale Graustufenleiter, einen Markenakzent und einen Satz Statusfarben. - Blau dominiert das Branding in der Technik, weil es ruhig und zuverlässig wirkt, und genau deshalb macht ein blauer Akzent eine Tech-Marke selten von allein wiedererkennbar. - Der Akzent ist der Teil einer Tech-Palette, an den man sich erinnert, deshalb sollte er eine Farbe sein, die deine Kategorie noch nicht besetzt. - Statusfarben für Erfolg, Warnung und Fehler sollten konventionell bleiben, auch wenn der Markenakzent ungewöhnlich ist, weil Nutzer sich beim Handeln auf sie verlassen. - Jede Kombination aus Text und Hintergrund in einer Produktpalette sollte den WCAG-Kontrast erfüllen, mindestens 4,5:1 für Fließtext. Eine gute **Tech-Farbpalette** dreht sich weniger um eine Heldenfarbe als um ein System: einen dunklen Grund, einen hellen Grund, eine Leiter neutraler Grautöne, einen Akzent, der dir gehört, und konventionelle Farben für Erfolg, Warnung und Fehler. Konzernblau besetzt den Akzentplatz bei so vielen Softwarefirmen, dass es nichts Bestimmtes mehr bedeutet. Tausch den Akzent gegen etwas, das deine Kategorie nicht besetzt, halte den Rest diszipliniert, und die Marke wirkt trotzdem wie kompetente Technik. ## Warum Tech-Marken immer wieder Blau wählen Blau ist sicher. Es wirkt in den meisten Märkten ruhig und verlässlich, sitzt bequem in Interfaces und ist die Standard-Linkfarbe des Webs. Das sind gute Gründe, und das Ergebnis ist ein Meer fast identischer Blautöne in Banking-Apps, Cloud-Dashboards und Produktivitätstools. [Farbpsychologie](https://gradiently.design/de/guide/color-psychology) erklärt die Assoziationen; das Problem ist nur, dass alle gleichzeitig danach gehandelt haben. Nichts davon heißt, dass Blau falsch ist. Es heißt, dass Blau nicht deine einzige Idee sein kann. Wenn du es behältst, kombiniere es mit einem unerwarteten Grund, einer zweiten Farbe oder einem markanten Material, damit die Identität auch ohne Logo erkennbar ist. ## Acht Tech-Farbpaletten mit Hex-Codes Jede Palette unten hat einen Grund, einen unterstützenden Ton und einen Akzent. Sie sind als Verläufe geschrieben, damit du siehst, wie die Farben zusammenwirken, und für die zwei, die im Produkt-UI am härtesten arbeiten, in Farbfelder aufgeteilt. - Nachttinte und Säuregrün: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)` - Graphit und Signalorange: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)` - Papier und Kiefer: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)` - Mitternachtsviolett und Pink: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)` - Tiefes Petrol und Minze: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)` - Kühles Weiß und Elektroblau: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)` - Espresso und Bernstein: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)` - Schwarz und sanftes Immergrünblau: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)` Acht Ausgangspunkte. Sieh, wie viel der Grund leistet: Derselbe Akzent wirkt auf Schwarz wie ein Entwicklertool und auf Papier wie eine ruhige Produktivitäts-App. - **Nachttinte und Säuregrün** passt zu Entwicklertools und Infrastruktur: technisch, nächtlich, unmöglich mit einer Bank zu verwechseln. - **Graphit und Signalorange** wirkt wie Hardware, Robotik oder alles Physische. Orange trägt außerdem gut auf dunkler Produktfotografie. - **Papier und Kiefer** ist die leise Option für Forschungs-, Schreib- und Gesundheitssoftware, wo Ruhe mehr zählt als Tempo. - **Mitternachtsviolett und Pink** passt zu Consumer-Apps und Kreativtools, die Energie wollen ohne den Standardverlauf von Blau zu Lila. - **Tiefes Petrol und Minze** funktioniert für Klima-, Daten- und Fintech-Marken, die frisch statt konzernhaft wirken wollen. - **Kühles Weiß und Elektroblau** behält Blau, macht es aber lebendig und einzigartig, mit fast nichts drumherum. - **Espresso und Bernstein** ist warm und in der Technik ungewöhnlich, gut für Software in Gastronomie und Hotellerie, Audio und alles, was den Menschen zuerst stellt. - **Schwarz und sanftes Immergrünblau** ist zurückhaltend und hochwertig, nah an dem Look, auf den sich viele KI-Produkte zubewegen. - Nachttinte: #0b1020 - Schiefernavy: #1e2a4a - Nebelgrau: #8a94a8 - Wolke: #eef1f6 - Säuregrün: #c6f432 Nachttinte und Säuregrün als Arbeitsset: zwei Gründe, ein mittleres Grau für Sekundärtext und der Akzent. Das Grün wird pro Bildschirm für einen Button und ein Highlight genutzt, nie für Fließtext auf Weiß. ## Die fünf Teile einer Produktpalette Marketingseiten kommen mit drei Farben aus. Ein Produkt nicht, denn Interfaces brauchen Rahmen, deaktivierte Zustände, Highlights und Hinweise. Plane diese Rollen, bevor du Abstufungen wählst, dann bleibt die Palette stimmig, während das Produkt wächst. | Rolle | Was sie macht | Beispiel | | --- | --- | --- | | Dunkler Grund | App-Hintergrund im Dark Mode, Footer, Hero-Bereiche | `#0b1020` | | Heller Grund | App-Hintergrund im Light Mode, Dokumente, E-Mail | `#fafaf7` | | Neutrale Leiter | Text, Rahmen, Trennlinien, deaktivierte Zustände, in 8 bis 10 Stufen | `#f2f4f7` bis `#111827` | | Markenakzent | Primäre Buttons, Links, das eine, worauf man drücken soll | `#c6f432` | | Statusfarben | Erfolg, Warnung, Fehler, Information | Grün, Bernstein, Rot, Blau | Erst die Rollen, dann die Abstufungen. Die meisten Produkte brauchen viel mehr Grautöne als Markenfarben. > **Halte Statusfarben langweilig** Ein ungewöhnlicher Akzent ist eine Markenentscheidung. Eine ungewöhnliche Fehlerfarbe ist ein Usability-Problem. Rot für Fehler und Grün für Erfolg sollten erkennbar bleiben, auch wenn du ihren genauen Ton passend zu deinem Akzent abstimmst. ## Eine Tech-Palette in Design Tokens verwandeln Benenne Farben nach Rolle, nicht nach Aussehen. Ein Token namens `--accent` überlebt ein Rebranding; ein Token namens `--lime` wird zur Lüge, sobald sich der Akzent ändert. Definiere jede Rolle einmal für den Light Mode und einmal für den Dark Mode und lass Komponenten nur auf Rollen verweisen. ```css :root { --ground: #fafaf7; --surface: #ffffff; --text: #111827; --text-muted: #4b5563; --border: #d9dde3; --accent: #3344ff; --on-accent: #ffffff; --success: #15803d; --warning: #b45309; --danger: #b91c1c; } @media (prefers-color-scheme: dark) { :root { --ground: #0b1020; --surface: #141a2e; --text: #eef1f6; --text-muted: #8a94a8; --border: #1e2a4a; --accent: #c6f432; --on-accent: #0b1020; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; } } ``` Rollen-Tokens für beide Modi. Der Akzent darf zwischen den Modi wechseln: Elektroblau auf Weiß, Säuregrün auf Nachttinte, solange sich beides wie dieselbe Marke anfühlt. Im Dark Mode werden Tech-Paletten beurteilt, weil Entwickler und Power-User oft darin leben. [Dark-Mode-Design](https://gradiently.design/de/guide/dark-mode-design) behandelt die Details, etwa den Grund leicht von reinem Schwarz abzuheben und Statusfarben aufzuhellen, damit sie nicht flimmern. Für Verläufe, die auf modernen Bildschirmen lebendig bleiben, lohnt ein Blick auf [CSS-Gradient mit oklch](https://gradiently.design/de/guide/css-gradient-oklch). ## Prüfe den Kontrast vor dem Release Helle Akzente wie Säuregrün, Minze und Bernstein sehen auf dunklen Gründen wunderbar aus und fallen als Text auf Weiß durch. WCAG verlangt 4,5:1 für Fließtext und 3:1 für großen Text und Interface-Elemente. Teste jede Kombination, die du nutzen willst, und schreib auf, welche erlaubt sind. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) hat die vollständige Methode. ### Vermeiden - Grüner oder mintfarbener Text auf einer weißen Seite - Ein Akzent für Buttons, Links, Diagramme und Überschriften zugleich - Reinschwarzer Grund mit reinweißem Text überall - Statusfarben so an die Marke angepasst, dass Rot orange wirkt ### Machen - Helle Akzente als Flächen mit dunklem Text darauf - Eine Aufgabe für den Akzent: die primäre Aktion - Ein leicht angehobener dunkler Grund und gebrochen weißer Text - Konventionelle Statusfarben, nur im Ton abgestimmt ## Die Palette über das Interface hinaus tragen Launch-Posts, Konferenzfolien und Changelog-Grafiken machen aus einer Tech-Palette eine Marke. Flache Flächen im Akzent wiederholen sich schnell, gib der Marketingseite also eine reichere Oberfläche: die Grundfarbe mit durchscheinendem Licht, Körnung, ein langsames Treiben des Akzents. [SaaS-Branding](https://gradiently.design/de/guide/saas-startup-branding) und [Fintech-Branding](https://gradiently.design/de/guide/fintech-branding) zeigen, wie das in zwei sehr unterschiedlichen Kategorien aussieht. Eine Launch-Grafik im Querformat, die Deploys in vier Sekunden ankündigt, jetzt in der Beta Ein Launch-Bild in der LinkedIn-Linkgröße 1200×627, bei dem der Hintergrund die Marke trägt und die Worte kurz bleiben. Ein Social Post im Hochformat, der Version 3 eines Softwareprodukts ankündigt Dasselbe System als Feed-Post im Hochformat mit 1080×1350. Hier passt Gradiently. Ein Mark gibt einer Tech-Marke einen lebendigen Hintergrund, mit dem nur du exportieren kannst, sobald du ihn sicherst, er rendert in jeder Größe vom Linkbild bis zur Folie und hält Release Notes lesbar, indem er seine ruhigste Fläche hinter die Worte schiebt. Du kannst auch den Designer um einen Launch-Post bitten, und er macht dir die anderen Größen. ## FAQ ### Welche Farben eignen sich am besten für eine Tech-Firma? Jede Farbe funktioniert, wenn die Palette eine klare Struktur hat: zwei Gründe, eine neutrale Leiter, ein Akzent und konventionelle Statusfarben. Wähle einen Akzent, den deine Wettbewerber noch nicht nutzen. ### Warum nutzen so viele Tech-Firmen Blau? Blau wirkt ruhig und zuverlässig und sitzt bequem in Interfaces. Weil so viele Firmen es aus denselben Gründen gewählt haben, macht ein blauer Akzent allein eine Marke selten wiedererkennbar. ### Wie viele Farben sollte eine SaaS-Palette haben? Meist einen Markenakzent, eine neutrale Graustufenleiter mit 8 bis 10 Stufen, zwei Gründe und vier Statusfarben. Produkte brauchen viele Grautöne und sehr wenige Markenfarben. ### Kann ein heller Akzent wie Säuregrün in einer Tech-Marke funktionieren? Ja, besonders auf dunklen Gründen. Nutze ihn als Fläche mit dunklem Text darauf statt als Text auf Weiß, wo er den Kontrast nicht erfüllt.