Farbcode-Konverter
Farben in der Webentwicklung können in mehreren Formaten angegeben werden: Hex, RGB, HSL und benannte Farben. Dieses Tool konvertiert zwischen allen Formaten, zeigt eine visuelle Vorschau, berechnet Kontrastverhältnisse für die Barrierefreiheit und erzeugt ergänzende Farbpaletten.
Spezifikationen
Haeufige Anwendungsfaelle
- Vom Designer bereitgestellte Hex-Farben in HSL umwandeln für einfachere Anpassung
- Prüfen, ob eine Textfarbe die WCAG-Barrierefreiheitsstandards erfüllt
- Farbpaletten für UI-Design erzeugen
- CSS-Farbwerte debuggen, die nicht wie erwartet dargestellt werden
- Das Hex-Äquivalent von CSS-Farbnamen finden
Funktionen
- Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA und benannte Farben parsen
- Sofortige Konvertierung zwischen allen Farbformaten
- HEX8-Ausgabe (8-stelliges Hex mit Alpha)
- Visuelle Farbvorschau mit Dunkel-/Hell-Hintergrund-Umschalter
- Beispieltext-Vorschau auf weißem und schwarzem Hintergrund
- WCAG-Kontrastverhältnis gegen Schwarz und Weiß berechnen
- Hell/Dunkel-Farbklassifizierung
- Komplementäre, analoge, triadische, tetradische und monochromatische Farbpaletten erzeugen
- Luminanz und Barrierefreiheits-Empfehlungen anzeigen
Beispiele
Tipps
- HSL ist oft einfacher zu verwenden: H ist der Farbton, S die Sättigung, L die Helligkeit.
- Für barrierefreien Text sollte ein Kontrastverhältnis von mindestens 4,5:1 angestrebt werden (WCAG AA).
- Das 8-stellige Hex-Format (#RRGGBBAA) enthält Alpha-Transparenz.
- CSS4 führt neue Farbräume wie oklch() für bessere perzeptuelle Einheitlichkeit ein.
Verstaendnis Farbcode-Konverter
CSS-Farbwerte definieren Farben für die Web-Gestaltung mithilfe mehrerer Notationssysteme. Das gebräuchlichste ist Hexadezimal (#RRGGBB), wobei jedes Paar von Hex-Ziffern die Rot-, Grün- und Blau-Kanäle von 00 (0) bis FF (255) darstellt. Die Kurzform #RGB verdoppelt jede Ziffer (#F00 entspricht #FF0000). Die 8-stellige Form #RRGGBBAA fügt einen Alpha-Transparenzkanal hinzu.
Funktionale Notationen bieten eine intuitivere Farbspezifikation. RGB (rgb(255, 0, 0)) gibt Kanäle als Ganzzahlen von 0-255 oder Prozentsätze an. HSL (hsl(0, 100%, 50%)) verwendet Farbton (0-360 Grad-Farbkreis), Sättigung (0-100%) und Helligkeit (0-100%), was viele Designer als intuitiver empfinden, um Farbpaletten zu erstellen und Farben anzupassen. Sowohl RGB als auch HSL unterstützen Alpha-Transparenz mit rgba() und hsla() oder der modernen Syntax rgb(255 0 0 / 50%).
Farbbarrierefreiheit ist ein kritisches Thema in der Webentwicklung. WCAG 2.1 definiert Mindest-Kontrastverhältnisse: 4,5:1 für normalen Text (Stufe AA), 3:1 für großen Text und 7:1 für erhöhten Kontrast (Stufe AAA). Unzureichender Kontrast macht Text für Benutzer mit Sehbehinderungen oder Farbfehlsichtigkeit schwer oder unmöglich zu lesen.
CSS unterstützt auch 148 benannte Farben (wie rebeccapurple, cornflowerblue, tomato), das currentColor-Schlüsselwort und neuere Farbräume wie HWB (Hue-Whiteness-Blackness), LAB, LCH und OKLCH, die perzeptuell einheitliche Farbmanipulation ermöglichen. Die neueren Farbräume sind besonders nützlich für die Erzeugung harmonischer Farbpaletten und glatter Farbverläufe.
Hex (#FF0000) und RGB (rgb(255,0,0)) geben beide Rot-, Grün- und Blau-Kanalwerte an — Hex verwendet Basis 16, während RGB dezimale Ganzzahlen verwendet. HSL (hsl(0,100%,50%)) stellt Farbe mithilfe von Farbton (die Farbe selbst auf einem 360-Grad-Farbkreis), Sättigung (Intensität) und Helligkeit dar, was viele Entwickler als intuitiver empfinden, um Variationen zu erstellen. Alle drei Formate können dieselben Farben darstellen, aber HSL macht es einfach, hellere, dunklere oder gedämpftere Varianten zu erzeugen, indem ein einzelner Wert angepasst wird.
Der Alphakanal steuert die Transparenz auf einer Skala von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). In der Hex-Notation wird Alpha als zwei zusätzliche Ziffern angehängt — #FF000080 stellt 50% transparentes Rot dar (80 hex = 128 dezimal). In funktionaler Notation lautet die Syntax rgba(255,0,0,0.5) oder die moderne Form rgb(255 0 0 / 50%). Alpha-Transparenz ist unerlässlich für Overlays, Wasserzeichen und geschichtete UI-Elemente. Für WCAG-Konformität erfordert Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18px+ fett oder 24px+ normal), während Stufe AAA 7:1 für normalen Text und 4,5:1 für großen Text erfordert. Nicht-Text-Elemente wie Symbole, Rahmen und Formularsteuerelemente benötigen mindestens 3:1 Kontrast zu angrenzenden Farben.
LAB und OKLCH sind perzeptuell einheitliche Farbräume, in denen gleiche numerische Änderungen visuell gleiche Farbunterschiede erzeugen, was sie für die Erzeugung von Paletten und glatten Farbverläufen überlegen macht. OKLCH (Lightness, Chroma, Hue) ist besonders nützlich in CSS, da die Anpassung der Helligkeit natürliche, vorhersagbare Ergebnisse liefert. Beide werden in modernem CSS mit den Funktionen oklch() und lab() unterstützt.