Ratgeber zu Farben
Kurze, praktische Ratgeber zu Farben am Bildschirm: Formate, Kontrast, Paletten, Dark Mode und CSS. Jede Zahl ist berechnet, jedes Beispiel lässt sich kopieren.
- OKLCH erklärt: das Farbformat, das endlich zu unseren Augen passtOKLCH beschreibt eine Farbe danach, wie hell sie wirkt, wie bunt sie ist und welchen Farbton sie hat. Anders als bei HSL sieht derselbe Helligkeitswert bei jedem Farbton wirklich gleich hell aus. Dadurch werden Paletten, Hover-Zustände und barrierefreie Kontraste berechenbar.28. September 2026Lesezeit: 3 Min.
- APCA vs. WCAG 2: welcher Kontrastprüfung du trauen kannstDas WCAG-2-Kontrastverhältnis ist das, was das Gesetz verlangt. APCA ist ein neueres Modell, das die Lesbarkeit deutlich besser vorhersagt, vor allem bei dunklen Themes und gesättigten Farben. Wer beide prüft, bekommt Text, der die Vorgaben erfüllt und wirklich gut lesbar ist.28. September 2026Lesezeit: 3 Min.
- Farbumfang (Gamut) erklärt: sRGB, Display P3 und Farben außerhalb des GamutsDer Gamut, auf Deutsch Farbumfang, ist die Menge an Farben, die ein Bildschirm oder Farbraum darstellen kann. Das Web wurde auf sRGB aufgebaut, doch die meisten Smartphones und viele Laptops zeigen heute Display P3 mit spürbar kräftigeren Rot-, Grün- und Orangetönen.28. September 2026Lesezeit: 2 Min.
- Farbformate erklärt: HEX, RGB, HSL, OKLCH und alle anderenDieselbe Farbe lässt sich auf ein Dutzend Arten schreiben. Hier erfährst du, was jedes Format bedeutet, wann du es verwendest und wie dieselbe Farbe in allen Formaten aussieht.28. September 2026Lesezeit: 2 Min.
- Hex-Farbcodes erklärt: So funktioniert #RRGGBBEin Hex-Farbcode wie #1e90ff besteht aus drei Paaren hexadezimaler Ziffern: dem Anteil an rotem, grünem und blauem Licht, jeweils von 00 (nichts) bis ff (voll, 255). Ein viertes Paar legt die Deckkraft fest: 80 bedeutet etwa 50 %, ff bedeutet vollständig deckend.28. September 2026Lesezeit: 6 Min.
- So wählst du eine Farbpalette für Website oder AppStarte mit einer Markenfarbe, erzeuge daraus eine Skala von 50 bis 950, ergänze leicht getönte Grautöne und vier Statusfarben und prüfe dann jedes Textpaar auf Kontrast und Farbenblindheit. Wähle Stufen nach ihrer OKLCH-Helligkeit, nicht nach Gefühl: Auf weißem Hintergrund besteht Text WCAG AA, sobald die Helligkeit auf etwa 0.55 sinkt, egal bei welchem Farbton.28. September 2026Lesezeit: 6 Min.
- Dark-Mode-Farben: Hintergrund, Text und Akzente richtig wählenNimm einen dunkelgrauen Hintergrund wie #121212 statt reinem Schwarz, gebrochenes Weiß wie #e5e5e5 statt reinem Weiß für Text und hellere, weniger gesättigte Varianten deiner Markenfarben. Prüfe Text nicht nur mit WCAG 2, sondern auch mit APCA, denn WCAG 2 überschätzt den Kontrast auf dunklen Hintergründen.28. September 2026Lesezeit: 6 Min.
- Farbharmonien: komplementär, analog, triadisch und mehrEine Farbharmonie wählt Farbtöne in festen Winkeln auf dem Farbkreis: 180° Abstand für Komplementärfarben, 30° für analoge Farben, 120° für eine Triade. Dreht man den Farbton in OKLCH statt in HSL, bleiben alle Farben gleich hell, und kein Ton springt ungewollt heraus.28. September 2026Lesezeit: 5 Min.
- CSS color-mix() und relative Farben: Tints, Hover und Transparenzcolor-mix() mischt zwei Farben in einem Farbraum deiner Wahl, und mit der relativen Farbsyntax änderst du einen einzelnen Kanal einer vorhandenen Farbe, etwa oklch(from var(--brand) calc(l - 0.1) c h). Beides läuft im Browser, funktioniert mit CSS-Variablen und ersetzt die meisten Sass-Farbfunktionen. Für Tints und Hover in oklab mischen, für Transparenz in srgb.28. September 2026Lesezeit: 6 Min.
- Farbpalette für Farbenblinde: Farben prüfen und richtig anpassenEine farbenblindfreundliche Palette hält jedes Farbpaar unter Protanopie, Deuteranopie, Tritanopie und in Graustufen unterscheidbar. Die zuverlässigste Lösung ist kein spezieller Farbton, sondern ein Helligkeitsabstand: Farben, die in der OKLCH-Helligkeit etwa 0.2 auseinanderliegen, blieben in jeder unserer Simulationen unterscheidbar. Kombiniere das mit Icons oder Beschriftungen, denn Farbe allein lässt immer jemanden im Stich.28. September 2026Lesezeit: 6 Min.
- Tailwind-CSS-Farben: die v4-Palette in OKLCH, eigene Farben und AbstufungenTailwind CSS v4 bringt 26 Farbskalen mit je 11 Abstufungen von 50 bis 950 mit, insgesamt 286 Farben, definiert in OKLCH als CSS-Variablen wie --color-blue-500. Eigene Farben fügst du mit @theme { --color-brand-500: oklch(...) } hinzu. Dieselbe Stufennummer bedeutet nicht dieselbe Helligkeit: blue-600 ist das hellste Blau, das auf Weiß 4.5:1 erreicht, Gelb braucht dafür 700.28. September 2026Lesezeit: 6 Min.