Farben sind das mächtigste Werkzeug im Webdesign. Sie entscheiden darüber, ob jemand deiner Marke vertraut, auf den Button klickt oder deine Seite nach drei Sekunden wieder verlässt. Klingt dramatisch? Ist es auch. Studien zeigen, dass bis zu 90 % aller ersten Urteile über ein Produkt oder eine Website allein auf der Farbgestaltung basieren.
Und trotzdem wird Farbe im Webdesign oft stiefmütterlich behandelt. „Mach mal irgendwas in Blau“ – kennst du das? Das muss aber gar nicht sein!
In diesem Leitfaden bekommst du alles, was du über Farbenlehre im Webdesign wissen musst. Von den historischen Grundlagen über Farbkreis und digitale Farbmischung bis hin zu Dark Mode, Barrierefreiheit und modernen CSS-Funktionen wie OKLCH und color-mix() – Farbpsychologie und Harmonielehre streife ich dabei kurz und verlinke dir die passenden Artikel dazu. Dazu praktische Tools, Code-Beispiele und jede Menge Erfahrungen aus meinem eigenen Workflow. Egal ob du gerade deine erste Website baust oder als Freelancer schon hunderte Projekte umgesetzt hast – hier ist für jeden was dabei.
Und das Beste: Seit CSS Color Level 4 und 5 sind Möglichkeiten nativ im Browser verfügbar, die früher Sass oder JavaScript erforderten. Die Farblandschaft im Web hat sich radikal verändert. Zeit, dass du das für dich nutzt!
Das Wichtigste in Kürze:
- OKLCH ist der neue CSS-Standard – wahrnehmungsgleichmäßig, P3-fähig und von Tailwind CSS v4 als Default übernommen
- Moderne CSS-Formate wie OKLCH machen Kontrastberechnungen zuverlässiger, weil Helligkeitswerte der menschlichen Wahrnehmung entsprechen
- Barrierefreiheit ist EU-Pflicht – seit Juni 2025 gilt der European Accessibility Act mit WCAG 2.1 AA
- Kulturelle Unterschiede beachten – Weiß bedeutet in China Trauer, Rot steht für Glück
- Dark Mode richtig gestalten – kein reines Schwarz (#121212 statt #000000), Farben entsättigen
- Moderne CSS-Features nutzen –
color-mix(), relative Farbsyntax undlight-dark()ersetzen Sass
Grundlagen der Farbenlehre – Von Newton bis OKLCH
Bevor wir ins Webdesign eintauchen, brauchen wir ein solides Fundament. Die Farbenlehre hat eine faszinierende Geschichte, die direkt beeinflusst, wie wir heute am Bildschirm mit Farben arbeiten. Keine Sorge – ich halte es kurz und praxisrelevant.
Isaac Newton und das Prisma
Die Story beginnt im 17. Jahrhundert mit einem jungen Physiker namens Isaac Newton. Er ließ einen Sonnenstrahl durch ein Glasprisma fallen und zerlegte weißes Licht erstmals in sein sichtbares Spektrum: Rot, Orange, Gelb, Grün, Blau, Indigo und Violett. Das Geniale daran: Mit einem zweiten Prisma bewies er, dass das Licht nicht vom Prisma „gefärbt“ wird, sondern bereits aus diesen Bestandteilen zusammengesetzt ist.
1704 veröffentlichte Newton „Opticks“ und präsentierte darin den ersten Farbkreis – ein kreisförmiges Diagramm mit sieben Segmenten, angeordnet in Analogie zur musikalischen Oktave. Damit war der Grundstein gelegt: Farbe ist eine physikalische Eigenschaft des Lichts, und Komplementärfarben lassen sich geometrisch im Kreis darstellen. Auf genau diesem Prinzip der Lichtaddition basiert heute jeder digitale Bildschirm – von deinem Smartphone bis zum 4K-Monitor.
Goethes Gegenentwurf
Johann Wolfgang von Goethe veröffentlichte 1810 „Zur Farbenlehre“ und wählte einen komplett anderen Ansatz. Wo Newton Farbe als objektive Wellenlänge verstand, betonte Goethe die subjektive Wahrnehmung. Sein berühmter Satz: „Die Farben sind Taten des Lichts, Taten und Leiden.“
Goethe stellte einen symmetrischen Farbkreis mit sechs Feldern vor und – das ist für uns Webdesigner besonders spannend – er verband jeder Farbe emotionale Begriffe. Er unterteilte Farben in eine „Plus-Seite“ (Gelb, Orange, Rot – heiter, erregend) und eine „Minus-Seite“ (Blau, Violett – kühl, sehnsuchtsvoll). Damit legte Goethes Farbenlehre den Grundstein für die gesamte Farbpsychologie, die heute im Branding und Webdesign so zentral ist.
Wissenschaftlich wurde Goethes Erklärung des Lichts zwar schnell widerlegt, aber sein Einfluss auf die Farbwirkung reicht von Turner über Wassily Kandinsky bis zur Bauhaus-Schule. Und wenn du heute einem Kunden erklärst, warum sein CTA-Button besser in Orange als in Grau sein sollte – dann baust du unbewusst auf Goethes Arbeit auf.
Johannes Itten und die sieben Farbkontraste
Johannes Itten (1888–1967), Schweizer Maler und Bauhaus-Lehrer, definierte sieben fundamentale Farbkontraste — vom Farbe-an-sich-Kontrast bis zum Simultankontrast. Sein Hauptwerk Kunst der Farbe (1961) ist bis heute ein Standardwerk der Gestaltungslehre. Die sieben Kontraste bilden das theoretische Rückgrat für jede Farbentscheidung im Design.
Alle sieben Kontraste mit visuellen Beispielen und praktischen Anwendungen für Webdesign erklären wir ausführlich in unserem Farbkontraste-Artikel.
Ostwald, Munsell und die Brücke zur Moderne
Der Nobelpreisträger Wilhelm Ostwald entwickelte zu Beginn des 20. Jahrhunderts ein streng messbares Farbsystem. Seine Idee: Farben nach der menschlichen Farbwahrnehmung ordnen, nicht nur nach physikalischen Wellenlängen. Klingt bekannt? Genau – diese Logik nimmt moderne Farbräume wie OKLCH konzeptionell vorweg.
Albert Munsell schuf 1905 mit „A Color Notation“ das erste System, das Farbton (Hue), Helligkeit (Value) und Sättigung (Chroma) als unabhängige Dimensionen trennte – der direkte Vorläufer aller modernen Farbmodelle, mit denen du heute arbeitest.
Der Farbkreis und digitale Farbmischung
Primär-, Sekundär- und Tertiärfarben
Der klassische Farbkreis nach Johannes Itten basiert auf den Primärfarben Rot, Gelb und Blau (RYB). Durch Mischung zweier Primärfarben entstehen die Sekundärfarben:
| Primärfarbe A | Primärfarbe B | Sekundärfarbe |
|---|---|---|
| Rot | Gelb | Orange |
| Gelb | Blau | Grün |
| Blau | Rot | Violett |
Mischst du eine Primärfarbe mit ihrer angrenzenden Sekundärfarbe, erhältst du sechs Tertiärfarben wie Gelborange, Rotorange, Rotviolett, Blauviolett, Blaugrün und Gelbgrün. Das ergibt den vollen 12-teiligen Farbkreis, den du in Tools wie Adobe Color oder Coolors wiederfindest.
Im digitalen Kontext arbeitest du nicht mit dem RYB-Farbkreis der Malerei, sondern mit dem RGB-Farbkreis. Die Grundfarben sind hier Rot, Grün und Blau, die Sekundärfarben Cyan, Magenta und Gelb. Der Unterschied ist fundamental, weil er auf zwei komplett verschiedenen Mischprinzipien basiert.
Additive vs. subtraktive Farbmischung
Das ist einer der Punkte, die du wirklich verstanden haben musst, wenn du im Web arbeitest.
Additive Farbmischung (RGB) funktioniert lichtbasiert. Dein Bildschirm ist eine aktive Lichtquelle: Jedes Pixel besteht aus roten, grünen und blauen Subpixeln mit jeweils 256 Intensitätsstufen (0–255). Das ergibt rund 16,7 Millionen mögliche Farben. Der Ausgangspunkt ist Schwarz (kein Licht). Je mehr Farbe du „addierst“, desto heller wird es. Alle drei Grundfarben bei voller Power? Weißes Licht.
Subtraktive Farbmischung (CMYK) ist das Gegenteil. Hier arbeiten Pigmente und Tinten, die Lichtwellen absorbieren und den Rest reflektieren. Ausgangspunkt ist Weiß (das Papier reflektiert alles). Mehr Tinte bedeutet weniger Reflexion, also dunklere Farben. Theoretisch ergibt die Kombination aller Farben Schwarz – praktisch wird’s ein matschiges Dunkelbraun, weshalb Schwarz (Key) als vierte Farbe separat gedruckt wird.
Warum ist das wichtig? Weil der CMYK-Farbraum deutlich kleiner ist als RGB. Hochgesättigte, leuchtende Farben, die auf deinem Monitor brillant wirken, können im Druck einfach nicht reproduziert werden. Wenn du also Corporate-Design-Farben entwickelst, die sowohl digital als auch gedruckt funktionieren sollen, musst du das von Anfang an bedenken.
Farbmodelle im Webdesign – Wann nutzt du welches?
Hier wird’s richtig praxisrelevant. Denn mit dem falschen Farbmodell machst du dir das Leben unnötig schwer.
RGB / HEX – Das native Format aller Bildschirme. RGB-Werte (z.B. rgb(255 102 0)) oder der kompakte Hexadezimalcode (z.B. #FF6600). Weit verbreitet, universell unterstützt, aber: Für Menschen kaum lesbar. Wenn du eine Farbe beim Hover-Effekt um 10 % abdunkeln willst, erfordert das im RGB-Raum komplexe Berechnungen, die manuell nicht intuitiv lösbar sind.
HSL (Hue, Saturation, Lightness) – Wurde lange als bevorzugtes CSS-Format empfohlen, weil es intuitiver ist: Der Farbton als Winkel auf dem Farbkreis (0° = Rot, 120° = Grün, 240° = Blau), Sättigung und Helligkeit als Prozentwerte. Das Problem: HSL ist nicht wahrnehmungsgleichmäßig. Gelb bei 50 % Lightness wirkt deutlich heller als Blau bei 50 % – obwohl der Wert identisch ist. Das macht die automatisierte Erstellung barrierefreier Farbpaletten mittels HSL quasi unmöglich.
OKLCH (Lightness, Chroma, Hue) – Und hier kommt der Gamechanger. OKLCH ist ein perzeptuell uniformer Farbraum, der exakt nachahmt, wie dein Auge Licht und Kontrast verarbeitet. Gleiche L-Werte sehen tatsächlich gleich hell aus, egal welcher Farbton. Das bedeutet: Du kannst programmatisch perfekte Paletten generieren, bei denen mathematisch garantiert ist, dass sie den gleichen Kontrastwert zum Hintergrund haben. Tailwind CSS v4 hat deshalb alle Standardfarben auf OKLCH umgestellt. Dazu unterstützt OKLCH den erweiterten Display-P3-Farbraum mit rund 50 % mehr darstellbaren Farben als sRGB.
| Eigenschaft | RGB / HEX | HSL | OKLCH |
|---|---|---|---|
| Logik | Hardware-basiert | Zylindrische Annäherung | Wahrnehmungsbasiert |
| Lesbarkeit | Sehr gering | Mittel | Sehr hoch |
| Barrierefreiheit | Manuelle Prüfung nötig | Fehleranfällig | Perfekt für algorithmische Kontraste |
| Farbraumabdeckung | Nur sRGB | Nur sRGB | Unterstützt P3 und Wide Gamut |
Wenn du ein neues Projekt startest, arbeite direkt in OKLCH. Es ist die Zukunft – und die Gegenwart, denn die Browserunterstützung liegt bei über 93 %.
Farbharmonien – So findest du die perfekte Farbkombination
Farbharmonien sind keine abstrakten Theorien, sondern konkrete Werkzeuge für deine tägliche Designarbeit. Jede Harmonie hat einen eigenen visuellen Effekt – und der entscheidet, ob dein Interface ruhig wirkt oder Aufmerksamkeit zieht. Hier die sechs Klassiker im Schnelldurchlauf:
- Komplementärfarben: gegenüberliegende Farben, maximaler Kontrast – perfekt für CTAs
- Analogfarben: benachbarte Farbtöne, wirken ruhig und ausgewogen
- Triadische Harmonie: drei Farben im gleichen Abstand, lebendig und bunt
- Split-Komplementär: Kontrast ohne visuelle Aggressivität
- Monochromatisch: ein Farbton in vielen Abstufungen, elegant und kohärent
- Tetrade: vier Farben in zwei Paaren, komplex und anspruchsvoll
Ich selbst arbeite bei vielen Kundenprojekten mit Split-Komplementärfarben, weil das Schema Kontrast liefert, aber gleichzeitig leichte Fehler in der Gewichtung verzeiht. Perfekt, wenn du mal etwas flexibler sein musst.
Klingt nach viel Theorie? Keine Sorge! Jede dieser Harmonien spiele ich dir mit echten Beispielen und fertigen Paletten in meinem Artikel zu Farbkombinationen durch.
Die 60-30-10-Regel – Farbverteilung mit System
Die 60-30-10-Regel gibt dir ein einfaches Framework für die Verteilung deiner Farben: 60 % Hauptfarbe für große Flächen, 30 % Sekundärfarbe für Struktur-Elemente und 10 % Akzentfarbe für Buttons und CTAs. Im Webdesign ist das ein solider Ausgangspunkt, wenn du nicht weißt, wie du deine Palette gewichten sollst.
Wie du die Regel konkret anwendest – inklusive Beispielen und Variationen wie 40-30-20-10 – zeige ich dir ausführlich in meinem Artikel zur 60-30-10-Regel.
Farbpsychologie – Warum Farben deine Conversion-Rate beeinflussen
Farben wirken auf einer unbewussten Ebene, noch bevor dein Besucher das erste Wort gelesen hat. Wie stark diese Wirkung ausfällt, hängt aber massiv vom Kontext ab: von deiner Branche, vom Kulturkreis deiner Zielgruppe und davon, welche Farben deine Mitbewerber besetzen.
Welche Farbe welche Reaktion auslöst – und worauf du bei internationalen Projekten achten musst – findest du im Detail in meinem Artikel zur Farbpsychologie.
Dark Mode richtig gestalten – Bitte nicht einfach invertieren!
Der Dark Mode hat sich von einem Hype zu einer festen Anforderung entwickelt. Die meisten Nutzer erwarten ihn mittlerweile. Aber ich sehe immer wieder den gleichen Fehler: Einfach die Farben invertieren und fertig. Das Ergebnis? Unlesbare Texte, vibrierend grelle Buttons und genervte User.
Hier die wichtigsten Regeln für einen professionellen Dark Mode:
Kein reines Schwarz als Hintergrund. Material Design empfiehlt #121212 statt reinem #000000. Reines Schwarz eliminiert sichtbare Schatten und erzeugt einen unangenehmen Kontrast zu Text. Höher liegende Flächen (Cards, Modals) werden durch hellere Varianten dargestellt – Material Design nutzt 5–16 % Weiß-Overlay-Opazität, um Tiefe zu kommunizieren.
Farben entsättigen. Stark gesättigte Farben auf extrem dunklem Grund verursachen ein Phänomen namens „Halation“ – visuelles Flimmern, das die Lesbarkeit drastisch reduziert. Reduziere die Sättigung deiner Akzentfarben im Dark Mode um etwa 20 Punkte. Aus einem aggressiven Neon-Rot wird ein weicheres, pudriges Korallenrot.
Text nicht reinweiß. Google empfiehlt 87 % Opazität für primären Text, 60 % für sekundären und 38 % für deaktivierten Text. Reines Weiß (#FFFFFF) auf dunklem Hintergrund blendet.
Die technische Umsetzung ist dank CSS Custom Properties und der neuen light-dark()-Funktion einfacher denn je:
:root { color-scheme: light dark; }
body {
color: light-dark(#333, #eee);
background: light-dark(#fff, #121212);
}Das macht hunderte Zeilen komplexer Media-Queries obsolet. Und mit OKLCH kannst du die Helligkeit deiner Farben gezielt anpassen, ohne dass der Farbton driftet.
Barrierefreiheit – Warum Kontrast keine Kür, sondern Pflicht ist
Barrierefreiheit ist kein nettes Extra. Seit Juni 2025 gilt der European Accessibility Act (EAA) in allen EU-Mitgliedstaaten. Die Richtlinie verlangt WCAG 2.1 Level AA für E-Commerce, Banking, Telekommunikation und zahlreiche weitere digitale Dienste. Nur Kleinstunternehmen (unter 10 Mitarbeiter, unter 2 Mio. € Umsatz) sind ausgenommen. Die Strafen variieren je nach Land. Falls du wissen willst, ob deine eigene Website betroffen ist: Als Agentur für barrierefreies Webdesign prüfen wir genau das im kostenlosen Erstgespräch.
Die konkreten Kontrastwerte
WCAG AA (Mindeststandard): Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text (ab 24px oder 18,66px fett) mindestens 3:1. Nicht-Text-Elemente wie Buttons, Icons und Formularfelder brauchen ebenfalls 3:1.
WCAG AAA (erweiterter Standard): 7:1 für normalen Text, 4,5:1 für großen Text.
Ein Beispiel: #767676 auf Weiß hat exakt ein Kontrastverhältnis von 4,5:1 – die Mindestgrenze. Das häufig eingesetzte Hellgrau #999999 auf Weiß erreicht nur 2,8:1 und fällt durch. Falls du dich fragst, warum dein dezentes Grau im Accessibility-Audit durchfällt – jetzt weißt du es.
Farbe darf nie das einzige Mittel sein, um Information zu vermitteln (WCAG 1.4.1). Fehlermeldungen brauchen neben der roten Farbe immer auch ein Icon und beschreibenden Text. Links müssen sich durch Unterstreichung oder andere visuelle Merkmale vom Fließtext abheben. Farbe allein reicht nicht.
APCA – Die Zukunft der Kontrastmessung
Für die nächste Generation der Richtlinien (WCAG 3.0, voraussichtlich frühestens um 2030) wurde der APCA-Algorithmus (Advanced Perceptual Contrast Algorithm) entwickelt. APCA misst den wahrgenommenen Kontrast statt einer starren mathematischen Ratio. Dabei fließen Schriftgröße und Schriftstärke in die Bewertung ein – ein dünner Font braucht drastisch mehr Kontrast als eine fette Überschrift, um lesbar zu bleiben.
| Kriterium | WCAG 2.1 | APCA (WCAG 3.0 Draft) |
|---|---|---|
| Berechnungsbasis | Mathematische Luminanz | Menschliche Wahrnehmung |
| Typografie | Nur normal/groß | Font-Weight und Font-Size exakt |
| Ergebnis | Statische Ratio (4,5:1) | Dynamischer Lc-Wert (z.B. Lc 60) |
Erfülle die aktuellen WCAG-2.1-Werte für rechtliche Compliance, aber teste zusätzlich mit APCA-Tools, um die reale Usability zu maximieren. So bist du auf der sicheren Seite – heute und in Zukunft.
CSS-Farbformate – Von HEX zu OKLCH und color-mix()
Die CSS-Farblandschaft hat sich seit 2023 fundamental verändert. Die Ära der hartcodierten Hexadezimal-Werte neigt sich dem Ende zu. Lass mich dir die wichtigsten Formate und Features vorstellen.
Die Klassiker: HEX, RGB, HSL
/* HEX – universell, aber nicht intuitiv */
color: #ff6600;
color: #ff660080; /* Mit Alpha-Transparenz */
/* RGB – modern ohne Kommas */
color: rgb(255 102 0);
color: rgb(255 102 0 / 50%);
/* HSL – intuitiv, aber nicht wahrnehmungsgleichmäßig */
color: hsl(24 100% 50%);Alle drei Formate haben nahezu 100 % Browserunterstützung. Sie funktionieren, aber sie stoßen bei der Entwicklung skalierbarer Designsysteme an ihre Grenzen – vor allem weil sie auf den limitierten sRGB-Farbraum beschränkt sind.
OKLCH – Der neue Standard
/* OKLCH – wahrnehmungsgleichmäßig und P3-fähig */
color: oklch(70% 0.15 240); /* Weiches Blau */
color: oklch(60% 0.2 280 / 75%); /* Violett mit Alpha */OKLCH bietet über 93 % globale Browserunterstützung (Chrome 111+, Safari 15.4+, Firefox 113+). Der entscheidende Vorteil: Du kannst eine feste Basis-Helligkeit für alle Interaktionselemente festlegen und lediglich den Hue-Wert rotieren lassen. Das Ergebnis sind Blau-, Rot- und Grüntöne, die garantiert den gleichen wahrgenommenen Kontrastwert zum Hintergrund haben. Kein manuelles Nachjustieren mehr!
color-mix() – Farben dynamisch mischen
/* Farben live im Browser mischen (~92 % Support) */
.btn:hover {
background: color-mix(in oklch, var(--primary) 80%, black);
}Die color-mix()-Funktion ersetzt Sass-Funktionen wie darken() und lighten() nativ im Browser. Du deklarierst eine einzige Primärfarbe als CSS-Variable, und für Hover-Effekte oder Schattierungen wird alles direkt berechnet. Das reduziert die Anzahl statischer CSS-Variablen in großen Stylesheets drastisch.
Relative Farbsyntax – Paletten aus einer Farbe
/* Komplette Palette aus einer Grundfarbe (~87 % Support) */
--primary-light: oklch(from var(--primary) calc(l + 0.1) c h);
--primary-desat: oklch(from var(--primary) l calc(c * 0.5) h);Damit generierst du komplette Paletten aus einer einzigen Grundfarbe – ganz ohne Präprozessor. Das ist besonders mächtig für White-Label-Projekte oder Themes, bei denen der Kunde seine Markenfarbe einstellt und alles andere sich automatisch anpasst.
light-dark() – Dark Mode ohne Media Query
:root { color-scheme: light dark; }
body {
color: light-dark(#333, #eee);
background: light-dark(#fff, #121212);
}Die light-dark()-Funktion (ca. 87 % Support) übergibt in einer einzigen Zeile zwei Farbwerte – einen für Light Mode, einen für Dark Mode. Das macht die Dark-Mode-Implementierung erheblich einfacher.
Wide Gamut mit Display P3
/* Progressive Enhancement für P3-Geräte */
.hero {
background-color: #ff3300; /* sRGB-Fallback */
background-color: color(display-p3 1 0.2 0); /* Brillanter auf P3-Displays */
}Display P3 umfasst rund 50 % mehr Farbvolumen als sRGB und bietet deutlich kräftigere Rot-, Grün- und Orangetöne. Alle Apple-Geräte seit dem iMac Retina und iPhone 7 unterstützen P3, ebenso Google Pixel 8+ und Samsung-Flaggschiffe. Die CSS color()-Funktion hat über 93 % globale Unterstützung.
Farbtrends im Webdesign
Nach mehreren Jahren, die von grellen, aggressiven Farben des Neobrutalismus und maximalistischer Reizflut geprägt waren, zeichnet sich ein klarer Gegentrend ab. Die digitale Welt sehnt sich nach visueller Beruhigung.
Cloud Dancer – Pantones Farbe des Jahres 2026
Das Pantone Color Institute hat mit Cloud Dancer (PANTONE 11-4201) erstmals einen Weißton zur Farbe des Jahres ernannt. Es ist ein weiches, sanftes und luftiges Weiß, das das harte, klinische Reinweiß der vergangenen Jahrzehnte ablösen soll. Im UI-Design reduziert die subtile Wärme dieses Farbtons die Blendwirkung auf modernen OLED-Screens erheblich und vermittelt ein Gefühl von Klarheit und Ruhe.
Die wichtigsten Trends auf einen Blick
Cinematic Gradients. Farbverläufe werden nicht mehr als harte Regenbogenmuster eingesetzt, sondern als weiche, fast rauchige Mesh-Gradients. Diese komplexen Verläufe simulieren dreidimensionale Lichtquellen und erzeugen eine filmische, immersive Atmosphäre. CSS-Gradienten mit in oklch-Interpolation liefern dabei deutlich sauberere Übergänge als die alten RGB-basierten Verläufe.
Erdtöne und der Eco-Digital-Trend. Eine Fusion aus Nachhaltigkeit und Spitzentechnologie. Moos, Lehm und Sand werden mit leuchtendem Teal (Blaugrün) kontrastiert. Das signalisiert ein modernes „Earth-First“-Mindset, ohne technologisch rückständig zu wirken.
Dopamine Colors. Kräftige, gesättigte Farben erleben ein Comeback – Electric Blue, Neon Coral, leuchtendes Violett. Getrieben von Y2K-Nostalgie und dem Wunsch nach visueller Energie. Orange wird zur dominanten Primärfarbe – energetisch, aber wärmer als Rot.
Evolvierter Dark Mode. Dark Mode entwickelt sich von Schwarz-Weiß zu gestalteten Farbpaletten. Biolumineszente Töne ersetzen reines Schwarz, „Frosted Glass“ bekommt farbige Tönungen. Marken nutzen den Dark Mode als Branding-Opportunity mit tiefen Markenfarben als Basis.
Neon als Micro-Akzent. Neontöne feiern ein Comeback, werden aber nicht mehr flächig eingesetzt. Sie dienen ausschließlich als Micro-Akzente – feine Fokusringe, subtile Hover-Effekte oder winzige „Live/Neu“-Badges – um innerhalb reduzierter Interfaces kontrollierte Energiespitzen zu erzeugen.
Mehr zu aktuellen Webdesign Trends findest du in meinem ausführlichen Artikel.
KI-Tools und Ressourcen für deinen Farbworkflow
KI-gestützte Tools wie Khroma, Huemint und Colormind generieren in Sekunden kohärente Farbpaletten. Zusammen mit Klassikern wie Coolors, Adobe Color und Kontrast-Checkern wie WebAIM hast du alles, was du für professionelle Farbarbeit brauchst.
Einen vollständigen Überblick über alle Farb-Tools — von KI-Palettengeneratoren über Browser-Extensions bis zu Figma-Plugins — findest du in unserer Farb-Tools-Übersicht.
Barrierefreiheit muss immer noch manuell überprüft werden. Kein Palettengenerator garantiert WCAG-konforme Kontraste. KI liefert Startpunkte — die Designentscheidung bleibt bei dir.
Dein Farbschema erstellen – der Prozess im Überblick
Der Weg zur fertigen Farbpalette folgt einem klaren Prozess: Markenwerte definieren, Inspiration sammeln, Primärfarbe festlegen, Sekundär- und Akzentfarben über Farbharmonie-Regeln ableiten, Neutralfarben ergänzen und alles auf Kontrast und Barrierefreiheit testen.
In OKLCH lässt sich das elegant per CSS lösen:
:root {
--primary: oklch(65% 0.22 260); /* Deine Markenfarbe */
--secondary: oklch(65% 0.22 215); /* Hue -45° (analog) */
--accent: oklch(65% 0.22 80); /* Hue +180° (komplementär) */
}Die ausführliche Schritt-für-Schritt-Anleitung mit konkreten Beispielen findest du in unserem Guide zum Farbpalette erstellen.
Fazit
Farbenlehre im Webdesign ist keine Geschmacksfrage, sondern eine Frage von Technologie, Zugänglichkeit und Strategie. Ob du die 60-30-10-Regel auf dein nächstes Projekt anwendest, deine Palette in OKLCH definierst oder zum ersten Mal einen APCA-Check machst – jeder dieser Schritte bringt dich näher an Websites, die nicht nur gut aussehen, sondern auch verdammt gut funktionieren.
Die wichtigsten Takeaways:
- OKLCH ist der neue Standard für CSS-Farben. Wahrnehmungsgleichmäßig, P3-fähig und von Tailwind CSS v4 als Default übernommen. In Kombination mit
color-mix()und der relativen Farbsyntax kannst du komplette Designsysteme in reinem CSS bauen. - Barrierefreiheit ist EU-weit Pflicht. Der European Accessibility Act macht WCAG 2.1 AA zur gesetzlichen Anforderung für die meisten digitalen Dienste. Wer Kontraste noch als optionales Extra behandelt, riskiert rechtliche Konsequenzen.
- Kulturelles Farbbewusstsein ist kein Luxus, sondern Voraussetzung für internationale Projekte. Wer die kulturellen Kontexte kennt, vermeidet kostspielige Rebranding-Maßnahmen.
Farbenlehre verbindet Wissenschaft, Psychologie und Handwerk. Wer die Grundlagen versteht, die Werkzeuge beherrscht und die kulturellen Kontexte kennt, gestaltet nicht nur schönere, sondern wirksamere Websites.
Jetzt bist du dran – viel Spaß beim Gestalten!
Häufig gestellte Fragen
Was ist der Unterschied zwischen RGB und OKLCH?
RGB (Rot, Grün, Blau) ist das native Farbformat aller Bildschirme und beschreibt Farben basierend auf Lichtwerten. OKLCH hingegen ist ein wahrnehmungsgleichmäßiger Farbraum, der die menschliche Farbwahrnehmung nachahmt. Der große Vorteil von OKLCH: Gleiche Helligkeitswerte (L) sehen tatsächlich gleich hell aus – unabhängig vom Farbton. Das macht OKLCH ideal für barrierefreie Farbpaletten und automatisierte Kontrast-Berechnungen.
Welche Farben sind websicher?
Websichere Farben sind eine Palette aus 216 Farbtönen, die früher auf allen Monitoren und in allen Browsern identisch dargestellt wurden – damals konnten viele Systeme nur 256 Farben gleichzeitig anzeigen. Erkennbar sind sie an ihren Hex-Werten, die ausschließlich aus den Paaren 00, 33, 66, 99, CC und FF bestehen, zum Beispiel
#33CC99. Heute spielt diese Einschränkung technisch keine Rolle mehr, weil moderne Displays Millionen von Farben darstellen. Relevant bleibt der Gedanke dahinter trotzdem: Prüfe deine Farben auf verschiedenen Geräten, denn Displays, Farbprofile und Dark-Mode-Einstellungen verändern die Wirkung deiner Palette deutlich.
Welche Kontrastwerte fordert die WCAG für Barrierefreiheit?
WCAG 2.1 Level AA (Mindeststandard) fordert für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 und für großen Text (ab 24px oder 18,66px fett) mindestens 3:1. Der erweiterte Standard WCAG AAA verlangt 7:1 für normalen und 4,5:1 für großen Text. Seit Juni 2025 ist WCAG 2.1 AA durch den European Accessibility Act für die meisten digitalen Dienste in der EU gesetzlich vorgeschrieben.
Was ist der Farbkreis nach Itten?
Der 12-teilige Farbkreis nach Johannes Itten ist das Standard-Modell der Farbenlehre. Im Zentrum stehen die drei Primärfarben (Rot, Gelb, Blau), im mittleren Ring die drei Sekundärfarben (Orange, Grün, Violett), und der äußere Ring enthält sechs Tertiärfarben. Itten definierte auch sieben Farbkontraste (u.a. Hell-Dunkel, Kalt-Warm, Komplementär), die bis heute als essenzielle Gestaltungsrichtlinien im Webdesign gelten.
Wie erstelle ich einen professionellen Dark Mode?
Ein guter Dark Mode invertiert nicht einfach die Farben, sondern folgt klaren Regeln: Verwende kein reines Schwarz (#000000), sondern ein dunkles Grau wie #121212. Entsättige Akzentfarben um etwa 20 Punkte, um visuelles Flimmern (Halation) zu vermeiden. Nutze für Text nicht reinweiß, sondern 87 % Opazität. Mit der CSS-Funktion light-dark() und OKLCH-Farbwerten lässt sich ein professioneller Dark Mode technisch einfach umsetzen.
Was ist APCA und warum ist es wichtig?
APCA (Advanced Perceptual Contrast Algorithm) ist der neue Kontrast-Algorithmus für WCAG 3.0. Anders als die aktuelle WCAG-2.1-Methode misst APCA den wahrgenommenen Kontrast und berücksichtigt dabei Schriftgröße und Schriftstärke. Das Ergebnis ist ein dynamischer Lc-Wert statt einer starren Ratio. APCA liefert realistischere Ergebnisse für die tatsächliche Lesbarkeit und wird voraussichtlich ab 2030 zum Standard.
Welche Tools helfen bei der Farbauswahl im Webdesign?
Die wichtigsten Tools sind: Coolors (Branchenstandard für Paletten), Adobe Color (Harmonieregeln), Realtime Colors (Live-Preview), WebAIM Contrast Checker (Barrierefreiheit) und ColorZilla (Browser-Extension). Für KI-gestützte Farbauswahl empfehlen sich Khroma (personalisierte Paletten) und Huemint (kontextuelle Rollen). Wichtig: Kein Tool ersetzt die manuelle Prüfung auf WCAG-Konformität.
