Was ist der Hex-Code? Alles, was Sie wissen müssen

Das Arbeiten mit Farben in HTML ist relativ unkompliziert. Mit ein paar einfachen CSS-Deklarationen können Sie die Farbe von Text oder Hintergrund auf Ihrer Webseite ändern. Aber wie legt man eine Farbe fest? Die Antwort auf diese Frage führt uns in ein Kaninchenloch, das uns schließlich zum Konzept der hexadezimalen Farbcodes führt.

Wenn Sie schon einmal mit HTML oder CSS gearbeitet haben, haben Sie wahrscheinlich schon einmal den Begriff Hex-Code gehört. Aber was genau ist ein Hex-Code? Was sind einige Beispiele für Hex-Codes? Was ist der Unterschied zwischen einem Hex-Code und einem RGB-Farbcode?

Was ist Hex-Code?

Wenn Sie zum ersten Mal mit Farbe arbeiten, verwenden Sie möglicherweise eine grafische Benutzeroberfläche, um Farben auszuwählen, die auf Elemente auf Ihrer Seite angewendet werden sollen. Wenn Sie anfangen, sich den zugrunde liegenden Code und nicht nur Ihren grafischen Editor anzusehen, stellen Sie fest, dass Farben als seltsam aussehende Zeichenfolgen erscheinen. Solche Sequenzen sind als Hex-Codes bekannt; sie sehen in etwa so aus:

#FF0092

Verwandt: Grundlegende Grafikdesign-Begriffe, die Sie kennen müssen

Sie können Farben in CSS auf verschiedene Arten angeben. Sie können die Namen einiger vordefinierter Farben verwenden, z rot und dunkelmagenta. Um genaue Farbschattierungen anzugeben, müssen Sie jedoch eine genauere Messung verwenden: etwas Numerisches.

CSS bietet zwei Hauptoptionen: RGB und Hex. In beiden Formaten geben Sie die Rot-, Grün- und Blauanteile an, aus denen die endgültige Farbe besteht. RGB verwendet drei Zahlen zwischen 0 und 255. Hex macht genau dasselbe, nur mit einer anderen Basis (16) als die Dezimalzahl (10), an die Sie gewöhnt sind.

Hex verwendet die Buchstaben A-F zusätzlich zu den Ziffern 0-9 für insgesamt 16 Symbole. A in Hex ist das Äquivalent von 10 in Dezimalzahl. F in Hex ist 15 in Dezimalzahl.

Wie funktionieren Hex-Farbcodes?

In seiner einfachsten Form ist ein Hex-Code eine Darstellung dessen, wie viel Rot, Grün und Blau in einer Farbe vorhanden sind. Ein Hex-Code besteht aus sechs Zeichen. Die ersten beiden geben an, wie viel Rot in der Mischung enthalten ist, die nächsten beiden beziehen sich auf die Menge an Grün, und die letzten beiden Ziffern spiegeln die Menge an Blau wider. Hex-Codes beziehen sich auf bestimmte Farben, sodass Designer und Entwickler problemlos über Farbschemata kommunizieren können.

Bei 16 × 16 (256) Werten für jede Farbkomponente ergeben sich dann 256 × 256 × 256 mögliche Kombinationen. In Hex reichen sie von #000000 (reines Schwarz) bis #FFFFFF (reines Weiß).

So lesen Sie Hex-Farbcodes

Hex-Farbcodes zu verstehen ist einfach. Nehmen wir das Beispiel #FF5733. Teilen Sie zuerst die sechs Zeichen in drei Teile mit jeweils zwei Zeichen. Wie Sie wissen, repräsentieren die ersten beiden Teile Rot, die zweiten beiden Teile Grün und die dritten beiden Teile Blau. Also in unserem Beispiel:

• Die Rotkomponente RR hat den Wert FF.
• Die grüne Komponente, GG, ist 57.
• Die blaue Komponente, BB, ist 33.

Um nun die Intensität dieser Farbsegmente zu finden, müssen Sie die Hexadezimalzahl mit diesen drei Schritten berechnen:

1. Multiplizieren Sie das erste hexadezimale Zeichen von RR mit 16. Wenn das Zeichen ein Buchstabe ist, konvertieren Sie es in seinen entsprechenden Wert. In diesem Fall ist das erste Zeichen F, was 15 ist. In unserem Beispiel multiplizieren Sie also 15 × 16, was 240 entspricht.
2. Als nächstes fügen Sie das zweite Zeichen von RR hinzu. Konvertieren Sie bei Bedarf erneut einen Buchstaben in seinen entsprechenden Wert. In unserem Beispiel ist das zweite Zeichen F, was 15 entspricht.
3. Wenn Sie fertig sind, addieren Sie die Summen, um einen einzelnen Wert zu erhalten. Wenn Sie 240 und 15 aus unserem Beispiel addieren, sehen Sie, dass der Wert von FF 255 ist.

Wiederholen Sie die gleiche Formel für die verbleibenden zwei Segmente, wobei GG mit 57 und BB mit 33 bezeichnet wird. Wenn die manuellen Berechnungen zu überwältigend erscheinen, können Sie immer ein Hex-zu-RGB-Konvertierungstool (wie z BinaryHex-Konverter), um eine Farbe zu lesen. Sie sollten den Hex-Wert finden #FF5733 ist äquivalent zu RGB (255, 87, 51).

Warum ist der Hex-Farbcode so beliebt?

Während es mehrere verschiedene Farbmodelle gibt (RGB, CMYK, HSL), sind Hex-Farbcodes vielleicht die am weitesten verbreitete Darstellung. Dies liegt daran, dass sie einfach und leicht zu verstehen sind.

Ein Format mit fester Breite ist ebenfalls sehr nützlich. Vollständige Hexadezimalfarben sind immer sieben Zeichen, einschließlich des führenden Zeichens # Symbol.

Hex-Farben sind sehr effizient und verwenden nur diese sieben Zeichen, um mehr als 16 Millionen Farben darzustellen. Und die Unterscheidung zwischen diesen Farben ist ein einfacher Prozess.

Hex vs. RGB: Gibt es einen Unterschied?

Das RGB-Farbcodierungssystem verwendet drei Dezimalzahlen, um die relativen Intensitäten von Rot, Grün und Blau anzugeben. Es verwendet die Ziffern 0-9.

Hex verwendet auch drei Zahlen, um Rot, Grün und Blau darzustellen, aber es verwendet zusätzliche Ziffern (A-F), um der Basis 16 gerecht zu werden. Es gibt keinen Unterschied in den resultierenden Farben, es handelt sich lediglich um unterschiedliche Formate, um dieselben Informationen zu kommunizieren.

Verwandt: CSS-Grundlagen: Arbeiten mit Farben

Wofür wird der Hex-Code verwendet?

Eine Vielzahl unterschiedlicher Anwendungen verwendet RGB, von Fernsehbildschirmen bis hin zu Mobilgeräten, Spielen und Schildern. Sie werden Hex-Farbcodes hauptsächlich in Webdesign- und anderen Grafikprogrammen sehen.

Möglicherweise sehen Sie auch Hex-Codes als universelle Methode zur Identifizierung von Farben. Viele Websites verwenden sie, um eine bestimmte Farbe zu identifizieren, da sie kurz und normalerweise im Kontext eindeutig sind.

Der Hex-Farbcode ist keine Raketenwissenschaft

Da haben Sie also die Grundlagen von Hex-Farbcodes. Sie sind nicht gerade harte Wissenschaft, aber sie erfüllen einen bestimmten Zweck im Design (und in der Tech-Welt). Wenn Sie nach einem Tool suchen, das Ihnen hilft zu verstehen, wie Hex-Farben funktionieren, oder eines, das Ihnen etwas über die RGB-Mix-Theorie beibringt, gibt es viele online. Denken Sie daran, dass der Schlüssel zum Erlernen von etwas Neuem darin besteht, einen Schritt nach dem anderen zu tun.

Hex-Farbcodes sind nicht die aufregendste Sache der Welt, aber es ist wichtig, sie zu verstehen, wenn Sie im Webdesign arbeiten. Die Möglichkeit, mit Hex-Farbcodes zu arbeiten, wird Ihre Designarbeit viel einfacher machen.

So finden Sie den Hex-Wert einer beliebigen Farbe auf Ihrem Bildschirm

Erfahren Sie, wie Sie in Sekundenschnelle beliebige Farbwerte von Ihrem Bildschirm auswählen können. Besonders nützlich für Webdesigner!

Lesen Sie weiter

Über den Autor