CSS lernen - Farben im CSS

Einstellen der Farbeigenschaft

Die color-Eigenschaft definiert die Textfarbe (im Allgemeinen auch die Vordergrundfarbe) eines Elements. Im body-Selektor definiert color die Standardtextfarbe für die gesamte Seite. Schauen Sie sich folgendes Beispiel an:

body {
    color: #ff5722;
}

Definition von Farbwerten

Farben in CSS werden am häufigsten in den folgenden Formaten angegeben:

• ein Farbschlüsselwort - wie red, blue, white, transparent usw.
• ein HEX-Wert - wie #ff0000, #00ff00 usw.
• ein RGB-Wert - wie rgb(255, 0, 0)

Mit der Einführung von CSS3 sind weitere Farbformate wie z.B: HSL, HSLA, RGBA hinzugekommen, welche eine Transparenz von Farbdefinitionen erlauben. Wir werden sie im später im CSS3-Farbkapitel genauer kennenlernen.

Bleiben wir zunächst bei den grundlegenden Methoden zum Definieren der Farbwerte:

Farbschlüsselwörter

CSS definiert die wenigen Farbschlüsselwörter, mit denen Sie Farbwerte auf einfache Weise angeben können.

Diese grundlegenden Farbschlüsselwörter sind: black, blue, aqua, fuchsia, gray, navy, olive, purple, red, green, lime, maroon, silver, teal, white und yellow. Bei den Farbnamen wird die Groß-/Kleinschreibung nicht beachtet.

Beispiel:

h1 {
    color: red;
}

Moderne Webbrowser unterstützen viel mehr Farbnamen, als im CSS-Standard definiert sind. Sicherheitshalber sollten Sie aber HEX odr RGB-Farben verwenden.

HEX-Farbwerte

Hex (kurz für Hexadezimal) ist bei weitem die am häufigsten verwendete Methode zum Definieren von Farben im Web.

Hex stellt Farben mit einem sechsstelligen Code dar, dem ein Rautezeichen vorangestellt ist, wie #rrggbb, wobei rr, gg, und bb die rote, grüne bzw. blaue Komponente der Farbe darstellt.

Der Wert jeder Komponente kann von 00 (keine Farbe) und FF (Vollfarbe) in hexadezimaler Schreibweise oder 0 und 255 in dezimaler äquivalenter Schreibweise variieren. Somit repräsentiert #ffffff die weiße Farbe und #000000 die schwarze Farbe.

Beispiel der Schreibweise:

h1 {
    color: #ffa500;
}              

Definition von Farbwerten per RGB

Farben können im RGB-Modell (Rot, Grün und Blau) unter Verwendung der rgb()-Notation definiert werden. Die rgb()-Funktion akzeptiert drei durch Kommas getrennte Werte, die den Rot-, Grün- und Blauanteil der Farbe angeben. Diese Werte werden üblicherweise als Ganzzahlen zwischen 0 und 255 angegeben, wobei 0 keine Farbe und 255 volle oder maximale Farbe darstellt. Im folgenden Beispiel wird dieselbe Farbe wie im vorherigen Beispiel angegeben, jedoch in RGB-Notation.

h1 {
    color: rgb(255, 165, 0);
}             

Einfluss der Farbeigenschaft auf Ränder und Konturen

Die color-Eigenschaft gilt nicht nur für Textinhalte, sondern für alles im Vordergrund, was einen Farbwert annehmen kann. Wenn zum Beispiel border-color oder outline-color nicht explizit für das Element definiert wurde, wird stattdessen der Farbwert verwendet. Schauen wir uns ein Beispiel an:

p.border {
    color: #0000ff;
    border: 2px solid;
}
p.outline {
    color: #00ff00;
    outline: 2px solid;
}