Grafik/Farben

Aus SELFHTML-Wiki
< Grafik(Weitergeleitet von Referenz:CSS/Farben)
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Farbtiefen, Farbmodelle und Farbkanäle

Unter der Farbtiefe einer Grafik wird verstanden, wie viele verschiedene Farbtöne in der Grafikdatei gespeichert werden können. Bei Pixelformaten gibt es folgende typischen Farbtiefen:

  • 2 Farben (schwarz/weiß)
  • 16 Farben
  • 256 Farben
  • 16,7 Mio. Farben

Das GIF-Format unterstützt 2, 16 und 256 Farben, das JPEG-Format 16,7 Mio. Farben, ebenso wie das PNG-Format. Dass in einer Datei so viele Farben gespeichert werden können, bedeutet aber noch lange nicht, dass Anwender tatsächlich so viele Farben sehen. Denn wie viele Farben beim Anwender angezeigt werden können, hängt von der eingesetzten Hardware (Grafikkarte, Bildschirm) ab. Eine weitere, nichttechnische Einschränkung erfolgt durch die Wahrnehmungsfähigkeit des Anwenders. Einerseits ist die farbliche Auflösung des menschlichen Auges wesentlich geringer als die Farbtiefe der Farbmodelle und andererseits verringern eventuell vorhandene Einschränkungen der Sehfähigkeit des Anwenders die Wahrnehmung zusätzlich.

Bei Pixelgrafiken wird für jeden Pixel dessen Farbe gespeichert. Um die Farben in computer-gerechte Darstellungsform zu bringen, müssen sie als Zahlenwerte dargestellt werden. Das ist ganz ähnlich wie bei der Umsetzung von Zeichen in Bits und Bytes. Bei der numerischen Repräsentation von Farben im Computer gibt es verschiedene Modelle. Die bekanntesten Modelle sind:



[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 alt=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).

  • 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.

Farbkreis nach Küppers
Farbkreis nach Küppers mit Helligkeitsabstufungen von 20% bis 90%
SVG-Grafik
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.

[Bearbeiten] Weblinks

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML