Wie erkennt man eine Farbe? Finden Sie heraus, wie eine kurze Zeichenfolge aus sechs Zeichen Ihnen alles sagen kann, was Sie wissen müssen.
Das Arbeiten mit Farben in HTML ist relativ einfach. Mit ein paar einfachen CSS-Deklarationen können Sie die Farbe jedes Textes oder Hintergrunds auf Ihrer Webseite ändern. Aber wie legt man eine Farbe fest? Die Antwort auf diese Frage wird uns in ein Kaninchenloch führen, 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 Farben arbeiten, verwenden Sie möglicherweise eine grafische Benutzeroberfläche, um Farben auszuwählen, die auf Elemente auf Ihrer Seite angewendet werden sollen. Wenn Sie sich den zugrunde liegenden Code und nicht nur Ihren grafischen Editor ansehen, werden Sie feststellen, dass Farben als seltsam aussehende Zeichenfolgen erscheinen. Solche Sequenzen werden als Hex Codes bezeichnet; sie sehen etwa so aus:
Sie können Farben in CSS auf verschiedene Arten angeben. Sie können die Namen einiger vordefinierter Farben wie Rot und Dunkelmagenta verwenden . Um genaue Farbtöne anzugeben, müssen Sie jedoch eine genauere Messung verwenden: etwas Numerisches.
CSS bietet zwei Hauptoptionen: RGB und Hex. In beiden Formaten geben Sie die Anteile an Rot, Grün und Blau an, aus denen sich die endgültige Farbe zusammensetzt. RGB verwendet drei Zahlen zwischen 0 und 255. Hex macht genau das Gleiche, nur mit einer anderen Basis (16) als der Dezimalzahl (10), die Sie gewohnt sind.
Hex verwendet zusätzlich zu den Ziffern 0-9 die Buchstaben AF für insgesamt 16 Symbole. A im Hexadezimalformat entspricht 10 im Dezimalformat. F im Hexadezimalformat ist 15 im Dezimalformat.
Wie funktionieren Hex-Farbcodes?
In seiner einfachsten Form ist ein Hex Code eine Darstellung, wie viel Rot, Grün und Blau in einer Farbe enthalten sind. Ein Hex Code besteht aus sechs Zeichen. Die ersten beiden Ziffern geben an, wie viel Rot in der Mischung enthalten ist, die nächsten beiden beziehen sich auf den Grünanteil und die letzten beiden Ziffern geben den Blauanteil an. Hex Codes beziehen sich auf bestimmte Farben und ermöglichen Designern und Entwicklern eine einfache Kommunikation über Farbschemata.
Bei 16 × 16 (256) Werten für jede Farbkomponente ergeben sich dann 256 × 256 × 256 mögliche Kombinationen. Im Hexadezimalformat 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 zunächst die sechs Zeichen in drei Teile mit jeweils zwei Zeichen. Wie Sie wissen, stehen die ersten beiden Teile für Rot, die zweiten beiden Teile für Grün und die dritten beiden Teile für Blau. Also in unserem Beispiel:
- Der rote Anteil RR hat den Wert FF.
- Der grüne Anteil GG beträgt 57.
- Die blaue Komponente BB beträgt 33.
Um nun die Intensität dieser Farbsegmente zu ermitteln, müssen Sie die Hexadezimalzahl mithilfe dieser drei Schritte berechnen:
- Multiplizieren Sie das erste Hexadezimalzeichen von RR mit 16. Wenn das Zeichen ein Buchstabe ist, konvertieren Sie ihn in den entsprechenden Wert. In diesem Fall ist das erste Zeichen F, also 15. In unserem Beispiel multiplizieren Sie also 15 × 16, was 240 ergibt.
- Als nächstes fügen Sie das zweite Zeichen von RR hinzu. Auch hier können Sie bei Bedarf einen Buchstaben in den entsprechenden Wert umwandeln. In unserem Beispiel ist das zweite Zeichen F, was 15 entspricht.
- Wenn Sie fertig sind, addieren Sie die Summen, um einen Einzelwert zu erhalten. Wenn Sie 240 und 15 aus unserem Beispiel addieren, sehen Sie, dass der Wert von FF 255 beträgt.
Wiederholen Sie dieselbe Formel für die verbleibenden zwei Segmente, GG mit 57 und BB mit 33. Wenn Ihnen die manuellen Berechnungen zu überwältigend erscheinen, können Sie jederzeit ein Hex-zu-RGB-Konvertierungstool (wie BinaryHex Converter ) verwenden, um eine Farbe zu lesen. Sie sollten feststellen, dass der Hexadezimalwert #FF5733 rgb(255, 87, 51) entspricht .
Warum ist der Hex-Farbcode so beliebt?
Obwohl es verschiedene Farbmodelle gibt (RGB, CMYK, HSL), sind Hex-Farbcodes möglicherweise die am weitesten verbreitete Darstellung. Das liegt daran, dass sie einfach und leicht verständlich sind.
Ein Format mit fester Breite ist ebenfalls sehr nützlich. Hexadezimale Farben in voller Länge bestehen immer aus sieben Zeichen, einschließlich des führenden # -Symbols.
Hex-Farben sind sehr effizient, da allein diese sieben Zeichen zur Darstellung von mehr als 16 Millionen Farben verwendet werden. Und die Unterscheidung dieser Farben ist ein unkomplizierter Vorgang.
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 werden die Ziffern 0-9 verwendet.
Hex verwendet ebenfalls drei Zahlen zur Darstellung von Rot, Grün und Blau, verwendet jedoch zusätzliche Ziffern (AF), um die Basis 16 zu berücksichtigen. Es gibt keinen Unterschied in den resultierenden Farben, es handelt sich lediglich um unterschiedliche Formate, um dieselben Informationen zu kommunizieren.
Wofür wird der Hex Code verwendet?
Eine Vielzahl unterschiedlicher Anwendungen nutzen RGB, von Fernsehbildschirmen über mobile Geräte bis hin zu Spielen und Schildern. In Webdesign und anderen Grafikprogrammen werden Sie hauptsächlich Hex-Farbcodes sehen.
Möglicherweise sehen Sie Hex Codes auch als universelle Methode zur Identifizierung von Farben. Viele Websites verwenden sie, um eine bestimmte Farbe zu identifizieren, da sie kurz und in der Regel im Kontext eindeutig sind.
Der Hex-Farbcode ist kein Hexenwerk
Da haben Sie also die Grundlagen der Hex-Farbcodes. Sie sind nicht gerade harte Wissenschaft, aber sie erfüllen einen bestimmten Zweck im Design (und in der Technologiewelt). Wenn Sie nach einem Tool suchen, das Ihnen hilft, die Funktionsweise von Hex-Farben zu verstehen, oder nach einem, das Ihnen etwas über die RGB-Mischungstheorie beibringt, finden Sie online eine Menge davon. Denken Sie daran: Der Schlüssel zum Lernen von Neuem liegt darin, es Schritt für Schritt anzugehen.
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 erheblich erleichtern.
