Farbkonverter
Farben zwischen HEX, RGB und HSL umrechnen – mit Vorschau, Farbwähler und Klick-zum-Kopieren
HSL-Regler
Farbharmonien
Komplementärfarbe
Analogfarben
Die drei Farbformate
HEX (hexadezimal)
Eine HEX-Farbe besteht aus # gefolgt von sechs Hexadezimalziffern (z. B. #3b82f6); je zwei Ziffern kodieren den Rot-, Grün- und Blauanteil (00-ff). Auch die dreistellige Kurzform (z. B. #f00 für #ff0000) wird unterstützt. HEX ist die gängigste Schreibweise in CSS und Design-Tools und lässt sich direkt in Stylesheets übernehmen.
RGB (Rot, Grün, Blau)
RGB beschreibt eine Farbe über drei ganze Zahlen von 0 bis 255 für die Rot-, Grün- und Blaukanäle, in CSS als rgb(59, 130, 246) geschrieben. Das Modell bildet die Lichterzeugung von Bildschirmen direkt ab und eignet sich daher für programmatische Arbeit wie Canvas-Zeichnen und Bildverarbeitung.
HSL (Farbton, Sättigung, Helligkeit)
HSL beschreibt eine Farbe über Farbton H (Winkel 0-360° auf dem Farbkreis), Sättigung S (0-100%) und Helligkeit L (0-100%), in CSS als hsl(217, 91%, 60%) geschrieben. Es entspricht dem menschlichen Farbempfinden und ist damit ideal für Farbpaletten – Abdunkeln oder eine Komplementärfarbe zu finden ist eine einfache Zahlenänderung.
Referenztabelle gängiger Farben
| Farbe | HEX | RGB | HSL |
|---|---|---|---|
| Schwarz | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Weiß | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Rot | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Grün | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blau | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Gelb | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Grau | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Anleitung
Geben Sie eine Farbe in ein beliebiges Feld ein – HEX akzeptiert die Kurzform #rgb und fehlendes #; RGB akzeptiert sowohl die rgb()-Funktion als auch reine Kommawerte; bei HSL sind die %-Zeichen optional – oder nutzen Sie Farbwähler und HSL-Regler: Alle anderen Formate werden in Echtzeit synchronisiert. Über die Schaltfläche „Kopieren“ neben jedem Format übernehmen Sie den Wert in die Zwischenablage. Der Bereich Farbharmonien schlägt eine Komplementär- und zwei Analogfarben vor; ein Klick auf ein Farbfeld übernimmt die Farbe. Die gesamte Berechnung erfolgt lokal in Ihrem Browser.