RGB in HEX umrechnen Red Green Blue ↔ Hexadecimal Kostenlos Online Sicher
Geben Sie einen Wert in RGB ein und lesen Sie ihn sofort in HEX 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 RGB in HEX umrechnet
Ein Bildeditor, eine Farbauswahl des Betriebssystems oder eine Codezeile liefert Ihnen eine Farbe als drei Zahlen: 90, 70, 50. Ein Stylesheet, eine Datei mit Design-Tokens oder eine Nachricht an einen Kollegen will sie als einen kurzen Code: #5A4632. Der Schritt dazwischen ist, was diese Seite tut. RGB in HEX umzurechnen heißt, dieselben drei Zahlen im Sechzehnersystem zu schreiben, je zwei Ziffern, und ein Rautenzeichen davorzusetzen. Bei einer einzelnen Farbe ist das leicht und bei zwanzig mühsam, und es ist leicht falsch zu machen, wenn eine Zahl eine führende Null braucht oder eine Ziffer ein Buchstabe ist.
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, jeweils von 0 bis 255. Nichts wird angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begonnen hat. Die Seite erledigt das in Ihrem Browser, und nichts wird hochgeladen. Weiter unten erfahren Sie, wie aus jeder Zahl zwei Hex-Ziffern werden, wie Transparenz übernommen wird, die Grenzen von sRGB, die Stellen, an denen man RGB in HEX umrechnen muss, und einige Gewohnheiten, die Farben in einem Projekt einheitlich halten.
Wie die Umrechnung funktioniert
Jede Zahl wird zu zwei Hex-Ziffern
Nehmen Sie rgb(90, 70, 50). Teilen Sie jede Zahl durch sechzehn: 90 ist 5 mal 16 plus 10, und 10 ist die Ziffer A, also wird aus 90 die 5A. 70 ist 4 mal 16 plus 6, also 46. 50 ist 3 mal 16 plus 2, also 32. Setzen Sie die drei Paare zusammen und fügen Sie das Rautenzeichen hinzu: #5A4632. Die Seite erledigt das beim Tippen für Sie und zeigt den Satz rgb(90, 70, 50) = #5A4632, damit Sie ihn prüfen können.
Führende Nullen
Jedes Paar muss zwei Ziffern haben. Eine Zahl unter 16 braucht eine Null davor: Aus 7 wird 07 und aus 0 wird 00. So ist rgb(0, 7, 255) gleich #0007FF und nicht #07FF, was etwas ganz anderes bedeuten würde. Die Null zu vergessen ist der häufigste Fehler beim Umrechnen von Hand.
Der Wertebereich
Jede Zahl muss zwischen 0 und 255 liegen. Ein Wert über 255 lässt sich nicht in zwei Hex-Ziffern schreiben, und ein negativer Wert hat keine Bedeutung. Hat eine Berechnung in Ihrem Code 270 oder −5 ergeben, begrenzen Sie sie zuerst auf den Bereich. Der Umrechner tut dasselbe, damit er nie einen ungültigen Code erzeugt.
Was die Umrechnung behält und was nicht
Sie behält die Farbe, exakt
Hex und rgb() sind zwei Schreibweisen derselben drei Zahlen, 0 bis 255 für Rot, Grün und Blau, nichts wird also angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begonnen hat. Rechnen Sie RGB in HEX und zurück um, haben Sie die Zahlen, mit denen Sie begonnen haben.
Sie übernimmt die Transparenz
Auch ein vierter Wert für die Transparenz wird übernommen: #RRGGBBAA wird zu rgba() und zurück. Eine Transparenz von 0,5 wird zum Paar 80, da die Hälfte von 255 etwa 128 ist, und das sind 80 in Hex. So ist rgba(90, 70, 50, 0.5) gleich #5A463280. Achtstelliges Hex wird 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. Eine Farbe außerhalb davon können sie nicht beschreiben, wofür es die neueren CSS-Schreibweisen lab(), oklch() und color() gibt. Gehen Sie von einer Farbe in einem Werkzeug mit weitem Farbraum aus, sind die drei Zahlen, die Sie kopieren, bereits die sRGB-Fassung, und das Hex ist ihr gegenüber getreu.
Sie bewahrt die Kurzform nicht
Wo ein Code dreistellig geschrieben werden könnte, etwa #AABBCC als #ABC, liefert der Umrechner die lange Form. Die lange Form ist immer gültig und dieselbe Farbe; die kurze ist nur eine Bequemlichkeit für den Leser.
Gängige Farben und ihre Codes
Einige zum Merken
rgb(255, 255, 255) ist #FFFFFF, Weiß: alle drei Lichter mit voller Leistung. rgb(0, 0, 0) ist #000000, Schwarz: gar kein Licht. rgb(255, 0, 0) ist #FF0000, reines Rot; rgb(0, 255, 0) ist #00FF00 und rgb(0, 0, 255) ist #0000FF. Jede Farbe mit drei gleichen Zahlen ist ein Grau, und ihr Code hat drei gleiche Paare: rgb(128, 128, 128) ist #808080.
Die Web-Safe-Gewohnheit
Ältere Leitfäden sprachen von websicheren Farben, deren Paare nur 00, 33, 66, 99, CC oder FF waren. Sie gehören in die Zeit der 256-Farben-Bildschirme und haben keinen Grund zu überleben. Verwenden Sie jeden Wert, den Sie mögen; der Bildschirm kann sie alle zeigen.
So rechnen Sie RGB hier in HEX um
Die drei Zahlen eingeben
Geben Sie die Farbe im ersten Feld in der Form rgb(90, 70, 50) ein oder mit durch Kommas oder Leerzeichen getrennten Zahlen. Prozentwerte sind nicht nötig; verwenden Sie Zahlen von 0 bis 255.
Den Hex-Code ablesen
Die Antwort erscheint sofort im anderen Feld, beginnend mit einem Rautenzeichen, in Großbuchstaben. Haben Sie einen vierten Wert für die Transparenz angegeben, hat der Code acht Ziffern.
In Ihre Arbeit kopieren
Fügen Sie den Code in das Stylesheet, die Token-Datei oder die Nachricht ein. Nehmen Sie ihn in Ihre Palettennotiz auf, damit die nächste Umrechnung ein Nachschlagen ist.
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 wird, jeweils 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 keines von beiden für Menschen lesbar ist: Es gibt den Farbton als Winkel auf einem Farbkreis an, mit Sättigung und Helligkeit als Prozentwerten, sodass eine Designerin etwas heller machen kann, ohne drei Werte neu zu berechnen. CMYK gehört zu einer ganz anderen Welt, Farbe statt Licht. Es ist subtraktiv, aus vier Druckplatten aufgebaut, und es kann nicht jede Farbe erreichen, die ein Bildschirm kann, denn ein Bildschirm sendet Licht aus, während Papier es nur reflektiert. Siehe HEX in HSL umrechnen und RGB in CMYK umrechnen.
Wo man ihnen begegnet
In der Design-Übergabe
Eine Designerin arbeitet in einem Editor, der RGB-Werte oder eine Farbauswahl zeigt; der Entwickler braucht Hex für das Stylesheet. RGB in HEX umzurechnen ist der Schritt dazwischen, und er wird für jede Farbe einer Palette gemacht.
In Skripten, die Farben berechnen
Ein Skript, das zwei Farben mischt oder eine abdunkelt, arbeitet mit Zahlen und endet mit dreien davon. Um das Ergebnis in einem Stylesheet zu verwenden oder anzuzeigen, muss es als Hex-Code geschrieben werden. Das von Hand im Code zu tun sind ein paar Zeilen; das Ergebnis mit einem Umrechner zu prüfen geht schneller.
In der Datenvisualisierung
Diagrammbibliotheken akzeptieren Farben als Hex-Zeichenketten. Durch numerische Verfahren erzeugte Paletten kommen als RGB-Tripel heraus. Ein Umrechnungsschritt macht das eine zum anderen.
In Dokumenten und Präsentationen
Office-Programme zeigen Farben als RGB-Zahlen; Web-Editoren wollen Hex. Muss eine Markenfarbe in beiden erscheinen, hält die Umrechnung sie identisch.
Fallen beim Umrechnen von RGB in HEX
Die führende Null vergessen
7 als 7 statt als 07 zu schreiben verschiebt jede folgende Ziffer. Verwenden Sie immer zwei Ziffern pro Paar.
Prozent mit 0 bis 255 verwechseln
rgb(35%, 27%, 20%) ist eine andere Schreibweise der Zahlen, wobei 100 Prozent 255 sind. Verwendet Ihre Quelle Prozentwerte, rechnen Sie sie zuerst in 0 bis 255 um: mit 2,55 multiplizieren.
Rundungsfehler bei berechneten Farben
Ein Skript, das 127,5 erzeugt, muss entscheiden, ob es 127 oder 128 ist. Der Unterschied ist unsichtbar, ergibt aber zwei Codes für das, was Sie für eine Farbe hielten. Runden Sie überall gleich.
Die Farbe aus einem Screenshot nehmen
Eine aus einem Screenshot gelesene Farbe ist durch das Farbmanagement des Bildschirms und vielleicht durch Kompression gegangen. Sie kann um einen oder zwei Schritte von der Quelle abweichen. Verwenden Sie die Designdatei, wenn Sie können.
Fragen, die man vor dem Umrechnen stellt
Was ist rgb(255, 0, 0) in Hex?
#FF0000, reines Rot.
Was ist rgb(0, 0, 0) in Hex?
#000000, Schwarz.
Kann ich im Hex-Code Kleinbuchstaben verwenden?
Ja. #5a4632 und #5A4632 sind dieselbe Farbe. Die Seite schreibt Großbuchstaben.
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 HEX in RGB umrechnen, das die drei Paare als Zahlen liest.
Gewohnheiten, die Farben in einem Projekt einheitlich halten
Jede Farbe einmal definieren
Legen Sie Ihre Palette in benutzerdefinierten Eigenschaften ab, etwa --brand: #5A4632, und verweisen Sie auf Farben mit ihrem Namen. Rechnen Sie RGB für eine neue Farbe in HEX um, fügen Sie eine Zeile hinzu, und jede Verwendung folgt.
Eine Schreibweise wählen
Wählen Sie Groß- oder Kleinschreibung für Hex-Codes und bleiben Sie dabei. Die Suche nach einer Farbe im Code ist dann zuverlässig.
Die Quelle festhalten
Notieren Sie neben jeder Farbe, woher sie kam: aus dem Markenhandbuch, einem Logo, einem aufgenommenen Bild. Kommt die Frage auf, ob eine Farbe stimmt, wissen Sie, wo Sie nachsehen.
Den Kontrast testen
Prüfen Sie bei Text auf farbigem Hintergrund das Kontrastverhältnis mit einem Werkzeug. Die Zahlen der RGB-Form gehen direkt in die Formel ein, und die Hex-Form ist, was Sie in die meisten Prüfwerkzeuge eintippen.
Warum 256 Stufen und was hinter den Zahlen liegt
Acht Bit für jedes Licht
Jede der drei Zahlen wird in acht Bit gespeichert, was 256 Werte von 0 bis 255 erlaubt. Drei davon zusammen ergeben 256 × 256 × 256, etwa 16,7 Millionen Kombinationen, mehr, als das Auge unter den meisten Bedingungen unterscheiden kann. Das ist der Grund, warum Hex-Codes genau sechs Ziffern lang sind: zwei für jedes Licht, nicht mehr und nicht weniger. Wenn Sie RGB in HEX umrechnen, schreiben Sie drei Bytes in der kompaktesten Form aus, auf die sich Menschen einigen konnten.
Warum gleiche Schritte nicht gleich aussehen
Die Zahlen sind nicht proportional zum Licht, das Ihr Auge erreicht. Bildschirme wenden eine Kurve an, nahe einer Potenz von 2,2, sodass dunkle Töne mehr der 256 Stufen bekommen als helle, was dem Auge entgegenkommt. Ein Schritt von 10 auf 20 wirkt wie eine größere Veränderung als ein Schritt von 240 auf 250. Für Sie heißt das, dass das Mitteln zweier Farben durch Mitteln ihrer Zahlen nicht die Farbe ergibt, die Sie beim Mischen der Lichter sehen würden, eine Tatsache, die zählt, wenn Sie Verläufe und Mischungen im Code berechnen.
Grautöne und die Diagonale
Alle Grautöne liegen auf der Linie, auf der die drei Zahlen gleich sind. Es gibt 256 davon, von Schwarz bei 0 bis Weiß bei 255. Rechnen Sie RGB in HEX um und die drei Paare stimmen überein, wissen Sie sofort, dass die Farbe keinen Farbton hat. Ein Fast-Grau mit Paaren, die sich um einen oder zwei Schritte unterscheiden, hat einen leichten Stich, den Designer oft nutzen, um einer neutralen Farbe einen Hauch von Wärme oder Kühle zu geben.
Eine Palette aufbauen und prüfen
Von einer Handvoll gewählter Farben zu einer Palette
Eine typische Palette hat eine Primärfarbe, eine Akzentfarbe, ein Neutral für Text, ein helleres Neutral für Flächen und ein oder zwei Signalfarben für Erfolg und Fehler. Wählen Sie jede in Ihrem Design-Werkzeug, lesen Sie ihre RGB-Zahlen ab und rechnen Sie RGB für das Stylesheet in HEX um. Schreiben Sie sie als benutzerdefinierte Eigenschaften mit Namen, die die Rolle beschreiben, und die Palette ist in jeder Komponente einsatzbereit.
Kontrast zwischen Text und Hintergrund
Lesbarer Text braucht genug Helligkeitsunterschied zwischen den Buchstaben und ihrem Hintergrund. Barrierefreiheitsrichtlinien definieren ein aus den Rot-, Grün- und Blauwerten der beiden Farben berechnetes Kontrastverhältnis und verlangen für normalen Text mindestens 4,5 zu 1. Prüfwerkzeuge akzeptieren Hex-Codes, die hier erzeugten Codes können also direkt hinein. Prüfen Sie jede Paarung, die Sie verwenden wollen, nicht nur die Primärfarbe auf Weiß.
Eine Liste umrechnen
Haben Sie viele Farben umzurechnen, arbeiten Sie sie nacheinander ab und fügen Sie jedes Ergebnis mit Name und Verwendung in eine Tabelle ein. Das dauert eine Minute pro Farbe, und die Tabelle wird zur Referenz für das ganze Projekt. Wird eine Farbe später angepasst, muss sich nur ihre Zeile ändern.
Hex und RGB im Gleichschritt halten
Speichert Ihr Projekt einige Farben als Hex und andere als RGB, laufen sie leicht auseinander, wenn jemand die eine bearbeitet und die andere vergisst. Wählen Sie eine als Original, meist Hex, und leiten Sie die andere mit dem Umrechner ab, wann immer Sie sie brauchen.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zurückzugehen, nutzen Sie HEX in RGB umrechnen. Für über den Farbton beschriebene Farben stehen HEX in HSL umrechnen und HSL in HEX umrechnen bereit, für den Druck RGB in CMYK umrechnen, CMYK in RGB umrechnen und CMYK in HEX umrechnen. Für die Größen im selben Stylesheet leistet px in rem umrechnen für Längen, was diese Seite für Farben leistet.
Ein durchgerechnetes Beispiel
Angenommen, eine Farbauswahl in einem Bildeditor sagt Ihnen, der Akzent einer Fotografie sei rgb(214, 98, 56). Sie geben die drei Zahlen ein und lesen #D66238 ab. Im Stylesheet schreiben Sie --accent: #D66238 und verwenden es für Schaltflächen und Links. Ein Kollege fragt, wie die Farbe im Markenhandbuch lautet, und Sie schicken den Code. Später brauchen Sie eine durchscheinende Fassung für ein Banner und rechnen mit HEX in RGB umrechnen zurück, um rgba(214, 98, 56, 0.15) zu bauen. Beide Umrechnungen sind exakt, das Banner hat also denselben Farbton wie die Schaltfläche.
Eine kurze Checkliste
Vor dem Umrechnen
Prüfen Sie, dass jede Zahl zwischen 0 und 255 liegt. Entscheiden Sie, ob Sie Transparenz brauchen.
Beim Umrechnen
Geben Sie die drei Zahlen ein, lesen Sie den Code ab und kopieren Sie ihn mit seinem Rautenzeichen.
Nach dem Umrechnen
Testen Sie die Farbe im Zusammenhang, auf dem echten Hintergrund, und prüfen Sie den Kontrast jedes Textes, der darauf steht.
Häufige Fehler
Eine führende Null weglassen
Jedes Paar hat zwei Ziffern. 7 ist 07.
Zahlen über 255 schreiben
Sie lassen sich nicht in zwei Ziffern schreiben. Begrenzen Sie sie 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. Danach gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, RGB in HEX umzurechnen.
Zusammenfassung
Um RGB hier in HEX umzurechnen, geben Sie die drei Zahlen ein und lesen sofort den Hex-Code ab. Die Umrechnung behält die Farbe exakt: Hex und rgb() sind zwei Schreibweisen derselben drei Zahlen, 0 bis 255 für Rot, Grün und Blau, nichts wird also angenähert, und ein Hin-und-zurück-Weg liefert zurück, womit er begonnen hat. Auch ein vierter Wert für die Transparenz wird übernommen, da rgba() zu #RRGGBBAA wird und zurück. Beide Schreibweisen beschreiben sRGB, sie können also keine Farben außerhalb davon beschreiben. Jedes Paar hat zwei Ziffern, eine Zahl unter 16 bekommt also eine führende Null. Nichts wird hochgeladen.