Webdesign und CSS
Wandeln Sie eine Farbe aus einer Designdatei oder einem Screenshot-Auswahlfenster in den Hex-Code um, den Ihr Stylesheet benötigt.
RGB-zu-HEX-Konverter – Wandeln Sie RGB-Werte in Hex-Codes und Hex-Codes in RGB um – mit Live-Vorschau.
Geben Sie rote, grüne und blaue Zahlen ein, wählen Sie eine Farbe aus oder fügen Sie einen Hex-Code ein, um alle Darstellungsformen auf einen Blick zu sehen: HEX, RGB und HSL. Eine Live-Vorschau und eine Kontrastprüfung zeigen Ihnen, welche Textfarbe am besten passt. Alles läuft direkt in Ihrem Browser.
Eine Farbe umwandeln
Ihre Farben bleiben in Ihrem Browser gespeichert
Wähle eine Farbe aus oder gib sie ein
Aa
Farbcodes
HEX
–RGB (CSS)
–HSL (CSS)
–– Die beste Textfarbe dafür
–Kontrastverhältnis
Der Leitfaden
Leitfaden „RGB zu HEX“: Farbcodes, HSL und Kontrast
Erfahren Sie, wie Farbcodes funktionieren und wie Sie gut erkennbare Farbkombinationen auswählen.
Was macht ein RGB-zu-HEX-Konverter?
Bildschirme erzeugen jede Farbe durch die Mischung von rotem, grünem und blauem Licht. Bei RGB wird diese Mischung als drei Zahlen zwischen 0 und 255 dargestellt. Bei HEX werden dieselben drei Zahlen im 16er-System als Kurzcode wie beispielsweise #1F3A5F dargestellt, der üblicherweise in CSS, Design-Tools und Markenrichtlinien verwendet wird.
Geben Sie die drei Zahlen ein, wählen Sie mit dem Farbwähler eine Farbe aus oder fügen Sie einen Hex-Code ein. Alle Formate werden gleichzeitig aktualisiert, und Sie erhalten außerdem eine HSL-Version sowie eine Empfehlung, welche Textfarbe darauf am besten zur Geltung kommt.
Warum konvertieren Menschen RGB in HEX?
Marke und Dokumente
Achten Sie darauf, dass die Markenfarben in der Logodatei, der Präsentation und auf der Website einheitlich sind.
Barrierefreiheit
Prüfen Sie vor der Veröffentlichung, welche Textfarbe auf dem jeweiligen Hintergrund gut zur Geltung kommt, und überprüfen Sie das Kontrastverhältnis.
Wie aus RGB HEX wird
Jede der drei Zahlen wird in einen zweistelligen Wert zur Basis 16 umgewandelt, anschließend werden die drei Paare miteinander verbunden.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
Im 16er-System werden die Ziffern 0–9 und die Buchstaben A–F verwendet, wobei A für 10 und F für 15 steht. Ein Kurzcode wie #FA0 ist eine Kurzschreibweise: Jede Ziffer wird verdoppelt, sodass er #FFAA00 bedeutet.
Gängige Farben in RGB und HEX
| Farbe | RGB | HEX |
|---|---|---|
| Schwarz | 0, 0, 0 | #000000 |
| Weiß | 255, 255, 255 | #FFFFFF |
| Rot | 255, 0, 0 | #FF0000 |
| Grün | 0, 255, 0 | #00FF00 |
| Blau | 0, 0, 255 | #0000FF |
| Gelb | 255, 255, 0 | #FFFF00 |
| Orange | 255, 165, 0 | #FFA500 |
| Grau | 128, 128, 128 | #808080 |
So verwenden Sie den RGB-zu-HEX-Konverter
- Geben Sie die Rot-, Grün- und Blauwerte ein oder klicken Sie auf das Farbfeld, um die Farbauswahl zu nutzen.
- Oder fügen Sie einen Hex-Code in das Feld „Hex“ ein, um den umgekehrten Weg zu gehen.
- Lesen Sie die HEX-, RGB- und HSL-Codes aus und überprüfen Sie das Kontrastverhältnis sowie die optimale Textfarbe.
- Klicken Sie neben dem gewünschten Format auf „Kopie“.
Einfache Tipps für den Umgang mit Farben
- Um die Lesbarkeit des Textes zu gewährleisten, sollten Sie ein Kontrastverhältnis von mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text anstreben.
- Bei Hex-Codes wird die Groß-/Kleinschreibung nicht berücksichtigt, daher haben #1f3a5f und #1F3A5F dieselbe Farbe.
- Das führende # ist in CSS erforderlich, hier jedoch optional. Sie können den Code mit oder ohne dieses Zeichen einfügen.
- Bildschirme und Drucker geben Farben unterschiedlich wieder, sodass die gedruckte Farbe möglicherweise nicht mit der Farbe übereinstimmt, die Sie auf dem Bildschirm sehen.
Einschränkungen und Datenschutz
Datenschutz
Ihre Farben werden in Ihrem Browser umgewandelt. Es werden keine Daten an unseren Server gesendet oder dort gespeichert. Auf Ihrem Gerät wird lediglich die Auswahl der Kleinbuchstaben gespeichert.
Einschränkungen
Das Tool arbeitet mit standardmäßigen 8-Bit-sRGB-Farben im Bereich von 0 bis 255 pro Kanal. Es unterstützt weder Transparenz (RGBA oder 8-stellige Hex-Werte) noch CMYK für den Druck oder Farbräume mit großem Farbumfang.
Häufig gestellte Fragen
Häufig gestellte Fragen zum RGB-zu-HEX-Konverter
Wie konvertiere ich RGB in HEX?
Geben Sie die Rot-, Grün- und Blauwerte ein, jeweils im Bereich von 0 bis 255. Das Tool wandelt jede Zahl in zwei Ziffern im 16er-System um und fügt sie zusammen, sodass aus 31, 58, 95 die Zahl #1F3A5F wird.
Wie wandle ich HEX in RGB um?
Fügen Sie den Hex-Code in das Feld „Hex“ ein. Die drei RGB-Werte werden automatisch ausgefüllt. Beispielsweise entspricht #FF8800 den Werten 255, 136, 0.
Muss der Hex-Code mit einem #-Zeichen versehen werden?
Nein. Sie können es mit oder ohne das # eingeben, und Kurzcodes wie #FA0 funktionieren ebenfalls. Das Ergebnis enthält immer das #, sodass es für CSS bereit ist.
Was bedeuten die drei RGB-Werte?
Sie geben die Intensität des roten, grünen und blauen Lichts an, von 0 (keines) bis 255 (voll). 0, 0, 0 entspricht Schwarz und 255, 255, 255 entspricht Weiß.
Wozu dient der HSL-Wert?
HSL beschreibt eine Farbe anhand von Farbton, Sättigung und Helligkeit. Oft lässt sich eine Farbe damit leichter manuell anpassen – beispielsweise, um sie etwas heller zu machen –, und das funktioniert direkt in CSS.
Was sagt mir das Kontrastverhältnis aus?
Es zeigt, wie gut sich schwarzer oder weißer Text von Ihrer Hintergrundfarbe abhebt. Ein Kontrastverhältnis von 4,5 : 1 oder mehr ist gemäß den WCAG-Richtlinien zur Barrierefreiheit das übliche Mindestmaß für normalen Text.
Kann ich Transparenz einbeziehen?
Nicht hier. Dieses Tool verarbeitet ausschließlich deckende Farben ohne Alphakanal. Um Transparenz zu erzielen, fügen Sie in Ihrem CSS selbst einen Alpha-Wert in rgba() hinzu.
Werden meine Daten irgendwo gespeichert oder weitergeleitet?
Nein. Die Umrechnung erfolgt in Ihrem Browser, und es werden keine Daten von Ihrem Gerät übertragen. Lediglich Ihre Auswahl der Kleinbuchstaben wird für das nächste Mal gespeichert.
Von Nutzern dieses Tools
Rezensionen
Bewertungen werden geladen…
Mach weiter so
Weitere Werkzeuge im Kasten
Auf der Startseite finden Sie Dutzende weiterer kostenloser Tools, für die kein API-Schlüssel erforderlich ist.
UUID-Generator
Erstellen Sie zufällige UUIDs der Typen v4, v7 und v5 in großen Mengen.
Werkzeug öffnenLeerzeichenentferner
Entfernen Sie überflüssige Leerzeichen, Tabulatoren und Leerzeilen.
Werkzeug öffnenEinheitenrechner
Länge, Gewicht, Geschwindigkeit und mehr umrechnen.
Werkzeug öffnenRömische-Zahlen-Konverter
Zahlen in römische Ziffern umwandeln und umgekehrt.
Werkzeug öffnen