HEX und RGB: zwei Schreibweisen für dieselbe Farbe
Jede Farbe, die Sie auf einem Bildschirm sehen, wird aus drei Lichtern gemischt: Rot, Grün und Blau. Drehen Sie alle drei voll auf, erhalten Sie Weiß; schalten Sie alle aus, erhalten Sie Schwarz. HEX und RGB sind schlicht zwei Notationen, um zu beschreiben, wie hell jeder dieser drei Kanäle sein soll. Sie verweisen auf exakt dieselbe Farbe, sodass ein guter Konverter einfach zwischen den beiden Schreibsystemen übersetzt, ohne je den tatsächlichen Farbton zu verändern. Genau das macht dieses Tool, vollständig in Ihrem Browser, und zeigt Ihnen dabei eine Live-Farbprobe, damit Sie das Ergebnis mit eigenen Augen bestätigen können.
Wie man einen Hex-Code liest
Eine Hex-Farbe sieht aus wie #1E90FF. Das Rautezeichen markiert nur den Anfang; die sechs Zeichen danach sind drei Paare, geschrieben im Muster #RRGGBB. Das erste Paar steht für Rot, das zweite für Grün, das dritte für Blau. Jedes Paar ist eine Zahl im Hexadezimalsystem, also zur Basis 16, in der die Ziffern von 0 bis 9 laufen und dann A, B, C, D, E, F für 10 bis 15 stehen. Ein Paar kann Werte von 00 (der Kanal ist vollständig aus) bis FF (vollständig an) aufnehmen. Im einfachen Dezimalsystem entspricht dieser Bereich genau 0 bis 255, derselben Skala, die RGB verwendet. Mit 256 möglichen Stufen pro Kanal kann die sechsstellige Form 16.777.216 verschiedene Farben beschreiben.
Umrechnung in beide Richtungen, mit durchgerechnetem Beispiel
Um von HEX zu RGB zu gelangen, teilen Sie den Code in seine drei Paare auf und wandeln jedes von der Basis 16 in das gewöhnliche Dezimalsystem um. Nehmen Sie #1E90FF. Das rote Paar ist 1E: das ist 1 mal 16, plus 14 (E), was 30 ergibt. Das grüne Paar 90 ist 9 mal 16, plus 0, was 144 ergibt. Das blaue Paar FF ist 15 mal 16, plus 15, was 255 ergibt. So wird aus #1E90FF der Wert rgb(30, 144, 255) — das vertraute Dodger-Blau.
Der umgekehrte Weg ist derselbe Vorgang in der Gegenrichtung. Nehmen Sie jede RGB-Zahl und schreiben Sie sie als zwei Hex-Ziffern. Reines Rot, rgb(255, 0, 0), ergibt FF, 00 und 00, die sich zu #FF0000 zusammenfügen. Eine Sache lohnt sich zu merken: Liegt ein Wert unter 16, brauchen Sie dennoch beide Ziffern, also wird 5 als 05 geschrieben und nicht bloß als 5. Der Konverter übernimmt diese Auffüllung für Sie, aber von Hand bringt sie viele zu Fall.
Wo welches Format verwendet wird
HEX ist die Alltagssprache des Webs. CSS, HTML und der meiste Code, den Sie schreiben, greifen zu Hex-Codes, weil sie kompakt und leicht zu kopieren sind. RGB taucht eher in Design- und Bildwerkzeugen auf — Figma, Photoshop, Sketch und Illustrator zeigen Regler oder Felder üblicherweise im Bereich 0-255, und auch Bildschirmaufnahme- oder Videoanwendungen erwarten oft RGB. So greifen Sie regelmäßig einen Hex-Code aus einem Stylesheet ab und brauchen seine RGB-Form, um sie in ein Design-Panel einzutippen, oder umgekehrt. Dieser Hin-und-Her-Weg ist der ganze Grund, warum ein Konverter praktisch ist. Wenn Sie statt einer einzelnen Übersetzung einen ganzen Satz zueinander passender Farbtöne aufbauen möchten, ist unser Farbpaletten-Generator der bessere Ausgangspunkt, und weitere Hilfsmittel wie dieses finden Sie unter Entwickler-Tools.
Alpha, Deckkraft und HSL
Beide Notationen haben eine erweiterte Form, die Transparenz hinzufügt. Aus RGB wird rgba(30, 144, 255, 0.5), wobei der vierte Wert das Alpha ist — 0 ist vollständig durchsichtig und 1 ist vollständig deckend. HEX fügt zum selben Zweck ein viertes Paar hinzu und ergibt einen achtstelligen #RRGGBBAA-Code; 80 entspricht beispielsweise etwa 50 Prozent Deckkraft. Einige Konverter bieten zudem HSL (Farbton, Sättigung, Helligkeit) an, das Farbe so beschreibt, wie ein Mensch es tun könnte — einen Farbton auf dem Farbkreis wählen und dann dessen Lebhaftigkeit und Helligkeit einstellen. HSL ist eher ein anderes Denkmodell als eine andere Palette, weshalb es intuitiver sein kann, wenn Sie eine Farbe heller oder gedämpfter machen wollen, ohne mit drei getrennten Zahlen zu jonglieren.
Häufig gestellte Fragen
Ist das Rautezeichen Teil eines Hex-Codes?
Die Raute ist eine Markierung, die CSS und Design-Werkzeugen sagt, dass Sie eine Hex-Farbe angeben. Die Farbe selbst sind die sechs Zeichen danach. Die meisten Werkzeuge akzeptieren den Code mit oder ohne Raute und ergänzen sie für Sie wieder.
Was ist der Unterschied zwischen einem 3-stelligen und einem 6-stelligen Hex-Code?
Ein 3-stelliger Code ist eine Kurzform, bei der jede Ziffer verdoppelt wird, sodass #1AF gleich #11AAFF bedeutet. Er erreicht nur 4.096 Farben, während die volle 6-stellige Form über 16 Millionen erreicht.
Warum hat mein Hex-Code acht Zeichen?
Ein 8-stelliger Hex-Code fügt ein viertes Paar für Alpha, also Transparenz, hinzu. Die ersten sechs Zeichen stehen weiterhin für Rot, Grün und Blau, und die letzten beiden legen die Deckkraft von 00 (unsichtbar) bis FF (deckend) fest.
Sind Hex-Codes von Groß- und Kleinschreibung abhängig?
Nein. #1e90ff und #1E90FF beschreiben exakt dieselbe Farbe. Hexadezimalbuchstaben funktionieren in Groß- wie Kleinschreibung gleich, verwenden Sie also, was Ihr Team bevorzugt.
Sehen HEX und RGB auf dem Bildschirm je unterschiedlich aus?
Nein. Wenn sie dieselben Kanalwerte beschreiben, sind sie die identische Farbe. Ein sichtbarer Unterschied stammt von einem Tippfehler oder davon, dass ein Code Transparenz enthält, die der andere weglässt.
Wie viele Farben kann ein Standard-Hex-Code darstellen?
Ein 6-stelliger Hex-Code bietet 256 Stufen für jeden der drei Kanäle, was sich zu 16.777.216 möglichen Farben multipliziert.