E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Farbgestalltung
  2. RGB- und HEX-Werte

Farbgestalltung

Ein ebenfalls wichtiger Punkt bei Webseiten, ist die Farbgestaltung. Vor allem auf Webseiten auf denen Themen "sachlich" erklärt werden, sollte die Webseite keine Farbexplosion darstellen. Doch bunte Farben können einem natürlich nicht nur Schaden - oft sind Sie sogar sehr nützlich. Ein sachlicher Text sollte nur eine Farbe haben (meistens schwarz oder weiß) - Teile oder Vermerke mit einer bestimmten Farbe hervorheben, ist dagegen sogar ganz empfehlenswert. Je nach Art der Webseite, muss man sich entscheiden welche Farben man verwendet und wie "bunt" die Seite sein darf / soll. Des Weiteren sollte man darauf achten, dass 2 Farben (z. B. Hintergrund- und Textfarbe) zueinander passen. Wenn 2 Farben genau das Gegenteil darstellen, was ebenfalls oft verwendet wird, ist von der Komplementär-Farbe die Rede.

Beispiele:
Unsere Moderatorin im Forum heißt Tatzenwusel und unser Administrator heißt Admin-Webhelfer.
Da die Benutzerfarbe im Forum bei Tatzenwusel grün entspricht und bei Admin-Webhelfer rot entspricht wurden die Namen mit den dazugehörigen Farben hervorgehoben. - Dies ist ein gutes Beispiel!

Unsere Moderatorin im Forum heißt Tatzenwusel und unser Administrator heißt Admin-Webhelfer.
Hier werden viele verschiedene "bunte" Farben verwendet. - Dies ist ein schlechtes Beispiel!


RGB- und HEX-Werte

Oft hat man Farben in HEX-Dezimaler Form und manchmal in Dezimaler Form, also als RGB. Nun müssen diese Werte aber irgendwie umgerechnet werden. Ein Beispiel: Sie haben mit einem Bildbearbeitungsprogramm ein Webseitenbestandteil erstellt. Dort werden die Farben per RGB ausgewählt. Das Design der Webseite soll an dieses Bild angepasst werden. Doch nun wollen Sie die Farbe im Bild auch bei der Webseite haben. Hier werden jedoch meistens die HEX-Werte benötigt. Im Internet gibt es viele Umrechnungen für so etwas, wenn man es jedoch selbst weiß wie man umrechnet, kann man diesen Vorgang auch selbst übernehmen. Diese Problematik tritt auch manchmal bei der Umrechnung in die andere Richtung auf. In diesem Abschnitt stellen wir für Sie sowohl einen Umrechner zur Verfügung (ganz unten) als auch eine Erklärung zur Umrechnung.

RGB zu HEX
Um von RGB nach HEX umrechnen zu können, muss als erstes der Aufbau eines HEX-Wertes geklärt werden: Bei HEX-Werten welcher Farbangaben von RGB erhalten, besteht der Wert aus 4 Teilen. Am Anfang steht immer das #-Zeichen und nun folgen immer 2 Zeichen welche eine Gruppe bildet. Die Zeichen 2 und 3 stehen für den Rotanteil, die Zeichen 4 und 5 für den Grünanteil und die Zeichen 6 und 7 somit für den Blauanteil. HEX-Dezimal-Zahlen, haben die Werte 0 bis 9 und A bis F, wobei A für 10, B für 11, ... und F für 15 steht. Für unser Rechenbeispiel nehmen wir nun einfach mal die Werte 241 für R, 43 für G und 138 für B. Die Zahl 241 muss als erstes durch 16 geteilt werden; die Zahl 16 ist von den 16 verschiedenen Zuständen bei HEX abzuleiten. Diese Zahl wird nun auf die nächste Ganzzahl abgerundet (vereinfacht gesagt: die Nachkommastellen fallen weg). Das Ergebnis ist nun das 2. Zeichen. Im Beispiel ist das Ergebnis 15, d. h. im HEX-Wert wird F notiert, da bei der HEX-Dezimal-Schreibweise 15 einem F entspricht. Nun muss für den Rotanteil noch der sogenannte Rest ausgerechnet werden, dazu wird von der Anfangszahl, also 241, das Produkt aus dem Ergebnis der ersten Rechnung und der Zahl 16 subtrahiert. Die Rechnung lautet also: 241 - (15 * 16) Das Ergebnis ist 1 und somit ist das 3. Zeichen im HEX-Wert die 1. Dieser Vorgang wird nun auch für den Grünanteil und Blauanteil wiederholt. Hier nochmals die komplette Rechnung:

241 : 16 = 15     Rest: 241 - (15 * 16) =   1
  43 : 16 =   2     Rest:   43 - (  2 * 16) = 11
138 : 16 =   8     Rest: 138 - (  8 * 16) = 10
Der HEX-Wert lautet also: #F12B8A

HEX nach RGB
Um von HEX nach RGB umrechnen zu können, müssen wir den HEX-Wert wieder in 4 Teile zerlegen, wie oben beim Aufbau beschrieben. Wir wollen nun als Beispiel den HEX-Wert von oben wieder nach RGB zurückrechnen. Nehmen wir uns als erstes den Teil R von RGB her, so haben wir die Zeichenfolge F1. Diese Zeichen werden nun nochmals getrennt. Das F wird nun in die Zahl 15 umgewandelt (da F, 15 entspricht). Die Zahl 15 wird nun mit der Zahl 161 multipliziert. Zu diesem Ergebnis wird nun der Wert des Produkt 1 und 160 addiert. Die Hochzahlen sind bei der Umrechnung nach RGB einfach zu merken, da hier ein HEX-Teil immer nur aus 2 Zeichen besteht, so muss die erste Zahl immer mal 161 und die zweite Zahl immer mal 160 genommen werden. Bei der allgemeinen Rechnung von HEX nach Dezimal, muss erst die Anzahl der Zeichen gezählt werden. Dies ist darf bei der HEX-Umrechnung nach RGB jedoch nicht gemacht werden, da hier der HEX-Wert in das #-Zeichen, in den Rotanteil, in den Grünanteil und den Blauanteil unterteilt ist. Den Vorgang den wir gerade für den Rotanteil von RGB erklärt haben, kann man nun auch beim Grün- und Blauanteil wiederholen.

15 * 161 +   1 * 160 = 240 +   1 = 241
  2 * 161 + 11 * 160 =   32 + 11 =   43
  8 * 161 + 10 * 160 = 128 + 10 = 138
Der RGB-Wert lautet also: R: 241     G:  43     B: 138

Sie sehen also die Umrechnung von HEX nach RGB und von RGB nach HEX ist nicht besonders schwer, wenn man weiß, wie man dabei vorgehen muss.


Umrechner: RGB nach HEX


Umrechner: HEX nach RGB
Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de