Farben in CSS und HTML

Worum geht´s?

Wo wir in HTML noch sehr eingeschränkt mit der Auswahl der Farben sind, wird die Sache mit CSS um vieles bunter. Wie aber funktionieren Farben in CSS? Welche Arten von Farben und ihrer Auswahl gibt es eigentlich? Im folgenden Tutorial werden wir uns die wichtigsten Punkte ansehen.

1. Wo wir in CSS überall Farben finden

Die häufigsten Anwendungsgebiete für Farben in CSS sind:

• Textfarbe
• Hintergrund-Farbe
• Rahmen-Farbe

Schauen wir uns die jeweiligen CSS-Codes dafür mal an. Nehmen wir an, es existiert ein DIV in unserem HTML-Code mit der ID „intro“:

#intro {
   color: red;
   background-color: yellow;
   border: 2px solid blue;
}

Das Ergebnis sieht in etwa so aus:

In diesem Fall haben wir die jeweiligen Farben via Farbnamen in CSS bestimmt.

Was uns zur ersten Möglichkeit bringt, Farben in CSS zu bestimmen: vorbestimmte Farbnamen.

2. Farben in CSS über Farbnamen vergeben

Du kannst in CSS einfach den Namen bestimmter Farben (in Englisch!) angeben, und der Browser weiß dann, welche Farbe gemeint ist. Recht offensichtlich sollte das bei einfachen Farbnamen wie „red“ oder „blue“ sein.

Da es sehr viele davon gibt, und wir sie nur selten verwenden, hier ein Link zu einer Liste der häufiger verwendeten Farbnamen.

Viele dieser Farben sind angenehm für das Auge (mit Ausnahmen, wie z.B. gelb) und ein annehmbarer Start in die Welt der Farben in CSS.

Aber die Auswahl ist dann doch sehr beschränkt.

Was wäre, wenn wir uns Farben selbst zusammenmischen könnten, wie ein Maler mit seiner Palette?

Genau darum geht’s bei der Farbauswahl über RGB.

3. Farben in CSS über RGB auswählen

Um Farben in CSS über den RGB-Standard auszuwählen, kannst du verschiedene Techniken verwenden. Im CSS-Code sehen diese in etwa so aus:

#intro { 
    color: rgb(220, 100, 30); 
    color: rgba(220, 100, 30, 0.7);
    color: #44ff2e;
}

3.1 Mit rgb() Farben in CSS auswählen

Wenn du die erste Variante im Code oben wählst, kannst du innerhalb der Klammer deine „Misch-Werte“ für die Grundfarben

• rot
• grün und
• blau

von links nach rechts im Bereich 0-255 angeben.

Grundsätzlich gilt: Je höher der Wert, desto intensiver und heller wird die Farbe. Daraus ergeben sich insgesamt 256 Möglichkeiten pro Grundwert, oder 256 hoch 3 Möglichkeiten insgesamt – das wären fast 17 Millionen Farben, die du auswählen kannst.

Zur Orientierung: Wenn du alle 3 Werte auf 0 setzt, bekommst du tiefschwarz. Alle 3 Werte auf 255 ergeben weiß.

3.2 Das ominöse a von rgba in CSS

Bei der zweiten oben angeführten Möglichkeit kommt noch ein vierter Wert dazu, den du von 0 bis 1 wählen kannst (Achtung: weil wir im englischen Sprachraum sind, ist das Komma bei der Kommazahl ein Punkt!).

Dieser vierte Wert bestimmt die Transparenz der Farbe, was vor allem für Hintergrund-Farben interessant ist.

Ein Wert von 1 bedeutet völlig undurchsichtig, ein Wert von 0 macht die Farbe völlig durchsichtig. Ein Wert von 0.7 ist meistens ein guter Startwert, wenn man halbdurchsichtige Farben erreichen will.

3.3 RGB-Farben in CSS über Hexcodes

In sehr vielen Webseiten ist jedoch eher die dritte oben angeführte Variante verbreitet – die mit der Raute und den sechs Zahlen bzw. Buchstaben.

Man könnte diese Variante als eine Kurzschreibweise für die erste bezeichnen, weil sie eigentlich genau gleich funktioniert.

Aber mit einem wichtigen Unterschied: Sie basiert auf dem Hexadezimalen Zahlensystem.

3.3.1 Was ist ein Hexadezimales Zahlensystem?

Möglicherweise hast du den Begriff noch nie gehört, darum soll er hier kurz erklärt werden.

Unser „normales“ Zahlensystem mit dem wir im Alltag rechnen ist ein dekadisches Zahlensystem, auch wenn wir es im Alltag nie so bezeichnen.

„Dekadisch“ bedeutet so viel wie „basierend auf der Zahl 10“. Vermutlich kennst du das Wort „Dekagramm“ (dag) von den Gewichtseinheiten, wo 1 Dekagramm 10 Gramm bedeuten, auch wenn du vielleicht noch nie über das Wort „Dekagramm“ nachgedacht hast.

In unserem alltäglichen dekadischen Zahlensystem kommt immer dann eine neue Stelle zu einer Zahl hinzu, wenn wir über die Ziffer 9 hinausgehen:

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Die 1 vom 10er kommt hinzu, nachdem wir (von 0 weg gezählt) 10 Zahlen mit nur einer Stelle gehabt haben. Überschreitet die Zehner-Stelle wiederum die 9, kommt eine erste Hunderter-Stelle hinzu usw.

Bei einem Hexadezimalen Zahlensystem ist die Basis des Zahlensystems nicht 10, sondern 16 („Hexa“ = 16). Das heißt, die neue Stelle kommt immer erst dazu, sobald bei der einen Stelle 16 Ziffern überschritten wurden.

Nun haben wir aber das Problem, dass wir nur die Ziffern 0-9 für Zahlen haben, das sind 10, nicht 16.

Die Lösung ist, dass wir an die 0-9 noch die Buchstaben A-F dranhängen, um auf insgesamt 16 Möglichkeiten zu kommen.

Hier in paar Beispiele zum Kontrollieren, ob du das Prinzip verstanden hast (jeweils links die Zahl im dekadischen, rechts die Zahl im hexadezimalen System):

• 0 = 0
• 5 = 5
• 11 = A
• 13 = C
• 15 = F
• 16 = 10
• 100 = 64
• 255 = FF

3.3.2 Wie du das hexadezimale Zahlensystem zur Farbauswahl in CSS anwendest

Anstatt also z.B. zu schreiben rgb(100, 15, 255) kann man auch schreiben #640FFF. Die Hex-Codes für CSS Farbcodes werden immer 2-stellig angegeben.

Die Zahl 15, die ja eigentlich nur aus einem F besteht, bekommt also noch eine 0 davor, damit sie 2-stellig ist, daher 0F.

Die drei hexadezimalen Zahlen für rot, grün und blau werden einfach direkt hintereinander geschrieben, mit einer Raute davor.

4. Farben in CSS mit Hilfe des HTML Color Pickers von Google und Visual Studio Code

Wir verwenden meist einen etwas einfacheren Weg, um passende Farben auszuwählen: diverse Color-Picker.

Mit diesen kannst du sehr bequem direkt die Farbe auswählen, die dir gefällt, und die Color-Picker sagen dir dann, welche Farbcodes dahinter stecken.

4.1 Der Color Picker von Visual Studio Code

Wenn du dir das Tutorial zu Visual Studio Code durchgelesen hast, dann hast du hoffentlich einige der hilfreichsten Erweiterungen schon installiert.

Falls ja, werden dir in deinem CSS-Code die derzeit ausgewählten Farben schon recht übersichtlich dargestellt.

Wenn du dann auf eine dieser Farben klickst, öffnet sich automatisch der Color Picker von Visual Studio Code:

Nun kannst du ganz einfach die gewünschte Farbe auswählen, und Visual Studio Code fügt sie dann für dich ein.

4.2 Der Color Picker von Google

Google stellt auch einen Color Picker bereit, der sehr einfach zu finden ist: einfach in die Google Suche die Begriffe „HTML Color Picker“ eingeben, oder alternativ auf diesen Link klicken.

Der sieht dann in etwa so aus:

Hier kopierst du einfach die gewünschte Variante der Farbbestimmung (z.B. Hex-Code) und fügst sie in deinen CSS-Code ein.

5. Selten genutzt, aber interessant: HSLA-Farben in CSS

Der RGB-Standard ist nicht der einzige, den du nützen kannst.

Ein Alternativer Farbraum, der für deine Farben in CSS besonders interessant ist, ist der HSL- bzw. der HSLA-Farbraum.

5.1 Was der HSLA-Farbraum ist und wie er funktioniert

Die einzelnen Buchstaben bedeuten dabei folgendes:

• Hue: Die Farbe von 0-360, bestimmt z.B. ob die Grundfarbe grün, blau, rot oder orange wird.
• Saturation: Die Sättigung von 0-100, also wie sehr sich die Farbe von grau wegbewegt. 100 ist volle Färbigkeit.
• Lightness: Helligkeit der Farbe von 0-100, wobei 100 weiß entspricht.
• Alpha: Durchsichtigkeit, genau wie bei rgba von 0-1

Weil das Ganze für die meisten wohl ziemlich ungewohnt ist, hier auch ein Link zu einem HSLA-Color-Picker, bei dem man etwas herumspielen und das Ergebnis einfach rauskopieren kann.

Praktischerweise ist dabei auch gleich der entsprechende – umgerechnete – RGB-Code dabei, falls man den auch haben will.

5.2 Warum sind HSLA-Farben in CSS so interessant?

HSLA-Farben ermöglichen es dir auf einfache Weise, verschiedene Farben mit der gleichen Sättigung und Helligkeit auszuwählen.

Das ist sehr hilfreich, wenn du dir eine Art „Palette“ an CSS-Farben zusammenstellen willst, die gut zusammen passen.

Willst du später eine der Farben ändern oder eine weitere hinzufügen, kannst du einfach nur den ersten Wert (Hue) ändern, und erhältst mit großer Wahrscheinlichkeit eine gut zu den anderen passende Farbe.

6. Aber welche Farben sind jetzt gute Farben in CSS?

Leider (oder zum Glück, je nach Perspektive) ist die Farbauswahl nichts, was sich so leicht mathematisch berechnen lassen kann.

Vieles davon ist subjektiv, individuell oder kulturell unterschiedlich. So haben etwa manche Farben je nach Kultur sehr unterschiedliche, oft sogar gegensätzliche Bedeutungen. Nicht selten spielt es auch eine Rolle, ob eine Farbe eher „schreiender“ oder eher pastellfarbiger gehalten ist. Auch individuelle Erfahrungen können Assoziationen mit bestimmten Farben prägen.

Es gibt aber einige Dinge, die beinahe universelle Grundregeln sein könnten:

• Beschränkte Anzahl an Farben: Finde maximal 5, besser weniger, Grundfarben. Weniger ist mehr!
• Kontraste: Text und Hintergrund müssen gute Kontraste aufweisen, sonst kann man sie nicht vernünftig lesen
• Bedenke auch Druckwerke wie Flyer usw. – funktionieren deine Farben auch auf diesen Medien?
• Grellere Farben sind gute Eyecatcher, aber anstrengend auf großen Flächen.
• Farben sind wichtige Marken-Kennzeichen: Welche Farben hat McDonalds? Rot und gelb. Farben und Farb-Kombinationen dürfen dich und dein Produkt abheben von anderen.
• Testen, testen, testen: Frag andere, was die Farben bei ihnen auslösen – vor allem diejenigen, die du erreichen willst, also deine Zielgruppe(n).

Das Thema ist ein riesen-großes, und es gibt unzählige Artikel dazu im Internet.

Aber mit den obigen Hinweisen kommst du schonmal recht weit.

Viel Freude beim Farben mischen!

Diskussion zum Tutorial