Farb-Konverter
Local only — nothing is uploaded unless you save or share it.
Ein Farb-Konverter: HEX in RGB, RGB in HEX, und beides in HSL.
- Tippen oder fügen Sie eine Farbe in einem beliebigen Format ein
- Sehen Sie sie sofort in jedes andere Format umgerechnet
- Kopieren Sie die Notation, die Sie brauchen
- HEX
- HEX mit Alpha
- RGB
- HSL
Tool speichern
Farb-Konverter griffbereit halten
Nutzen Sie das Teilen-Menü Ihres Browsers und dann „Zum Home-Bildschirm“.
Über dieses Tool
HEX in RGB umzurechnen, RGB in HEX, oder eines von beiden in HSL, ist eine ständige kleine Steuer, weil Designwerkzeuge, CSS und Bildbearbeitungen jeweils eine andere Farbnotation bevorzugen. HEX ist kompakt und beherrscht CSS und die Übergabe aus dem Design. RGB bildet direkt ab, wie ein Bildschirm tatsächlich Licht abgibt. HSL beschreibt eine Farbe so, wie Menschen über sie denken: als Farbton mit einem Maß an Buntheit und Helligkeit, was das Bauen einer Palette von Hand deutlich erleichtert — Farbton behalten, Helligkeit ändern, und Sie haben einen stimmigen Satz Abstufungen. Dieser Konverter nimmt jedes dieser Formate an, dazu die gängigen Farbnamen, und ist bei der Schreibweise bewusst nachsichtig. Sie können ein blankes HEX mit oder ohne Raute einfügen, drei oder sechs Stellen verwenden, einen Alphakanal anhängen und wahlweise die Kommaschreibweise oder die neuere, mit Leerzeichen getrennte CSS-Syntax schreiben. Alles wird beim Tippen umgerechnet, mit einem lebenden Farbfeld, damit Sie das Ergebnis sehen statt es sich vorzustellen.
Häufige Fragen
Welches Format soll ich in CSS verwenden?
Jedes davon funktioniert. HEX ist am verbreitetsten und am kompaktesten. HSL lohnt sich, wenn Sie Varianten einer Farbe von Hand bauen, denn die Helligkeit zu verstellen und Farbton und Sättigung zu behalten liefert einen stimmigen Satz Abstufungen weit leichter als das Bearbeiten von HEX-Ziffern.
Gibt es neben der Umrechnung auch einen Farbwähler?
Ja — das Farbfeld öffnet den Farbwähler Ihres Systems, eine Farbe lässt sich also nach Augenmaß wählen statt tippen, und HEX, RGB und HSL aktualisieren sich gemeinsam. Genau das ist die Aufgabe eines HTML-Farbwählers in der Praxis: etwas aussuchen, das richtig aussieht, und den Code mitnehmen, den ein Stylesheet annimmt.
Was bedeuten die zusätzlichen Stellen in einem achtstelligen HEX?
Die letzten beiden sind der Alphakanal, von 00 für völlig durchsichtig bis ff für völlig deckend. Jeder aktuelle Browser unterstützt das, und es ist oft einfacher, als nur wegen der Transparenz auf rgba zu wechseln.
Warum ändert sich der Wert manchmal leicht, wenn ich nach HSL und zurück umrechne?
Weil die HSL-Komponenten zur besseren Lesbarkeit auf ganze Zahlen gerundet werden, und diese Rundung ist nicht perfekt umkehrbar. Der Unterschied beträgt höchstens ein oder zwei Schritte je Kanal und ist nicht sichtbar, aber er bedeutet, dass der Hin- und Rückweg nicht immer byteweise identisch ist.
Kann ich eine Farbe ohne Raute einfügen?
Ja. Blanke HEX-Werte werden angenommen, ebenso die dreistellige Kurzform, die mit Leerzeichen getrennte CSS-Syntax wie rgb(59 130 246) und gängige Farbnamen wie teal oder crimson.
Woher weiß ich, ob Text auf einer Farbe lesbar sein wird?
Die Vorschau zeigt schwarzen und weißen Text auf Ihrer Farbe, damit Sie es sofort beurteilen können. Für ein echtes Bestanden oder Durchgefallen gegen die Barrierefreiheits-Richtlinien nehmen Sie den Kontrast-Prüfer, der das WCAG-Verhältnis sauber berechnet.
Helfen Sie, dieses Tool zu verbessern
Einen Fehler gefunden, eine Änderung im Kopf, oder fehlt Ihnen ein Tool?
Sie haben einen ungesendeten Entwurf.
Danke — ist bei uns angekommen. Die Antwort finden Sie in Ihrem Postfach.Go to my messages