Grünblindheit
Rotblindheit
Blaublindheit
148 benannte CSS-Farben
Farbe anklicken, um sie in den Farbwähler zu laden. Nach Name oder Hex-Wert suchen.
| Muster | Name | Hex | RGB |
|---|
Alle 148 Standard-CSS-Farben gemäß CSS Color Level 4 Spezifikation.
Wie Farbcodes funktionieren
Hex-Codes
Ein Hex-Farbcode wie #FF5733 kodiert eine Farbe als drei zweistellige Hexadezimalzahlen: Rot (FF = 255), Grün (57 = 87), Blau (33 = 51). Hex reicht von #000000 (Schwarz) bis #FFFFFF (Weiß). Kurzschreibweise wie #F60 wird zu #FF6600 erweitert.
RGB
RGB gibt die Intensität von Rot-, Grün- und Blaulicht an, jeweils von 0 bis 255. rgb(255, 0, 0) ist reines Rot; rgb(0, 0, 255) ist reines Blau. Auch der Alphawert ist anggebbar: rgba(255, 87, 51, 0.5) ist 50 % transparent.
HSL
HSL (Farbton, Sättigung, Helligkeit) ist intuitiver: Der Farbton ist der Farbwinkel (0°=Rot, 120°=Grün, 240°=Blau), die Sättigung ist die Farbintensität (0 %=Grau, 100 %=kräftig) und die Helligkeit ist die Leuchtstärke (0 %=Schwarz, 50 %=Normal, 100 %=Weiß). Ideal für programmgesteuerte Farbvariationen.
CMYK
Wird im Druckdesign verwendet: Cyan, Magenta, Gelb und Key (Schwarz). Die Umrechnung aus RGB ist eine Näherung — professionelle Druckabläufe verwenden ICC-Profile für Genauigkeit. Die angezeigten Werte dienen als Referenz; stets beim Drucker nachprüfen.
Anschauliches Beispiel
Die CSS-Farbe tomato ist #FF6347. Aufgeschlüsselt: R=255 (FF), G=99 (63), B=71 (47). In HSL: Farbton≈9°, Sättigung=100 %, Helligkeit=64 %. WCAG-Kontrast vs. Weiß: ~3,0:1 (AA-Fehler bei kleinem Text). Vs. Schwarz: ~7,0:1 (AAA-Pass). Tomatenfarbenen Text also auf dunklen Hintergründen für beste Lesbarkeit verwenden.
Häufig gestellte Fragen
Was ist ein Hex-Farbcode?
Ein Hex-Farbcode ist eine sechsstellige Hexadezimalzahl (z. B. #FF5733), die eine Farbe durch Mischen von Rot-, Grün- und Blaulicht darstellt. Die ersten zwei Stellen sind Rot, die nächsten zwei Grün, die letzten zwei Blau — jeweils von 00 (keines) bis FF (voll). Kürzere dreistellige Codes (#F60) sind gültige Kurzschreibweisen, bei denen jede Stelle verdoppelt wird.
Was ist der Unterschied zwischen RGB und HSL?
RGB mischt Rot-, Grün- und Blauwerte (je 0–255) und entspricht der Funktionsweise von Bildschirmen. HSL beschreibt Farbton (Farbwinkel 0–360°), Sättigung (Lebendigkeit 0–100 %) und Helligkeit (Leuchtstärke 0–100 %) und entspricht der menschlichen Farbwahrnehmung. Mit HSL lassen sich hellere/dunklere Varianten einfach durch Anpassen des L-Werts erstellen.
Welches WCAG-Kontrastverhältnis brauche ich?
WCAG 2.1 AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text (18 pt oder 14 pt fett). AAA verlangt 7:1 bzw. 4,5:1. Diese Verhältnisse gelten für Text auf seinem Hintergrund. Dekorative Grafiken und inaktive UI-Elemente sind ausgenommen. Den Kontrastprüfer oben verwenden, um Farbkombinationen zu verifizieren.
Was sind komplementäre, analoge und triadische Farben?
Komplementärfarben liegen sich auf dem Farbkreis gegenüber (180° Abstand) und erzeugen starken Kontrast. Analoge Farben sind benachbart (±30°) und ergeben harmonische, stimmige Paletten. Triadische Farben sind gleichmäßig um 120° versetzt und bieten lebendige Balance. Alle drei Harmonietypen werden im Abschnitt "Farbharmonien" oben angezeigt.
Funktioniert der Farbpipette-Button in allen Browsern?
Die EyeDropper-API wird derzeit in Chrome 95+, Edge 95+ und Opera 81+ unterstützt. In Firefox und Safari ist sie nicht verfügbar. Die Pipetten-Schaltfläche wird auf nicht unterstützten Browsern automatisch ausgeblendet — der Farbwähler und alle Codeformate funktionieren in allen modernen Browsern.
Was sind benannte CSS-Farben?
CSS definiert 148 benannte Farben — von aliceblue bis yellowgreen — die direkt in CSS ohne Hex- oder RGB-Werte verwendet werden können. Sie sind Teil der CSS Color Level 4 Spezifikation und umfassen klassische websichere Farben (wie red, blue) sowie viele beschreibende Namen (wie cornflowerblue, mediumaquamarine). Die vollständige Tabelle ist oben durchsuchbar.