HEX-zu-RGB-Konverter

HEX- und hexadezimale Farben in RGB umwandeln

Verwende diesen HEX-zu-RGB-Konverter, wenn ein Design dir einen hexadezimalen Farbcode vorgibt, aber dein Workflow in CSS, JavaScript, Canvas oder Grafik die Kanäle für Rot, Grün und Blau benötigt. Gib einen 3-, 4-, 6- oder 8-stelligen HEX-Wert ein und die Umwandlung von Hexadezimal in RGB-Farbe erscheint sofort. Der Alpha-Wert bleibt erhalten, wenn der Code Transparenz enthält. Zum Beispiel wird #ff8c42 in rgb(255, 140, 66) und hsl(23, 100%, 63%) umgewandelt.

So verwendest du diesen HEX-Konverter

1. Geben Sie eine HEX-, RGB(A)- oder HSL(A)-Farbe ein oder wählen Sie eine Farbe visuell aus.
2. Bearbeiten Sie ein beliebiges Feld; die Werte für HEX, RGB, HSL, Alpha, die Vorschau und das Kontrastergebnis bleiben synchron.
3. Kopieren Sie einen einzelnen Wert, die CSS Custom Property, alle Formate oder einen Freigabe-Link.

Da jedes Format bearbeitbar ist, funktioniert die Seite auch als RGB-Konverter, wenn Sie mit rgb() oder rgba() beginnen. Verwenden Sie sie als Hex-Code-Konverter für CSS-Snippets oder als umfassenderen Farbcode-Konverter, wenn Sie Werte zwischen Design- und Entwicklungstools übertragen.

HEX in HSL umwandeln, ohne Transparenz zu verlieren

HSL beschreibt dieselbe Farbe durch Farbton, Sättigung und Helligkeit, was einfacher anzupassen sein kann als einzelne RGB-Kanäle. Das Ergebnis der Umwandlung von HEX in HSL behält den Alpha-Wert von #RGBA- oder #RRGGBBAA-Eingaben bei und erzeugt HSLA, wenn die Transparenz unter 100 % liegt. Die Bearbeitung von HSL aktualisiert die entsprechenden HEX- und RGB-Werte aus demselben Farbzustand und vermeidet so Konvertierungsabweichungen zwischen den Feldern.

HEX, RGB und HSL: Welches Format sollten Sie verwenden?

HEX ist kompakt und in CSS-Variablen und Design-Spezifikationen verbreitet. RGB legt einzelne Rot-, Grün- und Blau-Kanäle für JavaScript, Canvas und Grafik-APIs offen. HSL ist praktisch, wenn Farbton, Sättigung oder Helligkeit angepasst werden. Diese Formate beschreiben dieselbe Farbe mit unterschiedlicher Notation, obwohl die angezeigten Zahlen aufgrund von Rundungen leicht abweichen können.

Wie hexadezimale Farbcodes funktionieren

Ein hexadezimaler Farbcode ist die kompakte Schreibweise für RGB im Code: zwei Hex-Ziffern pro Kanal, von 00 bis FF (0 bis 255 dezimal), #FF8C42 ist also Rot FF, Grün 8C, Blau 42. Hex-Werte verwenden die Ziffern 0-9 und die Buchstaben A-F, bei Hex-Zahlen wird die Groß-/Kleinschreibung nicht beachtet, und Farben in Hexadezimal können auch ein viertes Paar für Alpha enthalten. Eine kleine Hex-Tabelle hilft beim Lesen von RGB in Hexadezimal: #000000 ist Schwarz, #FFFFFF ist Weiß, #FF0000 Rot, #00FF00 Grün, #0000FF Blau und #808080 mittleres Grau. Der Konverter zeigt den Hexadezimalcode, den RGB-Farbcode und HSL nebeneinander an, sodass für die Umwandlung von RGB in Hex und von Hex in RGB keine Nachschlagetabelle erforderlich ist.

Textkontrast vor der Verwendung einer Farbe prüfen

Die Vorschau vergleicht die ausgewählte Vordergrundfarbe mit einem Hintergrund und gibt deren Kontrastverhältnis nach dem Alpha-Compositing an. Nutzen Sie dies als schnelle Überprüfung bei der Konvertierung einer Farbe, nicht als vollständige Barrierefreiheitsprüfung: Schriftgröße, -gewicht, Interaktionszustände, Ränder, Symbole, Farbverläufe und die gerenderte Seite müssen weiterhin überprüft werden. Für AAA-, Großschrift- und Nicht-Text-Schwellenwerte mit barrierefreien Alternativen öffnen Sie den vollständigen Farbkontrast-Prüfer.

Private Farbumwandlung in Ihrem Browser

Das Parsen, die Konvertierung, die Kontrastberechnung und Kopiervorgänge finden in diesem Browser-Tab statt. Es wird keine Farbe an eine Konvertierungs-API hochgeladen und es ist keine Anmeldung erforderlich. Wenn Sie einen Freigabe-Link erstellen, wird die ausgewählte Farbe absichtlich in diesen Link aufgenommen, damit derselbe Zustand wiederhergestellt werden kann.

Häufig gestellte Fragen

Wie konvertiere ich eine HEX-Farbe in RGB?

Geben Sie die Farbe in das HEX-Feld ein. Die entsprechenden RGB-, HSL- und Alpha-Werte, die CSS-Variable und die Vorschau werden sofort aktualisiert. Zum Beispiel konvertiert #ff8c42 zu rgb(255, 140, 66).

Welche HEX-Farbformate werden unterstützt?

Der Konverter unterstützt #RGB, #RGBA, #RRGGBB und #RRGGBBAA. Die 4- und 8-stelligen Formate enthalten Alpha-Transparenz in der letzten Ziffer bzw. dem letzten Ziffernpaar.

Kann ich RGB oder HSL zurück in HEX konvertieren?

Ja. Bearbeiten Sie das RGB-, RGBA-, HSL- oder HSLA-Feld und der entsprechende HEX-Wert aktualisiert sich automatisch. Jedes angezeigte Format wird von derselben zugrundeliegenden RGBA-Farbe abgeleitet.

Wie wird HEX in HSL konvertiert?

Der Konverter löst zuerst den HEX-Wert in RGB-Kanäle auf und berechnet dann Farbton, Sättigung und Helligkeit aus dem Kanalbereich. Nur die angezeigten Werte werden gerundet, wodurch alle Felder synchronisiert bleiben.

Werden meine Farbcodes hochgeladen oder gespeichert?

Es wird keine Farbe an einen Konvertierungsdienst hochgeladen. Die Konvertierung und das Kopieren laufen lokal in Ihrem Browser. Ein Freigabe-Link enthält die ausgewählte Farbe nur dann im Link, wenn Sie explizit einen erstellen.

Wofür steht RGB in einem HEX-Code?

RGB steht für Rot, Grün und Blau, die drei Lichtkanäle, die ein Bildschirm mischt, um eine Farbe darzustellen. Ein sechsstelliger HEX-Code schreibt dieselben drei Kanäle hexadezimal, mit jeweils zwei Ziffern, in der Reihenfolge Rot-Grün-Blau; ein achtstelliger HEX-Code fügt ein viertes Paar für Alpha (Deckkraft) hinzu.