Wie ich meine Farbpalette entwickelt habe
Rot, Grün und das Braun das entsteht, wenn beides zusammenkommt – hinter meiner Website-Palette steckt mehr als Geschmack. Eine Geschichte über Logos, Bedeutung und den Weg von der Idee zum konsistenten CSS-System.
Am Anfang war das Logo
Die meisten Website-Farben entstehen, indem man ein bisschen herumprobiert, irgendeinen Farbgenerator öffnet und sich dann für etwas entscheidet das „irgendwie passt". So war es bei mir lange auch.
Bei dieser Seite wollte ich es anders machen. Ich habe zuerst ein Logo entworfen – in Illustrator, mit klarer Absicht – und erst aus dem Logo die Farben abgeleitet. Nicht umgekehrt.
Das klingt nach einer kleinen Unterscheidung. Aber sie verändert alles: Wenn die Farben eine Geschichte haben, eine Bedeutung, einen Ursprung – dann sind sie keine willkürliche Entscheidung mehr. Dann verteidigt man sie, wenn jemand fragt. Dann weicht man nicht ab, wenn man unsicher ist.
Farben ohne Bedeutung sind austauschbar. Farben mit Geschichte bleiben.
Drei Farben, drei Bedeutungen
Mein Logo hat drei Ausgangspunkte – und jeder steht für etwas Konkretes in meinem Leben und meiner Arbeit.
Das Braun ist dabei das Klügste an der ganzen Palette. Es ist nicht einfach eine dritte Farbe – es ist die Synthese der beiden anderen. Wer das Logo sieht und die Geschichte kennt, versteht sofort: hier gehört etwas zusammen, das auf den ersten Blick nicht zusammenzupassen scheint. Technik und Garten. n8n und Natur. Und dazwischen: Erde.
Eine gute Farbpalette braucht keine sieben Farben. Sie braucht einen Anker, einen Kontrast und eine Verbindung. Drei Farben mit klarer Bedeutung schlagen zwanzig zufällige.
Die fertige Palette
Aus den drei Ursprungsfarben entstand durch Adobe Color und viel Ausprobieren ein vollständiges System – mit Nuancen für genug Kontrast auf der Seite, ohne die Grundstimmung zu verlassen.
Keine dieser Farben ist zufällig. Die Grau-Nuancen mit ihrem warmen Unterton halten die Neutraltöne im gleichen Farbklima wie Braun und Grün – ein kühles Grau würde die Palette sofort auseinanderreißen. Das Cremeweiß als Hintergrund ist wärmer als reines Weiß, was den Seiten eine angenehmere Atmosphäre gibt.
Das CSS-System dahinter
Eine schöne Palette nützt nichts, wenn man die Farben später überall einzeln einträgt. Das führt zu Inkonsistenzen, zu Tippfehlern, und zu einer Stunde Arbeit wenn man später einen Ton anpassen will.
Die Lösung sind CSS-Variablen – einmal definiert im Root-Element, überall verwendbar. Ich vergebe dabei keine technischen Namen wie color-1, sondern semantische: was macht diese Farbe, wo wird sie eingesetzt?
/* Hauptfarben */
--accent: #7c5c3a; /* Braun – Akzent, Links, Highlights */
--accent-dark: #5a3e22; /* Dunkelbraun – Überschriften */
--accent-light: #F7F5F0; /* Cremeweiß – Hintergründe, Badges */
--green: #3d6b4f; /* Grün – Tipp-Boxen, Erfolg */
--green-light: #dceade; /* Hellgrün – Hintergrund Tipp-Boxen */
/* Neutrale Töne */
--ink: #86917c; /* Olivgrau – Fließtext */
--muted: #5a5650; /* Dunkelgrau – Sekundärtext */
--faint: #9a958f; /* Grau-warm – Meta, Labels */
--rule: #ddd8d0; /* Linien, Borders */
--paper-warm: #F7F5F0; /* Seitenhintergrund */
}
Nie --farbe-braun – immer --accent. Der Name beschreibt die Rolle, nicht den Farbton. Wenn du die Palette irgendwann änderst, tauschst du nur die Werte – der Rest der Website folgt automatisch.
Der Weg dorthin – Tools und Prozess
Früher war das Entwickeln einer Farbpalette eine stunden- manchmal tagelange Angelegenheit. Man probierte in Photoshop, exportierte, schaute im Browser nach, stellte fest dass es doch nicht stimmt, fing von vorne an.
Heute ist der Prozess kürzer – aber nicht weniger durchdacht. Die Werkzeuge haben sich verändert, die Fragen sind dieselben geblieben.
Früher hat man eine Palette entwickelt, sie in Photoshop angewendet und gehofft dass es im Browser auch so aussieht. Heute kann man mit KI in Minuten testen wie eine Farbe auf verschiedenen Unterseiten wirkt – auf Karten, in Navigationen, als Hintergrund. Das spart nicht nur Zeit, es führt zu besseren Entscheidungen.
Was ich beim Umgang mit Farbe gelernt habe
Nach Jahren mit wechselnden Projekten und Paletten haben sich ein paar Prinzipien herauskristallisiert, die ich immer wieder anwende:
Fazit
Meine Farbpalette ist keine Design-Entscheidung – sie ist eine persönliche Aussage. Rot für die Technik, Grün für die Natur, Braun für das was entsteht wenn beides zusammenkommt. Wer meine Seite sieht, sieht nicht nur Farben. Er sieht einen kleinen Teil davon, wer ich bin.
Das klingt vielleicht pathetisch. Aber ich glaube, dass gutes Webdesign genau das leisten kann – und sollte. Nicht als Selbstzweck, sondern weil Dinge mit Geschichte beständiger sind als Dinge ohne.
Die beste Farbpalette ist die, die man nicht erklären muss – und die man trotzdem erklären kann, wenn jemand fragt.