1.3 Farb-Codierung

Die Helligkeit der drei Subpixel eines Pixels bestimmt die für uns wahrnehmbare Farbe des Pixels.

Die Farbe eines Pixels kann mit Hilfe von drei Helligkeitsangaben zwischen 0 und 255 festgelegt werden.

Manchen Farben wird ein Farbname zugeordnet, mit welchem man beim Webdesign festlegen kann, welche Farbe ein Element auf der Webseite haben soll.

Quelle: Selfhtml.org

Um eine Farbe festzulegen, notiert man die Helligkeitsstufen als einen RGB-Code:

  • "R" steht für "rot",
  • "G" steht für "Grün" und
  • "B" steht für "blau":

rgb(Helligkeit von R, Helligkeit von G, Helligkeit von B)

Beispiel: "Forestgreen" = rgb(34, 139, 34)

Verändern Sie die Helligkeit der Subpixel und beobachten Sie, wie die Veränderung der Helligkeit eines Subpixels, die vom Beobachter wahrgenommene Farbe ändert.

In einem neuen Fenster starten: Codierung eines RGB-Pixels

Ein Computer kennt nur die beiden Zustände "0" und "1", weswegen man ein Zahlensystem benötigt, in dem man mit nur zwei Ziffern jede beliebige Zahl beschreiben kann.

Im Dezimalsystem kann man mit den zehn verschiedene Ziffern 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 zählen. Sobald man die Zahl 9 erreicht hat, braucht man eine zweite Stelle und schreibt die nächste Zahl mit zwei Ziffern.

Im Binärsystem kann man nur mit zwei verschiedenen Ziffern 0 und 1 zählen. Daher gibt es bereits nach der Ziffer 1 eine neue Stelle.

Eine Zahl im Binärsystem nennt man eine Dualzahl.

  • Mit einem Klick auf die Schaltfläche "nächster Schritt" kann die Zählzahl um eins erhöht werden.
  • Mit einem Klick auf "Zahlen zurücksetzen" kann die Zählzahl auf den Wert "0" zurückgesetzt werden.
  • Mit Hilfe der unteren Steuerelemente kann der Zählvorgang automatisiert werden.

In einem neuen Fenster starten: Zählen im Binärsystem

In einem neuen Fenster starten: Zählen im Dezimalsystem

Damit der Computer eine Farbe darstellen kann, müssen die Dezimalzahlen des RGB-Codes in Binärzahlen umgerechnet werden. Dazu geht man wie folgt vor:

  • Man teilt eine Dezimalzahl solange durch 2, bis die Zahl 0 erreicht wurde.
  • In jedem Schritt notiert man den Rest der Division und schreibt daraus die Binärzahl von hinten nach vorne auf.

In einem neuen Fenster starten: Umrechnung: Dezimalzahl zu Binärzahl

Pink = rgb(255, 192, 203) = 111111111100000011001011

Crimson = rgb(220,20,60) = 110111000001010000111100

SteelBlue = rgb(70, 130, 180) = 010001101000001010110100

ForestGreen = rgb(34, 139, 34) = 001000101000101100100010

Mit 4 Bits kann man 16 Binärzahlen angeben.

Im Dezimalsystem benötigt man zwei Stellen um diese darzustellen.

Fügt man den Ziffern

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

die Ziffern

a, b, c, d, e, f

hinzu, genügt eine Stelle, um alle 4-Bit-Binärzahlen anzugeben.

Das Hexadezimalsystem besteht aus 16 verschiedenen Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Dabei gilt:

\[ \begin{align} & \text{a}_{16} \quad \hat{=} \quad 10_{10} \\ & \text{b}_{16} \quad \hat{=} \quad 11_{10} \\ & \text{c}_{16} \quad \hat{=} \quad 12_{10} \\ & \text{d}_{16} \quad \hat{=} \quad 13_{10} \\ & \text{e}_{16} \quad \hat{=} \quad 14_{10} \\ & \text{f}_{16} \quad \hat{=} \quad 15_{10} \end{align}\]

In der folgenden App können Sie nachvollziehen, wie man im Hexadezimalsystem zählt:

In einem neuen Fenster starten: Zählen im Hexadezimalsystem

Neben dem RGB-Code im Dezimalsystem ist es möglich, eine Farbe im Hexadezimalsystem anzugeben. Dazu wird eine Dezimalzahl aus dem RGB-Code in eine Hexadezimalzahl umgerechnet.

In einem neuen Fenster starten: Umrechnung: Dezimalzahl zu Hexadezimalzahl

Mit den drei Zahlsystemen: Dezimalsystem, Binärsystem und Hexadezimalsystem gibt es drei verschiedene Möglichkeiten, wie die Farbe eines Pixels codiert werden kann:

In einem neuen Fenster starten: Pixel-Codierung

Pink = rgb(255, 192, 203) = #ffc0cb

Crimson = rgb(220,20,60) = #dc143c

SteelBlue = rgb(70, 130, 180) = #4682b4

ForestGreen = rgb(34, 139, 34) = #228b22

Berechnen Sie die Anzahl von Bits, die notwendig ist, um folgendes Bild zu speichern.

Das Bild aus Übung 1 wurde künstlerisch verändert, indem mit einem Bildbearbeitungsprogramm eine Unschärfe in das Bild eingefügt wurde.

Das Bild enthält jetzt nicht mehr nur die Farben "Schwarz" und "Weiß". Die Unschärfe wird mit der Farbe "Grau" in 256 Abstufungen erzeugt. Ein graues Pixel entsteht, wenn alle drei Subpixel die gleiche Helligkeit haben, weswegen "Weiß" (Graustufe mit Helligkeit 255) und "Schwarz" (Graustufe mit Helligkeit 0) jeweils auch als eine Graustufe angesehen werden kann.

Um die Unschärfe darzustellen, wird das Bild in 384 x 384 Pixel unterteilt.

Berechnen Sie die Anzahl von Bits, die notwendig ist, um das Bild zu speichern.

Das Bild aus Übung 2 wurde künstlerisch weiter verändert, indem mit einem Bildbearbeitungsprogramm ein Voronoi-Filter über das Bild gelegt wurde.

Das Bild mit 384 x 384 Pixeln muss jetzt mit dem vollen RGB-Code codiert werden.

Berechnen Sie die Anzahl von Bits, die notwendig ist, um das Bild zu speichern.

Nehmen Sie ein Foto mit Ihrem Handy auf.

  • Finden Sie heraus, wie viele Pixel dieses Bild hat.
  • Berechnen Sie den Speicherplatz, den dieses Bild in Bits benötigt.
  • Auf ihrem Handy benötigt das von Ihnen aufgenommene Bild deutlich weniger Speicherplatz, als der von Ihnen berechnete. Finden Sie heraus, warum das so ist.
  • Gestalten Sie auf der Basis Ihrer Daten und Erkenntnisse ein Plakat mit dem Werkzeug ExcaliDraw.

Lassen Sie Ihrer Lehrkraft in der vereinbarten Weise ihr Dokument zukommen. Dafür gibt es die vereinbarte Menge an XPs.