Farbcodes im Web: HEX, RGB und HSL
Farben werden in der Webentwicklung über drei Hauptformate definiert: HEX, RGB und HSL. Dieses Tool konvertiert eine beliebige Farbe sofort in alle drei Formate und zeigt zusätzlich den CSS-Namen und die Komplementärfarbe an.
HEX-Farbcodes
HEX ist das gängigste Farbformat im Web. Es wird als #RRGGBB geschrieben, wobei jedes Paar den Farbkanal (Rot, Grün, Blau) von 00 bis FF (0–255) angibt. Mit 256 Werten pro Kanal sind 16.777.216 Farben darstellbar. Die 3-stellige Kurzform #RGB ist ebenfalls gültig: #F06 → #FF0066. HEX wird in CSS, Figma, Adobe XD und allen Designwerkzeugen verwendet.
RGB-Farbmodell
RGB (Rot-Grün-Blau) spiegelt die physische Struktur von Bildschirmen wider. Jeder Kanal nimmt Werte von 0 bis 255 an. In CSS: rgb(255, 87, 51) oder mit Transparenz rgba(255, 87, 51, 0,8).
HSL-Farbmodell
HSL (Farbton-Sättigung-Helligkeit) ist designer-freundlicher. Farbton: 0–360° auf dem Farbrad. Sättigung: 0%=Grau, 100%=kräftige Farbe. Helligkeit: 0%=Schwarz, 50%=Normal, 100%=Weiß. Helle und dunkle Varianten erzeugen durch Anpassen der Helligkeit — ideal für konsistente Farbpaletten und Design-Systeme.
Komplementärfarben
Komplementärfarben liegen 180° voneinander entfernt auf dem Farbrad: Rot ↔ Cyan, Grün ↔ Magenta, Blau ↔ Gelb. Sie erzeugen den stärksten Kontrast und werden in Call-to-Action-Buttons und Datenvisualisierungen eingesetzt.
Barrierefreiheit (WCAG)
Ca. 8 % der Männer sind farbenblind. WCAG 2.1 AA schreibt ein Kontrastverhältnis von mindestens 4,5:1 für Normaltext vor. Informationen niemals ausschließlich durch Farbe vermitteln.
CSS-Farbnamen
CSS definiert 148 benannte Farben (red, navy, coral, teal usw.). Dieses Tool erkennt sie automatisch und zeigt den Namen an.
Datenschutz
Alle Berechnungen laufen vollständig im Browser. Es werden keine Daten an Server übertragen.
Kommentare