Farbwähler & Farbkonverter — RGB, HEX, HSL
Nimm eine beliebige Farbe von irgendwo auf deinem Bildschirm auf oder rechne sofort zwischen HEX, RGB und HSL um.
Tipp: In Chrome oder Edge erscheint hier eine Pipette „Farbe vom Bildschirm aufnehmen“ – damit kannst du jedes Pixel auf deinem Bildschirm aufnehmen, auch außerhalb des Browsers.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX (#RGB oder #RRGGBB), rgb(), hsl() oder einfach „r, g, b“ – bis zu 500 Zeilen. Jede Zeile wird in HEX, RGB und HSL angezeigt; Zeilen, die keine Farbe sind, werden markiert, der Rest wird trotzdem umgewandelt.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Rechne jede Farbe sofort zwischen HEX, RGB und HSL um. Wähle eine Farbe visuell, füge einen HEX-Code ein, tippe RGB- oder HSL-Werte – oder nimm mit der Bildschirm-Pipette ein beliebiges Pixel irgendwo auf deinem Display auf, sogar in einer anderen App. Alle Formate bleiben synchron, jeweils mit kopierfertigem CSS-String.
Du hast eine ganze Palette? Füge eine Liste von Farben, eine pro Zeile, in das Stapelfeld ein, und jede Zeile wird in einer Tabelle in HEX, RGB und HSL umgewandelt, die du als CSV herunterladen kannst.
So funktioniert’s
- Wähle eine Farbe mit dem visuellen Farbwähler, tippe in ein beliebiges Feld (HEX, RGB oder HSL) – oder klicke auf „Farbe vom Bildschirm aufnehmen“ und dann auf ein beliebiges Pixel auf deinem Display, auch außerhalb des Browsers.
- Alle anderen Formate werden sofort aktualisiert.
- Klicke neben dem gewünschten Format auf Kopieren – die Werte lassen sich direkt in CSS einfügen.
- Um viele Farben umzuwandeln, füge sie eine pro Zeile in das Stapelfeld unter dem Konverter ein und lade die Tabelle als CSV herunter.
Häufige Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
Sie beschreiben dieselben Farben auf unterschiedliche Weise. HEX (#071E93) ist kompakt und die verbreitetste Schreibweise im Web. RGB (rgb(7, 30, 147)) gibt die Rot-, Grün- und Blauanteile an – praktisch, wenn du mit rgba() Transparenz ergänzen willst. HSL (hsl(229, 91%, 30%)) gibt Farbton, Sättigung und Helligkeit an – am intuitivsten, um eine Farbe anzupassen, etwa heller oder gedämpfter zu machen.
Wann sollte ich HSL in CSS verwenden?
Nimm HSL, wenn du Farbvarianten brauchst: Bleiben Farbton und Sättigung fest und änderst du nur die Helligkeit, erhältst du stimmige hellere und dunklere Abstufungen einer Markenfarbe – viel einfacher, als HEX-Werte zu raten.
Werden dreistellige HEX-Codes unterstützt?
Ja – Kurzformen wie #fff oder #1a9 werden automatisch zur vollen sechsstelligen Form erweitert (#ffffff, #11aa99).
Ist die Umrechnung von RGB in HEX exakt?
Ja – HEX ist einfach RGB im Sechzehnersystem, die Umrechnung ist also in beide Richtungen exakt. Bei HSL kann sich ein Wert hin und zurück durch Rundung um ±1 verschieben, was in der Praxis nicht wahrnehmbar ist.
Kann ich mehrere Farben auf einmal umwandeln?
Ja. Füge bis zu 500 Farben in das Feld „Stapelumwandlung“ ein, eine pro Zeile – HEX (#fff oder #071E93), rgb(), hsl() oder ein schlichtes Tripel „r, g, b“ funktionieren alle. Jede Zeile erscheint in einer Tabelle mit ihren HEX-, RGB- und HSL-Werten und einem Farbfeld; Zeilen, die keine Farbe sind, werden markiert, ohne den Rest aufzuhalten, und „CSV herunterladen“ speichert die ganze Tabelle.
Wie funktioniert die Bildschirm-Pipette?
Sie nutzt die native EyeDropper-API des Browsers: Klick auf den Button, dein Mauszeiger wird zur Lupe, und ein Klick auf ein beliebiges Pixel – auf dieser Seite, in einem anderen Tab oder in einer ganz anderen Anwendung – übernimmt genau diese Farbe. Nichts wird aufgezeichnet oder hochgeladen; die API liefert nur die eine angeklickte Farbe zurück. Unterstützt in Chrome und Edge; Firefox und Safari bieten sie noch nicht an.
Kurzübersicht: die drei Farbschreibweisen
• HEX (#071E93) – sechs Hexadezimalziffern, zwei pro Kanal. Die kompakteste Schreibweise und Standard in den meisten Designprogrammen und CSS-Codebasen.
• RGB (rgb(7, 30, 147)) – jeder Kanal 0–255. Nimm rgba() oder die moderne Syntax rgb(r g b / a), wenn du Alpha-Transparenz brauchst.
• HSL (hsl(229, 91%, 30%)) – Farbton auf dem Farbkreis (0–360°), Sättigung und Helligkeit. Die für Menschen am leichtesten bearbeitbare Schreibweise: Ändere eine Zahl, und du bekommst eine hellere, dunklere oder gedämpftere Version desselben Farbtons.
Ein praktischer Ablauf: Markenfarben in HEX festlegen, in HSL abwandeln (hellere und dunklere Abstufungen über die Helligkeit) und RGB verwenden, wenn eine Bibliothek oder die Canvas-API numerische Kanäle verlangt.
Ähnliche kostenlose Tools
- Bildkonverter — Wandle Bilder zwischen AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP und SVG um. Die meisten Konvertierungen verlassen deinen Browser nie.
- Bild zuschneiden — Schneide Bilder in deinem Browser auf jede Größe und jedes Seitenverhältnis zu – quadratisch, 16:9, 4:3 oder frei.