--> HTML-Farben: Wie du genau deine Farbe wählen kannst - Bunterrichten

HTML-Farben: Wie du genau deine Farbe wählen kannst

(Letztes Update von Niklas Baumgärtler am 15.12.2020)

In den bisherigen Lektionen haben wir zwar immer wieder Farben für HTML-Elemente definiert (Text-Farbe, Hintergrund-Farbe, Rahmen-Farbe, …), waren aber in der Wahl unserer Farben doch sehr eingeschränkt. Haben HTML und CSS da wirklich nicht mehr zu bieten?

Doch, natürlich hast du da mehr Möglichkeiten – genauer gesagt sogar fast unendlich viele. Aber gerade weil du bei der Farb-Wahl so viele verschiedene Möglichkeiten und Techniken zur Verfügung hast, haben wir uns mit den Farben bisher eher zurückgehalten. Mit dem Ende dieser Lektion wird dir dann die ganze Farb-Palette zur Verfügung stehen.

Und das beste daran ist: diese Lektion ist – wie die nächste über die Verwendung eigener Schriften – eher kurz und knackig. Lass uns daher gleich anfangen 🙂

1. Wie man in CSS und HTML Farben definieren kann

Es gibt in HTML und CSS sechs verschiedene Möglichkeiten, Farben zu definieren:

  • über den Farb-Namen
  • über den RGB-Wert
  • über den RGBa-Wert
  • über den HSL-Wert
  • über den HSLa-Wert
  • über die HTML-Farb-Nummer

Manche davon wirst du öfter verwenden, andere fast gar nicht. Aber der Vollständigkeit halber werde ich dir auch die eher ungewöhnlichen zumindest kurz erklären. Also los:

1.1 Eine HTML-Farbe über einen Farb-Namen definieren

Dies ist die Technik, die wir bisher angewendet haben. Wenn wir z.B. eine Hintergrund-Farbe verändern wollen, dann verwenden wir für eine schwarze Farbe das Wort “black”:

background-color: black;

Insgesamt gibt es über 100 verschiedene Farb-Namen, die du verwenden kannst, und praktischerweise auch eine übersichtliche Liste unter diesem Link. Dort kannst du alle auf diese Art verfügbaren Farben ansehen und den passenden Begriff dazu finden.

Aber etwas über 100 Möglichkeiten sind dann doch sehr beschränkt. Wie wäres mit etwas über 16 Millionen? Dann auf zur RGB-Technik!

1.2 Eine HTML-Farbe über die RGB-Werte definieren

RGB ist eine Abkürzung für red-green-blue, also Rot, Grün und Blau. Eine RGB-Farbe ist eine Mischung aus diesen drei Farb-Bereichen. Für eine jede der drei Grund-Farben dieses Mixes kannst du eine Zahl zwischen 0 und 255 wählen, wobei 0 das Minimum und 255 das Maximum ist.

Grau-Töne erschaffst du mit dem RGB-Wert, in dem alle drei Werte R, G und B gleich groß sind. Wenn alle auf 0 sind erhätst du schwarz, sind alle auf 255, weiß.

Als CSS-Befehl würde schwarz dann z.B. so aussehen:

background-color: rgb(0, 0, 0);

Weil die wenigsten von uns sich die End-Farbe einfach so vorstellen können, wird im Alltag dann meist ein sogenannter HTML-Color-Picker verwendet, der dir aus einer ausgewählten Farbe die jeweilige Mischung anzeigt. Aber dazu weiter unten mehr.

1.3 Eine HTML-Farbe über den RGBa-Wert definieren

Der RGBa-Wert funktioniert im Grunde fast gleich wie der RGB-Wert, nur hat er einen interessanten Unterschied: Man kann als vierten Wert die Transparenz zwischen 0 und 1 angeben. Die 0 steht dabei für völlige Transparenz, die 1 für völlige Intransparenz. Für eine 50%-Transparenz würdest du dann z.B. den a-Wert 0.5 einsetzen. Hier z.B. der Code für ein zu 60% sichtbares schwarz:

background-color: rgba(0, 0, 0, 0.6);

1.4 Eine HTML-Farbe über den HSL-Wert definieren

HSL steht für Hue, Saturation, Lightness, daher für Farbton, Sättigung und Helligkeit. Diese Methode wird in der Web-Entwicklung seltener verwendet, dafür häufiger in Grafik-Programmen. Die Farbe setzte sich aus den drei Bestand-Teilen zusammen:

  • Hue: 0-359, entspricht einem Farbkreis mit 360°
  • Saturation: Wie intensiv eine Farbe ist in %, von 0-100%, wobei 100 maximale Sättigung ist
  • Lightness: Wie hell eine Farbe ist in %, von 0-100%, wobei 100 maximale Helligkeit ist

Ich habe auf meiner eigenen Webseite die HSL-Variante verwendet, weil sie hilfreich sein kann wenn man verschiedene Farb-Sets erstellen will, die zwar verschiedene Grund-Farbtöne aufweisen, aber ansonsten im Hinblick auf die Helligkeit und Sättigung gleich sind. Dann muss man nämlich nur den Hue-Wert ändern und hat relativ einfach verschiedene Farb-Varianten vom ansonsten gleichen Aussehen zusammen.

Das sieht man z.B. in den unterschiedlichen Farbsets auf www.bunterrichten.com wenn man auf den Blog-Bereich oder den Veranstaltungs-Bereich geht.

Im Programm-Code sieht das Ganze dann z.B. so aus:

background-color: hsl(300, 75%, 80%);

1.5 Eine HTML-Farbe über den HSLa-Wert definieren

Das kleine a steht dabei wieder für die Transparenz und wird wie bei RGBa zwischen 0 und 1 definiert. Da es so ähnlich ist, dazu nur kurz den Programmier-Befehl in CSS:

background-color: hsla(300, 75%, 85%, 0.5);

1.6 Eine HTML-Farbe über die HTML-Farb-Nummer definieren

Die HTML-Farb-Nummer funktioniert im Grunde genau gleich wie die RGB-Variante, aber sie ist kürzer zum Schreiben, weil man dazu nur 7 Zeichen braucht. Das hilft dem Browser, die Webseite schneller zu laden.

Dafür muss man sich aber an eine für einen Nicht-Informatiker auf den ersten Blick womöglich seltsam anmutende Schreibweise gewöhnen. Wir sind es ja gewöhnt, dass unsere Zahlen in 10er-Schritten gegliedert sind, und immer wenn wir bei einer Ziffer unserer Zahl von 9 auf 10 springen kommt ein neuer Stellen-Wert hinzu:

  • 7, 8, 9, 10   -> 2 Ziffern ab 10
  • 97, 98, 99, 100   -> 3 Ziffern ab 100
  • 997, 998, 999, 1000    -> 4 Ziffern ab 1000

Das Ganze nennt sich Dezimal-System, weil es immer beim Erreichen einer 10 in die nächste Ebene springt.

1.6.1 Wie das Hexadezimal-System funktioniert

In der Informatik wird oft statt dem Dezimal-Systen ein anderes verwendet, das statt der Basis 10 auf der Basis 16 aufgebaut ist. Dieses nennt man dann Hexadezimal-System (“Hexa” =  16). Statt sofort beim Erreichen der 10 in die nächste Stelle zu springen, geht die Zählweise im Hexadezimal-System noch weiter bis 15 und springt dann erst mit Erreichen der 16 auf die nächste Stelle.

Damit man die beiden Systeme gut auseinander kennt, schreibt man im Hexadezimal-System dann nach der 9 bis zur 15 mit den Buchstaben A-F weiter. Hier ein Vergleich:

  • Dezimal-System: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, …
  • Hexadezimal-System: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, …

Warum ist das so? Das liegt daran, dass die Informatik im Kern auf zwei Zuständen aufbaut: 1 und 0, Strom oder kein Strom. Diese sogenannte binäre Information (1/0, Strom/kein Strom) kann man nun mit anderen solchen binären Zuständen kombinieren und erhält dadurch mehrere mögliche Zustände. Zwei binäre Schaltungen ergeben bereits vier mögliche Zustände (0-0, 0-1, 1-0, 1-1), drei ergeben 8 Zustände, vier ergeben dann 16 usw.

Man kann sich die Anzahl an möglichen Zuständen dann mit Hilfe der folgenden Formel ausrechnen:

Anzahl an Möglichkeiten pro Schaltung hoch Anzahl an Schaltungen = Anzahl an Zuständen

Wenn wir nun 8 solcher binärer Schaltungen zusammenfassen, dann haben wir 2^8 mögliche Zustände, also insgesamt 256. In der Informatik nennen wir das auch Byte. Vielleicht hast du den schonmal im Zusammenhang “Bits und Bytes” gehört? Das ist im Kern damit gemeint.

1.6.2 Wie du vom Dezimal-System ins Hexadezimal-System umrechnest

Aber nach diesem kurzen Ausflug in die Welt der Informatik zurück zur Farb-Nummer in HTML! Diese besteht eben aus 3 Bytes, daher drei Mal einer Auswahl aus dem Bereich 0-255, wobei die erste Auswahl für Rot, die zweite für Grün und die dritte für Blau steht.

Eigentlich funktioniert es genau gleich wie die RGB-Methode, nur musst du die Zahlen, die du sonst im normalen Zahlen-System schreiben würdest, in das Hexadezimal-Format umwandeln.

Dazu rechnest du einfach deine Zahl (z.B. 243) durch 16. Die Ergebnis-Zahl ist die linke Ziffer deines Hexadezimal-Zahl, der Rest der Rechnun ist die rechte. Falls eine der beiden Zahlen größer als 9 ist, wandelst du sie in den entsprechenden Buchstaben um (10->A, 11->B, 12->C, 13->D, 14->E, 15->F). Dann schreibst du die beiden Zahlen nebeneinander und hast deine Hexadezimal-Zahl. Am Beispiel 243:

  1. Dividiere 243/16
  2. Ergebnis: 15, 3 Rest
  3. Umwandeln, Ergebnis 15 -> F, 3 -> 3
  4. Endergebnis im Hexadezimal-System: F3

Ziemlich aufwendig, oder? Vor allem wenn man das Ganze dann für alle drei Farb-Teile (Rot, Grün und Blau) machen soll.

Deshalb erledigt auch hier im Regelfall der HTML-Color-Picker die Arbeit für dich. Aber dazu mehr weiter unten.

1.6.3 Wie du die HTML-Farbnummer anwendest

Aber damit du auch weißt wie das dann im Programm-Code aussehen kann, hier ein Beispiel. Vor den jeweils 2 Ziffern die für R, G und B stehen gibst du noch eine Raute # dazu, damit der Browser weiß dass du damit eine Nummer meinst:

background-color: #aa3a14;

Die RGB-Angaben mit Hilfe der Nummer sind recht häufig in der Web-Programmierung anzutreffen. Die Bestimmung der Nummer zu der Farbe die du haben willst macht man heutzutage jedoch fast nicht mehr “händisch”, sondern über einen HTML-Color-Picker, der dir die entsprechende Nummer zu der Farbe die du willst gleich fix-fertig anzeigt.

Und zu diesem Wunder-Werk kommen wir jetzt auch gleich:

2. Einfachere Farbwahl mit dem HTML Color-Picker

Es ist zwar grundsätzlich möglich, eine Farbwahl mit Hilfe der genauen Zahl-Angaben zu machen, aber auch sehr umständlich. Deswegen wirst du in den meisten Fällen einen sogenannten Color-Picker verwenden, bei dem du mit Hilfe der Maus eine Farbe auswählst und dann die entsprechenden Werte in deinen Source-Code kopieren kannst. Das sieht dann in etwa so aus:

HTML Farben Color Picker

Wenn du z.B. in Google “HTML Color Picker” eingibst, kannst du ganz einfach die Farbe aussuchen, die dir gefällt. Unten werden dann die RGB-Werte, die HSL-Werte und der HTML-Farbcode (unter HEX) angezeigt – die musst du nur noch entsprechend in deinen Programm-Code übernehmen.

3. Die Wahl der richtigen Farbe in HTML und CSS

Die Wahl der Farben für deine Webseite ist eine ganz grundlegende, die einen enormen Einfluss darauf haben kann wie die Besucher der Webseite dich und dein Angebot wahrnehmen werden.

Wenn dich das Thema interessiert, dann gibt es dazu viele Artikel über Farb-Psychologie, auch im Hinblick auf die Webseiten-Gestaltung. Das Ganze ist eine eigene Wissenschaft, weswegen ich hier an dieser Stelle nicht weiter auf die Farbwahl eingehen werde.

Stattdessen werden wir uns als nächstes einen weiteren Aspekt ansehen, der einen enormen Einfluss auf die Wirkung deiner Webseite haben kann: Schriften.

Aber dazu mehr in der nächsten Lektion.