RGB zu Hex Konverter

Wandle RGB- und RGBA-Werte präzise in Hexadezimal-Farbcodes für CSS um.

Rote Farbe (R):
Grüne Farbe (G):
Blaue Farbe (B):

Ein Farbwähler in deinem Grafikprogramm liefert dir oft Werte wie rgb(46, 134, 171), während dein Stylesheet durchgehend mit Hex-Codes arbeitet. Eine einheitliche Schreibweise erleichtert die Pflege von CSS-Dateien erheblich, und dieser Konverter berechnet den passenden Hexadezimalcode nach Eingabe deiner Kanalwerte per Klick.

RGB-zu-Hex-Umrechnung im Detail verstehen

Jeder der drei Farbkanäle für Rot, Grün und Blau nutzt einen Wertebereich von 0 bis 255. Diese Dezimalzahlen werden in zweistellige hexadezimale Paare im 16er-System überführt und mit einer führenden Raute zusammengefügt. Aus rgb(46, 134, 171) wird so Schritt für Schritt der Code: 46 ergibt 2E, 134 wird zu 86 und 171 liefert AB. Zusammengesetzt ergibt das #2E86AB, einen gedeckten Blau-Petrol-Ton.

Beim manuellen Rechnen passieren leicht Fehler, besonders bei kleinen Zahlen. Ein Wert wie 15 verlangt zwingend eine führende Null als 0F. Fehlt diese Null aus Versehen, entsteht ein ungültiger Farbwert mit zu wenigen Zeichen.

Typische Werte im RGB-zu-Hex-Farbvergleich

RGB-WertHex-PaarVollständiges Beispiel
000#000000 (black)
150Fa dark, easy-to-drop leading zero
8757#FF5733 (orange-red)
171AB#2E86AB (teal blue)
255FF#FFFFFF (white)

RGBA-Transparenz und 8-stellige Farbcodes im RGB-zu-Hex-Tool

Kommt Transparenz ins Spiel, ergänzt der Alpha-Kanal die Farbdefinition, wie etwa bei rgba(46, 134, 171, 0.5) für 50 % Deckkraft. In modernem CSS existiert dafür die 8-stellige Hex-Schreibweise wie #2E86AB80. Die letzten beiden Stellen beschreiben dabei denselben Alphawert auf der Skala von 0 bis 255 beziehungsweise 00 bis FF anstelle einer direkten Prozentangabe.

Prüfe vor dem produktiven Einsatz im Stylesheet, ob deine Zielumgebung oder dein Gestaltungsprogramm 8-stellige Hex-Werte bereits vollständig unterstützt oder ob die klassische Schreibweise rgba() vorzuziehen ist.

Kontrastwerte nach der RGB-zu-Hex-Berechnung ermitteln

  • Die Web Content Accessibility Guidelines (WCAG) verlangen für Fließtext ein Mindestkontrastverhältnis von 4.5:1 gegenüber dem Seitenhintergrund.
  • Für großen Text ab 18pt oder ab 14pt in fetter Schrift gilt eine etwas gelockerte Schwelle von 3:1.
  • Ein helles Grau wie #AAAAAA auf weißem Grund verfehlt diese Vorgaben deutlich und ist für viele Menschen nur sehr schwer lesbar.
  • Wenn du Vordergrund- und Hintergrundfarben in Hex-Codes umwandelst, kannst du beide Werte anschließend direkt in gängigen Kontrastprüfern gegenrechnen.

Häufige Fragen zum RGB-zu-Hex-Konverter

Wie wird eine einzelne Dezimalzahl wie 171 in ein Hex-Paar zerlegt?

Teile die Zahl durch 16: 171 geteilt durch 16 ergibt 10 mit einem Rest von 11. Im Hexadezimalsystem steht die 10 für A und die 11 für B, was das Paar AB ergibt. Da dieser Zwischenschritt im Kopf fehleranfällig ist, übernimmt die Online-Umwandlung diese Berechnung verlässlich.

Welche Funktion erfüllen die beiden letzten Zeichen bei 8-stelligen Hex-Werten?

Dieses zusätzliche Ziffernpaar steuert den Alpha-Kanal für die Deckkraft. Dabei steht FF für volle Deckkraft und 00 für vollständige Transparenz, während Zwischenwerte linear auf dieser Skala abgebildet werden.

Warum darf bei niedrigen Werten wie 5 die Null nicht weggelassen werden?

Jeder Farbkanal im Hex-Code erfordert exakt zwei Ziffern. Aus dem Wert 5 muss deshalb zwingend 05 werden. Würde die führende Null entfallen, verkürzt sich der gesamte Farbcode und alle nachfolgenden Kanäle geraten an die falsche Position.

Welcher Kontrastwert wird für barrierefreien Text im Web vorausgesetzt?

Nach WCAG AA ist für regulären Fließtext ein Verhältnis von mindestens 4.5:1 vorgeschrieben. Für große Schriftarten ab 18pt oder 14pt in fetter Formatierung genügt ein Kontrastverhältnis von 3:1.

Wann eignet sich rgba() und wann die 8-stellige Hex-Variante?

Beide Varianten werden von modernen Browsern interpretiert und bilden dieselben Farb- und Transparenzwerte ab. Die Schreibweise rgba() ist oft selbsterklärender, während 8-stellige Hex-Codes kompakter ausfallen. Wähle das Format, das am besten zum Stil deines Projekts passt.

Cookie
Wir kümmern uns um Ihre Daten und würden gerne Cookies verwenden, um Ihr Erlebnis zu verbessern.