HEX in RGB umrechnen Hexadecimal ↔ Red Green Blue Kostenlos Online Sicher
Geben Sie einen Wert in HEX ein und lesen Sie ihn sofort in RGB ab. Gerechnet wird in Ihrem Browser, nichts wird irgendwohin geschickt, und wovon das Ergebnis abhängt, steht unten, statt vorausgesetzt zu werden.
Kein Upload
Woher diese Schreibweisen kommen
Hex und RGB sind dasselbe, zweimal geschrieben. Eine Bildschirmfarbe sind drei Zahlen — wie viel rotes, grünes und blaues Licht auszusenden ist —, jede von 0 bis 255, also ein Byte; Hex schreibt diese Bytes schlicht im Sechzehnersystem, sodass #FF8800 und rgb(255, 136, 0) derselbe Befehl an denselben Bildpunkt sind. HSL wurde erfunden, weil keines von beiden für Menschen lesbar ist: es gibt den Farbton als Winkel auf einem Farbkreis an, Sättigung und Helligkeit als Prozentwerte, sodass ein Gestalter etwas heller machen kann, ohne drei Zahlen neu zu berechnen. CMYK gehört einer ganz anderen Welt an — der Farbe, nicht dem Licht. Es ist subtraktiv, aus vier Druckplatten gebaut, und es erreicht nicht jede Farbe, die ein Bildschirm kann, denn der Bildschirm sendet Licht aus, das Papier wirft es nur zurück.
Wo sie Ihnen begegnen
Hex ist das, was Sie in ein Stylesheet tippen und was ein Gestaltungswerkzeug Ihnen reicht. RGB erscheint überall dort, wo mit einer Farbe gerechnet wird — Verläufe, Transparenz, Code, der einen Ton berechnet. Zu HSL greift man beim Abstimmen einer Palette von Hand, weil die gewünschten Änderungen meist Änderungen einer seiner drei Zahlen sind. CMYK verlangt die Druckerei, und die Umrechnung dorthin ist der Augenblick, in dem ein Entwurf aufhört, Licht zu sein, und zu Farbe wird.
Häufige Fragen
Warum weicht mein CMYK-Ergebnis von dem der Druckerei ab?
Weil es keine einzige richtige Umrechnung gibt. Die Rechnung auf dieser Seite ist die einfache, geräteunabhängige — die richtige Antwort, wenn Sie einen Ausgangspunkt oder eine grobe Entsprechung brauchen. Eine Druckerei rechnet über ein Farbprofil um, das die bestimmte Farbe, das Papier und die Maschine berücksichtigt; dieselbe RGB-Farbe ergibt auf glänzendem Papier andere CMYK-Werte als auf ungestrichenem. Was genau stimmen muss, verlangt das Profil der Druckerei, nicht das Vertrauen in eine Formel.
Warum lassen sich manche Bildschirmfarben nicht drucken?
Weil beide nicht dieselben Farben erreichen. Ein Bildschirm macht Farbe durch Hinzufügen von Licht und kann ein leuchtendes, gesättigtes Cyan oder Grün erzeugen, dem Druckfarbe schlicht nicht nahekommt; Papier macht Farbe durch Verschlucken von Licht, und das Hellste, was es je sein kann, ist das Weiß der Seite. Die Menge der erreichbaren Farben heißt Farbraum, und wo sie sich nicht überschneiden, muss eine Umrechnung die nächstliegende verfügbare Farbe wählen. Darum wirkt eine leuchtende Bildschirmfarbe im Druck oft etwas matter.
Ist das Ergebnis exakt?
Wo beide Einheiten durch ganze Zahlen voneinander abgeleitet sind, ja — die Seite sagt es über der Zahl, und gerundet wird nur bei der Anzahl der angezeigten Stellen. Wo das Verhältnis keine endliche Dezimalzahl hat, zeigt die Seite zwölf signifikante Stellen und nennt die Beziehung näherungsweise, statt etwas anderes vorzugeben.
Verlässt etwas, das ich eingebe, mein Gerät?
Nein. Die Rechnung läuft in Ihrem Browser; nichts wird hochgeladen, und es gibt auch keinen Server dafür. Einmal geladen, funktioniert die Seite auch ohne Netz.
Warum man HEX in RGB umrechnet
Ein Designwerkzeug gibt Ihnen eine Farbe als #5A4632. Ein Stylesheet, ein Canvas-Skript, eine Diagrammbibliothek oder ein Grafikprogramm verlangt sie als rgb(90, 70, 50). Es ist dieselbe Farbe, und die Arbeit, von der einen Schreibweise zur anderen zu kommen, taucht ständig auf: Ein Markenhandbuch führt Hex-Codes auf, und Ihr Code braucht Zahlen, um einen helleren Ton zu berechnen; ein Kunde schickt eine Farbe aus einem Logo, und Sie müssen ein rgba() mit Transparenz füllen; eine Bibliothek akzeptiert nur drei getrennte Werte. HEX in RGB umzurechnen ist eine kleine Aufgabe, und ein verlässlicher Umrechner erspart Ihnen, Arithmetik im Sechzehnersystem im Kopf zu betreiben und sich dabei zu irren.
Die Umrechnung ist exakt, was nicht für jede Farbumrechnung gilt. Hex und rgb() sind zwei Schreibweisen derselben drei Zahlen, der Mengen an rotem, grünem und blauem Licht, die ein Bildschirm aussenden soll, jede von 0 bis 255. Nichts wird angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begann. Diese Seite erledigt es in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie, wie Hex-Ziffern auf die drei Zahlen abgebildet werden, wie Transparenz mitgenommen wird, was die Kurzform bewirkt, die Grenzen von sRGB und die Situationen, in denen Entwickler und Designer HEX in RGB umrechnen müssen.
Wie die Umrechnung funktioniert
Drei Ziffernpaare werden zu drei Zahlen
Eine Hex-Farbe ist ein Rautenzeichen, gefolgt von sechs hexadezimalen Ziffern, die paarweise gelesen werden: Das erste Paar ist Rot, das zweite Grün, das dritte Blau. Jedes Paar ist eine Zahl im Sechzehnersystem zwischen 00 und FF, das sind 0 bis 255 in dem Dezimalsystem, das Sie täglich nutzen. #5A4632 teilt sich also in 5A, 46 und 32. 5A ist 5 × 16 + 10 = 90, 46 ist 4 × 16 + 6 = 70, und 32 ist 3 × 16 + 2 = 50. Die Farbe ist rgb(90, 70, 50), das Beispiel, mit dem die Seite beginnt.
Warum die Ziffern von 0 bis F gehen
Das Sechzehnersystem braucht sechzehn Symbole, nach der 9 kommen also die Buchstaben A bis F, die für 10 bis 15 stehen. Ein Paar solcher Ziffern ergibt 16 × 16 = 256 Werte, genau das, was ein Byte fassen kann. Eine Bildschirmfarbe sind drei Bytes, und Hex ist einfach eine kompakte Art, sie zu schreiben: sechs Zeichen statt dreier Zahlen mit Kommas und Klammern.
Groß- und Kleinschreibung
#5a4632 und #5A4632 sind dieselbe Farbe. CSS akzeptiert beides, und dieser Umrechner ebenso. Wählen Sie für ein Projekt eine Konvention und bleiben Sie dabei, denn gemischte Schreibung erschwert das Durchsuchen eines Stylesheets.
Was die Umrechnung erhält und was nicht
Sie erhält die Farbe, exakt
Hex und rgb() sind zwei Schreibweisen derselben drei Zahlen, 0 bis 255 für Rot, Grün und Blau, es wird also nichts angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begann. Rechnen Sie HEX in RGB und zurück, haben Sie denselben Code, mit dem Sie begonnen haben, mit der möglichen Ausnahme der Großbuchstaben.
Sie nimmt Transparenz mit
Ein vierter Wert für die Transparenz wird ebenfalls mitgenommen: #RRGGBBAA wird zu rgba() und zurück. Das letzte Paar ist der Alphakanal, von 00, vollständig durchsichtig, bis FF, vollständig deckend. #5A463280 ist also rgba(90, 70, 50, 0.5), da 80 in Hex 128 ist und 128 von 255 etwa die Hälfte. Acht Ziffern werden von allen aktuellen Browsern akzeptiert.
Sie kann keine Farben außerhalb von sRGB beschreiben
Beide Schreibweisen beschreiben sRGB, den Farbraum, den ein Bildschirm seit dreißig Jahren verwendet. Sie können keine Farbe außerhalb davon beschreiben, wofür die neueren CSS-Schreibweisen lab(), oklch() und color() existieren. Moderne Displays können gesättigtere Farben zeigen, als sRGB fasst, und ein Designer, der eine solche Farbe in einem Werkzeug mit großem Farbraum wählte, sieht sie auf sRGB beschnitten, wenn sie als Hex geschrieben wird.
Die Kurzform wird erweitert, nicht bewahrt
Die Kurzform wird erweitert statt bewahrt: #abc kommt als #AABBCC zurück, dieselbe Farbe, auf lange Weise geschrieben. Jede Ziffer wird verdoppelt. Das heißt, Sie können einen dreistelligen Code einfügen und erhalten die richtigen Zahlen, aber Sie können die kurze Schreibweise nicht durch bloßes Ansehen aus der langen zurückgewinnen, nur indem Sie prüfen, ob sich jedes Paar wiederholt.
Gängige Farben und ihre Zahlen
Einige zum Merken
Weiß ist #FFFFFF, das ist rgb(255, 255, 255): alle drei Lichter mit voller Leistung. Schwarz ist #000000, rgb(0, 0, 0): überhaupt kein Licht. Reines Rot ist #FF0000, Grün #00FF00 und Blau #0000FF. Ein mittleres Grau ist jeder Code mit drei gleichen Paaren, etwa #808080, das ist rgb(128, 128, 128). Gleiche Paare bedeuten stets Grau, weil gleiche Mengen der drei Lichter keinen Farbton ergeben.
Einen Code auf einen Blick lesen
Kennen Sie das Muster, können Sie eine Farbe aus ihren Hex-Ziffern abschätzen. Ein Code, der mit einem hohen ersten Paar beginnt, ist rötlich, ein hohes mittleres Paar grünlich, ein hohes letztes Paar bläulich. #FF8800 ist viel Rot, etwas Grün und kein Blau, also Orange. Dafür brauchen Sie kein Werkzeug, aber für die exakten Zahlen.
So rechnen Sie HEX hier in RGB um
Den Hex-Code eintippen oder einfügen
Geben Sie die Farbe im ersten Feld ein, mit oder ohne Rautenzeichen. Drei-, sechs- und achtstellige Formen werden akzeptiert.
Den RGB-Wert ablesen
Die Antwort erscheint sofort im anderen Feld, in der Form rgb(90, 70, 50), oder rgba(), wenn der Code Transparenz trug. Die Seite zeigt den Satz #5A4632 = rgb(90, 70, 50), damit Sie auf einen Blick prüfen können.
In Ihren Code kopieren
Fügen Sie das Ergebnis in das Stylesheet, das Skript oder das Werkzeug ein, das danach verlangt hat. Brauchen Sie die drei Zahlen getrennt, sind es die in den Klammern.
Woher diese Schreibweisen kommen
Hex und RGB sind dasselbe, zweimal geschrieben
Eine Bildschirmfarbe sind drei Zahlen, wie viel rotes, grünes und blaues Licht ausgesendet werden soll, jede von 0 bis 255, also ein Byte. Hex schreibt diese Bytes einfach im Sechzehnersystem, #FF8800 und rgb(255, 136, 0) sind also dieselbe Anweisung an dasselbe Pixel.
HSL und CMYK
HSL wurde erfunden, weil keine der beiden für Menschen lesbar ist: Es gibt den Farbton als Winkel um einen Farbkreis an, mit Sättigung und Helligkeit als Prozentwerten, sodass ein Designer etwas heller machen kann, ohne drei Zahlen neu zu berechnen. CMYK gehört zu einer ganz anderen Welt, Druckfarbe statt Licht. Es ist subtraktiv, aus vier Druckplatten aufgebaut, und kann nicht jede Farbe erreichen, die ein Bildschirm zeigen kann, weil ein Bildschirm Licht aussendet, während Papier es nur reflektiert. Siehe dazu HEX in HSL umrechnen und HEX in CMYK umrechnen.
Wo sie Ihnen begegnen
In Stylesheets
Hex tippen Sie in ein Stylesheet, und es ist das, was ein Designwerkzeug Ihnen gibt. RGB erscheint überall dort, wo eine Farbe Arithmetik braucht: Verläufe, Transparenz, Code, der einen Ton berechnet. Beide Schreibweisen zu kennen und zwischen ihnen wechseln zu können, gehört zur alltäglichen Frontend-Arbeit.
In Skripten und beim Zeichnen auf Canvas
Zeichencode will oft die drei Zahlen getrennt, um zwei Farben zu mischen, eine um einen festen Betrag abzudunkeln oder zu prüfen, ob ein Pixel einem Zielwert entspricht. HEX in RGB umzurechnen gibt Ihnen die Zahlen direkt.
In Grafik- und Bildwerkzeugen
Bildeditoren zeigen eine Farbe meist als drei Zahlen oder als Hex-Code und lassen Sie beides eintippen. Der Wechsel zwischen beiden lässt Sie eine Farbe von einer Webseite in einem Programm reproduzieren, das Zahlen will.
In Dokumentation und Markenhandbüchern
Ein Markenhandbuch kann eine Farbe in Hex für das Web, in RGB für Bildschirme und in CMYK für den Druck aufführen. Die ersten beiden in Übereinstimmung zu bringen, ist eine Umrechnung, und es ist die Art von Prüfung, die einen Tippfehler abfängt, bevor er auf tausend Prospekte gedruckt wird.
Praktische Verwendungen der RGB-Form
Transparenz ohne zweite Farbe
Mit rgba(90, 70, 50, 0.5) erhalten Sie die Farbe in halber Stärke, sodass durchscheint, was dahinter liegt. Es ist der Standardweg, aus einer Markenfarbe Überlagerungen, Schatten und getönte Hintergründe zu machen, ohne eine neue zu erfinden.
Hellere und dunklere Töne berechnen
Um einen Hover-Zustand etwas dunkler zu machen, kann ein Skript von jeder der drei Zahlen einen festen Betrag abziehen. Dasselbe an einer Hex-Zeichenkette zu tun ist umständlich; bei rgb ist es schlichte Arithmetik. Brauchen Sie eine auf den Farbton gestützte Anpassung, rechnen Sie stattdessen HEX in HSL um.
Kontrastprüfungen
Barrierefreiheitswerkzeuge berechnen den Kontrast zwischen zwei Farben aus ihren Rot-, Grün- und Blauwerten. Mit den Zahlen können Sie die Rechnung selbst machen oder sie in einen Prüfer einfügen, um zu bestätigen, dass Text auf einem Hintergrund lesbar ist.
Fallen beim Umrechnen von HEX in RGB
Das Alphapaar vergessen
Ein achtstelliger Code trägt die Transparenz in den letzten zwei Ziffern. Schneiden Sie sie ab, verlieren Sie sie. Prüfen Sie die Länge des Codes, bevor Sie entscheiden, dass das Ergebnis die Farbe ist.
Die Reihenfolge verwechseln
Hex ist Rot, Grün, Blau. Einige Formate und manche alten Grafik-APIs nutzen Blau, Grün, Rot. Kommt eine Farbe in einem bestimmten Programm falsch heraus, prüfen Sie dessen Kanalreihenfolge.
Aus einem Screenshot kopieren
Eine aus einem Screenshot gelesene Farbe ist die Farbe nach der Farbverwaltung des Bildschirms und einer eventuellen Kompression. Sie kann leicht von der Farbe in der Quelldatei abweichen. Nutzen Sie die Designdatei, wenn Sie können.
Annehmen, Bildschirme stimmten überein
Zwei Bildschirme zeigen denselben Code leicht unterschiedlich. Die Zahlen sind exakt; was Sie sehen, hängt vom Display und seinem Profil ab.
Fragen, die man vor dem Umrechnen stellt
Was ist #FF0000 in RGB?
rgb(255, 0, 0), reines Rot.
Was ist #FFFFFF in RGB?
rgb(255, 255, 255), Weiß.
Kann ich einen dreistelligen Code umrechnen?
Ja. Jede Ziffer wird verdoppelt: #09C wird zu #0099CC, das ist rgb(0, 153, 204).
Ist die Umrechnung exakt?
Ja. Es sind zwei Schreibweisen derselben drei Zahlen.
Wird meine Farbe hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit RGB in HEX umrechnen, das die drei Zahlen als Hex-Code schreibt.
Klug wählen, wenn Sie HEX in RGB umrechnen
Wissen, was Sie als Nächstes brauchen
Brauchen Sie Transparenz, ist rgba() die natürliche Form. Müssen Sie Helligkeit oder Farbton anpassen, ist HSL leichter. Geht die Farbe in den Druck, ist CMYK der nächste Schritt, mit den Vorbehalten, die die Umrechnung mit sich bringt. Siehe RGB in CMYK umrechnen.
Das Hex als Master behalten
Behalten Sie bei Farben einer Markenpalette den Hex-Code als Referenz. Er ist kurz, eindeutig und überall verstanden. Leiten Sie die anderen Formen daraus ab, wenn Sie sie brauchen.
Benutzerdefinierte Eigenschaften verwenden
Definieren Sie in CSS Farben einmal, als --brand: #5A4632, und sprechen Sie sie mit Namen an. Brauchen Sie die Zahlen für rgba(), definieren Sie zusätzlich --brand-rgb: 90 70 50. Die Umrechnung ist dann ein einziges Mal erledigt.
Modernes CSS und die RGB-Form
Syntax mit Leerzeichen
Aktuelles CSS akzeptiert rgb() mit Leerzeichen und einem Schrägstrich für Transparenz, wie in rgb(90 70 50 / 50%). Die Zahlen sind dieselben wie in der Form mit Kommas, das Ergebnis einer Umrechnung funktioniert also in beiden. Ältere Browser und manche Werkzeuge erwarten die Kommas, die Form mit Kommas bleibt also die sichere Wahl, wenn Sie nicht wissen, wo die Farbe verwendet wird.
Prozentwerte und Bruchteile
RGB lässt sich auch mit Prozentwerten schreiben, etwa rgb(35% 27% 20%), wobei 100 Prozent 255 sind. Die Seite liefert ganze Zahlen, weil Hex sie speichert und die meisten Werkzeuge sie erwarten. Brauchen Sie Prozentwerte, teilen Sie jede Zahl durch 255 und multiplizieren Sie mit 100.
Benutzerdefinierte Eigenschaften für die drei Zahlen
Ein verbreiteter Kniff ist, nur die drei Zahlen in einer benutzerdefinierten Eigenschaft zu speichern, --brand-rgb: 90 70 50, und sie als rgb(var(--brand-rgb) / 0.5) zu verwenden. So bedient eine einzige Definition deckende wie durchscheinende Verwendungen. Wenn Sie dafür HEX in RGB umrechnen, kopieren Sie nur die Zahlen aus der Antwort.
In der Praxis mit Farbe arbeiten
Gegen das Markenhandbuch prüfen
Nennt ein Markenhandbuch für dieselbe Farbe sowohl Hex als auch RGB, rechnen Sie eines um und vergleichen Sie mit dem anderen. Eine Abweichung bedeutet meist einen Tippfehler im Handbuch, und ihn zu finden, bevor er auf jeder Seite verwendet wird, ist die Minute wert, die es dauert.
Eine Palette als kurze Liste führen
Die meisten Websites verwenden fünf bis acht Farben. Schreiben Sie sie in einer Notiz in beiden Formen auf. Jedes Mal, wenn Sie für eine neue Komponente HEX in RGB umrechnen müssen, können Sie nachschlagen, statt es erneut auszurechnen, und die Palette bleibt einheitlich.
Farben nach Rolle benennen
Namen wie Primär, Fläche und Warnung überstehen Neugestaltungen besser als Namen wie Grün oder Braun. Die Umrechnung liefert die Zahlen; der Name sagt, wofür sie da sind.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Für den Rückweg nutzen Sie RGB in HEX umrechnen. Für durch den Farbton beschriebene Farben stehen HEX in HSL umrechnen und HSL in HEX umrechnen bereit, und für den Druck HEX in CMYK umrechnen, CMYK in HEX umrechnen und CMYK in RGB umrechnen. Für die Größen im selben Stylesheet leisten px in rem umrechnen und px in em umrechnen für Längen, was diese Seite für Farben leistet.
Ein durchgerechnetes Beispiel
Angenommen, Ihre Markenfarbe ist #1E7A5C und Sie wollen eine durchscheinende Fassung für den Hintergrund einer Karte. Sie tippen den Code und lesen rgb(30, 122, 92) ab. Im Stylesheet schreiben Sie background: rgba(30, 122, 92, 0.12), eine sehr helle Tönung desselben Grüns, und einen Rahmen von rgba(30, 122, 92, 0.4). Die Karte sitzt bequem auf einer weißen Seite und auf einer grauen, weil die Transparenz die Seite durchlässt. Wird die Markenfarbe später geändert, ersetzen Sie die drei Zahlen in einer einzigen benutzerdefinierten Eigenschaft, und jede Tönung folgt.
Eine kurze Checkliste
Vor dem Umrechnen
Prüfen Sie die Länge des Codes: drei, sechs oder acht Ziffern. Entscheiden Sie, ob Sie Transparenz brauchen.
Beim Umrechnen
Fügen Sie den Code ein, lesen Sie den RGB-Wert ab und kopieren Sie ihn mit den Klammern oder nur die drei Zahlen.
Nach dem Umrechnen
Testen Sie die Farbe im Kontext, auf dem echten Hintergrund, und prüfen Sie den Kontrast von Text darauf.
Häufige Fehler
Das Transparenzpaar weglassen
Acht Ziffern bedeuten Alpha. Behalten Sie es oder wandeln Sie es in rgba() um.
Die Kanalreihenfolge verwechseln
Hex beginnt mit Rot. Manche Werkzeuge erwarten Blau zuerst.
Den Bildschirm für die Wahrheit halten
Die Zahlen sind exakt. Das Aussehen hängt vom Display ab.
Ihre Farben bleiben auf Ihrem Gerät
Die Berechnung findet lokal statt. Ihre Werte werden von Ihrem eigenen Browser verwendet, und nichts wird irgendwohin gesendet. Hinterher gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, HEX in RGB umzurechnen.
Zusammenfassung
Um HEX hier in RGB umzurechnen, tippen oder fügen Sie den Hex-Code ein und lesen den RGB-Wert sofort ab. Die Umrechnung erhält die Farbe exakt: Hex und rgb() sind zwei Schreibweisen derselben drei Zahlen, 0 bis 255 für Rot, Grün und Blau, es wird also nichts angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begann. Ein vierter Wert für die Transparenz wird ebenfalls mitgenommen, denn #RRGGBBAA wird zu rgba() und zurück. Beide Schreibweisen beschreiben sRGB und können deshalb keine Farben außerhalb davon beschreiben, und die Kurzform wird erweitert statt bewahrt: #abc kommt als #AABBCC zurück. Nichts wird hochgeladen.