946201038, xxmmxx

Hexadezimale Farben sind die visuelle Sprache des Internets. Wenn Sie möchten, dass eine Webseite (oder eine Web-Applikation) eine bestimmte Farbe anzeigt, geben Sie den Hex-Code an.

Was ist ein Hex-Farbcode?

1215017532, VladSt

Ein Hex-Farbcode ist ein 6-stelliger Symbol-Code, der aus drei 2-Symbol-Elementen besteht. Jedes der 2-Symbol-Elemente drückt einen Farbwert von 0 bis 255 aus.

• Element 1: Roter Wert
• Element 2: Grüner Wert
• Element 3: Blauer Wert

Der Code wird mithilfe einer Formel geschrieben, die jeden Wert in einen eindeutigen zweistelligen alphanumerischen Code umwandelt. Der RGB-Code (224, 105, 16) ist zum Beispiel E06910 im Hexadezimal-Code.

Warum? Es ist kompliziert und hat mit dem Hexadezimalsystem zu tun. Wenn Sie neugierig sind und mehr dazu erfahren möchten, finden Sie hier eine gute Erklärung. Wenn Sie sich fragen, was das alles für Sie als Designer bedeutet, sollten Sie ein paar wichtige Dinge wissen:

• Mit den Hexadezimal-Codes können Sie mehr als 16 Millionen einzigartige Farben darstellen, was vermutlich mehr ist, als das menschliche Auge wahrnehmen kann.
• Sie können Farbwähler oder Konverter verwenden, um den Code für Sie zu erstellen.

Warum wird der Hex-Code anstelle von Zahlen verwendet? Würden Sie Zahlen verwenden, könnte jeder Rot-, Grün- oder Blauwert von 0 bis 255 aus einer, zwei oder drei möglichen Ziffern bestehen. Insgesamt kann der Code zwischen drei oder neun Ziffern bestehen. Dies könnte bei den Systemen, die die Codes lesen, aber vor allem bei den Menschen, die die Codierung vornehmen, zu Verwirrung führen. Die Tatsache, dass jeder Wert aus sechs Symbolen besteht, verringert die Wahrscheinlichkeit von Fehlern.

Was sind Hex-Farbcodes?

525330557, Thoth_Adan

Hex-Farbcodes sind Werte, die dem Display mitteilen, wie viel von einer Farbe angezeigt werden soll. Die Werte sind ein spezieller Code, der Farbwerte von 0 bis 255 darstellt.

Wenn Rot, Grün und Blau alle den Mindestwert 0 haben (im Code als „00“ dargestellt), ist die ausgedrückte Farbe Schwarz. Wenn Rot, Grün und Blau alle den Höchstwert von 255 haben (im Code als „ff“ dargestellt), ist die ausgedrückte Farbe Weiß.

Die Hex-Farbwerte können kombiniert werden, um mehr als 16 Millionen verschiedene Farben darzustellen. Die meisten werden also irgendwo dazwischen liegen. Sie können jederzeit einen Konverter verwenden, der die numerischen RGB-Werte für Sie in Hex-Code umwandelt.

Es kann jedoch hilfreich sein, sich einige der gebräuchlicheren hexadezimalen Farben einzuprägen. Dieses Wissen könnte hilfreich sein, wenn Sie mit beispielsweise mit einem Programmierer zusammenarbeiten.

Beliebte Hex-Farbcodes

Farbe	RGB	Hex-Farbcode
Schwarz	(0, 0, 0)	#000000
Blau	(0, 0, 255)	#0000FF
Grau	(128, 128, 128)	#808080
Grün	(0, 128, 0)	#008000
Violett	(128, 0, 128)	#800080
Rot	(255, 0, 0)	#FF0000
Weiß	(255, 255, 255)	#FFFFFF

Einzigartige Hex-Farbcodes

Farbe	RGB	Hex-Farbcode	Verwendung
AliceBlue	(240, 248, 255)	#F0F8FF	Dezenter Hintergrund für eine eCommerce- oder Unternehmensseite
Korallenrot	(255, 127, 80)	#FF7F50	Ruhige Akzentfarbe
FireBrick	(178, 34, 34)	#B22222	Aggressive Akzentfarbe
HotPink	(255, 105, 180)	#FF69B4	Verspielte Akzentfarbe
LemonChiffon	(255, 250, 205)	#FFFACD	Romantischer Hintergrund für eine Hochzeit oder eine andere persönliche Seite

Wie funktionieren Hex-Farben?

1226241649, Selman Keles

Hex-Farben basieren auf dem RGB-Farbmodell, das seit den Anfängen der Fotografie verwendet wird.

Die Theorie hinter dem Modell ist, dass man praktisch jede Farbe erzeugen kann, die das Auge sehen kann, indem man verschiedene Kombinationen von roten, grünen und blauen Farbwerten zuweist. Das RGB-Farbmodell wird von Fernsehgeräten, Digitalkameras und Videoprojektoren sowie von praktisch allen Computer- und Smartphone-Bildschirmen verwendet.

Im Internet und bei den meisten digitalen Anwendungen wird eine Farbwertskala von 0 bis 255 verwendet. Sie (oder ein Programmierer) teilen dem Bildschirm mit, wie viel Rot, Blau und Grün angezeigt werden soll. Diese Kombination erzeugt die Farbe, die der Betrachter sieht.

Sie haben viel Freiheit bei der Auswahl der Farbe, die Sie wünschen. Die Gesamtzahl der möglichen Kombinationen beträgt 16.777.216, was mehr ist, als das menschliche Auge tatsächlich unterscheiden kann.

Was ist der Unterschied zwischen der Verwendung von RGB- und Hex-Codes?

1221544644, devastudios

Hex-Farbcodes werden von Programmierern bevorzugt, weil sie vorhersehbar sind. Sie sind immer sechsstellig, unabhängig von der Farbe. RGB-Werte können zwischen drei und neun Ziffern aufweisen.

Sie müssen keine Hex-Codes im Webdesign verwenden. Wenn Sie eine Seite in HTML codieren, können Sie auch die RGB-Werte oder sogar Farbnamen verwenden.

So würde der HTML-Code aussehen, wenn Sie z. B. einen aquamarinfarbenen Hintergrund für eine Webseite kodieren würden.

• Hex-Farbcode für Aquamarin: <div style=“background-color:#7FFFD4″></div>
• RGB-Farbcode für Aquamarin: <div style=“background-color:rgb(127, 255, 212)“></div>
• Farbtoncode für Aquamarin: <div style=“background-color:aquamarine“></div>

Auch wenn Sie den Namen oder den RGB-Code angeben können, heißt das nicht, dass Sie es tun sollten. Zur Verringerung der Wahrscheinlichkeit eines Fehlers in Ihrem Projekt verwenden Sie einen Hex-Farbradwähler oder Konverter, um den gewünschten Hex-Code zu erzeugen. Auf diese Weise ist die Gefahr geringer, dass ein aktueller oder zukünftiger Programmierer versucht, die Konvertierung selbst vorzunehmen, und Ihre wunderschöne Webseite in etwas Unansehnliches verwandelt.

Arbeiten mit Hex-Farben

1203440092, Designer

Wenn Sie es gewohnt sind, mit Farben in Adobe Illustrator oder für den Druck zu arbeiten, ist die Arbeit mit Hexadezimalfarben im Web etwas gewöhnungsbedürftig. Damit Ihr Projekt gut läuft, sollten Sie einige Dinge wissen.

Vorsicht vor Farbverläufen

Mit 16.777.216 möglichen Farben bieten die Hex-Farbcodes eine Vielzahl von Möglichkeiten für kontrastreiche Farben. Da aber jedes Pixel eine eigene Farbe haben muss, können Sie verschiedene Farbtöne nicht sehr gut mit Hex-Farben mischen.

Wenn Webdesigner versuchen, Farbverläufe mit Hex-Farben zu erstellen, sind die Ergebnisse nicht immer wie erwartet. Da die Farbtöne nicht ineinander übergehen, entstehen auf der Anzeige deutliche Farbbänder (Farbverläufe).

Probleme mit Farbverläufen treten mit größerer Wahrscheinlichkeit bei älteren Geräten auf, die nicht in der Lage sind, Millionen von Farben darzustellen. In modernem CSS können Sie Farbverläufe programmieren, um das Problem der Farbverläufe zu beseitigen. Auf modernen Bildschirmen tritt der Farbverlauf am häufigsten bei Fotos von natürlichen Farbabstufungen wie Himmel und Regenbogen auf, bei denen die Millionen von Farben, die mit bloßem Auge sichtbar sind, komprimiert werden, um Speicherplatz zu sparen.

Sparen Sie Zeit mit Hex-Farbpaletten-Ressourcen

Wenn Sie spontan einen einzigartigen Look entwickeln, ist die Auswahl von Komplementärfarben aus den 16 Millionen verfügbaren Farben eine gewaltige Aufgabe. Glücklicherweise haben Designerkollegen einen Teil der Arbeit für Sie übernommen, indem sie Hex-Farbpaletten-Datenbanken und interaktive Selektoren erstellt haben.

Color-Hex-Farbpaletten: Durchsuchen Sie in den Color-Hex-Farbpaletten Tausende von Hex-Farbkombinationen, die von der Community erstellt wurden.

Sie stöbern gerne? Gehen Sie Seite für Seite durch die benannten Paletten. Jede Palette hat einen Namen, der Ihnen ein Gefühl für ihren Stil vermittelt und alle sechs Hex-Farben identifiziert. Klicken Sie auf den Namen des Designers, um andere Farbpaletten zu sehen, die dieser entworfen hat.

Color-Hex-Farbpaletten sind eine fantastische Quelle für Hex-Farbinspirationen.

Coolors: Die hexadezimale Farbressource Coolors kombiniert Inspiration mit Funktionalität, um den Designprozess zu beschleunigen.

Sie können die aktuellen Farbpaletten durchsuchen, um zu sehen, was die Aufmerksamkeit anderer Designer auf sich gezogen hat. Jede Trendpalette kann in einer persönlichen Favoritenbox gespeichert werden, wenn Sie sich mit einem Konto anmelden.

Oder Sie verwenden den blitzschnellen Palettengenerator, um Paletten auf der Grundlage der von Ihnen gewünschten Farben zu erstellen. Eine zeitsparende Funktion von Coolors bietet die Möglichkeit, eine Farbe (oder mehrere Farben) zu „speichern“ und dann mit einem Druck auf die Leertaste weitere Komplementärfarben zu erzeugen. Neue Looks ziehen mit nahezu Warpgeschwindigkeit vorbei. Warten Sie einfach auf den, der Ihnen am besten gefällt.

Coolors ist auch als iOS-App oder Adobe-Erweiterung erhältlich.

Kombinieren Sie Hex-Farben mit anderen Gestaltungselementen

Wenn Sie für eine bestehende Webseite entwerfen oder andere Elemente anpassen möchten, müssen Sie wissen, mit welchen Hex-Farben Sie auf der Webseite arbeiten. In diesem Fall ist ein guter Farbwähler Gold wert. Mit ImageColorPicker können Sie jedes Bild hochladen und sehen, welche Hex-Farben dargestellt werden.

Eine andere gute Ressource ist der ColorPick Eyedropper, eine Erweiterung für den Google Chrome-Webbrowser, mit der Sie die Hex-Farbe für jedes Element einer Webseite anzeigen können. Wenn Ihnen eine Farbe auf einer bestimmten Seite gefällt, verwenden Sie die Pipette, um zu sehen, um welche Farbe es sich handelt.

Wenn Sie Bilder und andere Elemente für eine Webseite auswählen, sollten Sie eine einfache Möglichkeit haben, die Elemente zu identifizieren, die Ihrer Hex-Farbpalette entsprechen. Bei iStock können Sie bei jeder Suche eine Hexadezimal-Farbe als Filter hinzufügen. Geben Sie den Code ein oder wählen Sie aus der Farbauswahl und geben Sie dann Ihre Suchbegriffe ein. Die Webseite zeigt Ihnen Bilder an, die der von Ihnen eingegebenen Farbe am nächsten kommen.

Sie möchten die idealen Bilder für Ihr Hex-Farbschema finden? Hier finden Sie die Dateien, die zu Ihrem Projekt passen.