CSS/Wertetypen/Farbangaben

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Farben spielen bei der Gestaltung eine wichtige Rolle. In CSS stehen verschiedene Möglichkeiten bereit, eine Farbe festzulegen bzw. zu „mischen“.


Inhaltsverzeichnis

[Bearbeiten] Das RGB-Modell (Rot/Grün/Blau-Mischung)

Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema z.B. die Farbwerte 0,0,153. (0 rot, 0 grün, 153 blau). Mit diesem Schema können bis zu 16,7 Millionen unterschiedliche Farben definiert werden.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
400px RGB-Modell Die nebenstehende Abbildung zeigt, wie Farbtöne beim RGB-Modell durch addierendes Mischen zustande kommen.

[Bearbeiten] Hexadezimale Schreibweise

Die hexadezimale Schreibweise ist die am weitesten verbreitete Methode, einen Farbwert anzugeben. Nach einem Gatterzeichen (hash) werden die Farbanteile der Farben rot, grün und blau in einem Bereich von 00 (0) bis FF (255) notiert. Allgemein: #RRGGBB.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

CSS erlaubt eine Kurzschreibweise, allgemein: #RGB. Die Kurzschreibweise ist dann möglich, wenn die erste und die zweite Ziffer eines Farbwertes identisch sind (#RGB entspricht #RRGGBB).

Beispiele zu hexadezimalen Farbangaben
Farbe Hexadezimaler Wert Hinweis
#ff7f50 Entspricht der benannten Farbe „coral“
#abc Entspricht #aabbcc
#71f39b Beliebiger Farbwert
#000 Entspricht #000000
Beachten Sie: Die Kurzschreibweise mit 3 Hex-Werten ist bei HTML- und SVG-Attributen nicht erlaubt.

[Bearbeiten] rgb

In der Funktion rgb(Rot, Grün, Blau) werden die Werte für Rot, Grün und Blau entweder als ganze Zahlen im Bereich 0-255 oder Prozentwerte im Bereich von 0%-100% notiert (jedoch nicht beides gleichzeitig).

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiele für RGB-Mischungen
Farbe RGB-Wert Hinweis
rgb(60%,20%,40%) Beliebige Farbe
rgb(0,128,0) Entspricht der benannten Farbe „green“
keine rgb(20,100%,50) Zahlen- und Prozentwerte dürfen nicht vermischt werden.

[Bearbeiten] rgba

CSS erlaubt es, zur RGB-Mischung noch einen Transparenzwert hinzuzufügen. Dadurch lassen sich zum Beispiel teiltransparente Hintergrundfarben definieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Die allgemeine Schreibweise hierfür lautet rgba(Rot, Grün, Blau, Deckkraft). Es gelten die selben Regeln wie für die einfache RGB-Mischung. Der Wert Deckkraft wird jedoch als Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz) angegeben.

Interessant wird diese Mischung, wenn sich nicht nur Hintergrundfarben, sondern auch Hintergrundbilder überlappen.

Beispiele für RGBA-Mischungen
Farbe RGBA-Wert Hinweis
rgba(255,215,0,0.8) 80% Deckkraft
rgba(255,215,0,0.5) 50% Deckkraft
rgba(255,215,0,0.2) 20% Deckkraft

[Bearbeiten] Farbton/Sättigung/Helligkeits-Mischung

Da die Mischung von Rot, Grün und Blau oftmals nicht intuitiv stattfindet, erlaubt CSS auch das Mischen von Farbton (englisch hue), Sättigung (englisch saturation) und Helligkeit (englisch lightness). Die Schreibweise lautet hsl(Farbton, Sättigung, Helligkeit).

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Farbton ist ein ganzzahliger Wert zwischen 0 und 360. Bei diesem Wertebereich stellt man sich vor, dass die Regenbogenbogenfarben in einem Kreis angeordnet sind. 0 entspricht Rot, 120 entspricht grün, 240 entspricht blau und 360 entspricht wieder Rot.

Es sind auch höhere und negative Werte erlaubt, diese Werte werden dann in eine Zahl innerhalb des genannten Bereiches umgewandelt.

Sättigung und Helligkeit werden in Prozent ausgedrückt.

Die Sättigung kann man sich als Verlauf des Farbtons (100%) zu einem Grauton (0%) vorstellen. Die Helligkeit dagegen Verläuft von der Farbe weiß (100%) zur Farbe schwarz (0%). Eine Helligkeit von 50% gilt als normale Helligkeit.


400px HSB-Modell Die nebenstehende Abbildung zeigt eine typische Dialogbox eines Grafikprogramms, die das Definieren von Farbtönen nach dem HSL-Modell ermöglicht.

[Bearbeiten] hsl

Verschiedene Sättigungs- und Helligkeitswerte der Farbe Cyan
Sättigung
100% 75% 50% 25% 0%
Helligkeit 100%
75%
50%
25%
0%
Beispiele für HSL-Mischungen
Farbe HSL-Wert Hinweis
hsl(60, 100%, 50%) yellow
hsl(39, 100%, 50% orange
hsl(0, 100%, 50%) red

[Bearbeiten] hsla

Auch einer HSL-Mischung kann ein Transparenz hinzugefügt werden. Die allgemeine Schreibweise hierfür lautet hsla(Farbton, Sättigung, Helligkeit, Deckkraft). Es gelten die selben Regeln wie für die einfache HSL-Mischung. Der Wert Deckkraft wird als Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz) angegeben.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiele für HSLA-Mischungen
Farbe HSLA-Wert Hinweis
hsla(270,100%,50%,0.8) 80% Deckkraft
hsla(270,100%,50%,0.5) 50% Deckkraft
hsla(270,100%,50%,0.2) 20% Deckkraft

[Bearbeiten] Das CMYK-Modell

Das CMYK-Farbmodell ist ein subtraktives Farbmodell, das die technische Grundlage für den modernen Vierfarbdruck bildet. Die Abkürzung CMYK steht für die drei Farbbestandteile Cyan, Magenta, Gelb (Yellow) und den Schwarzanteil Key als Farbtiefe.

Beachten Sie: Im Augenblick wird es noch von keinem Browser implementiert.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML