Medien & Informatik · Klasse 5/6
Der RGB-Farbmischer
Drei Subpixel, drei Zahlen – und 16 Millionen Farben. Erst ausprobieren, dann mischen, dann verstehen, wie der Computer Farben schreibt.
Aus dem Alltag
Warum 16 Farben nicht reichen
Ein Sonnenuntergang hat tausend Rottöne. Ein Gesicht hat hundert Hauttöne. Mit einer Tabelle aus 16 Farben sähe jedes Foto aus wie ein altes Videospiel. Fotos brauchen Millionen Farben.
Und die kommen nicht aus einer Tabelle – sondern aus den drei Subpixeln, die du in Lektion 1 unter der Lupe gesehen hast.
Deine Aufgabe: Erinnert euch: Welche drei Farben hatten die Subpixel in einem Pixel? Und was hat das Auge gesehen, wenn alle drei an waren?
Erklärt
Drei Subpixel, drei Zahlen
Schritt 1: Jedes Subpixel hat einen Regler. Das rote, das grüne und das blaue Subpixel können nicht nur an oder aus sein – sie können gedimmt werden, in 256 Stufen: 0 heißt aus, 255 heißt volle Kraft, 128 ist halb.
Schritt 2: Eine Farbe sind drei Zahlen. „Rot 255, Grün 0, Blau 0“ ist reines Rot. „Rot 255, Grün 255, Blau 0“ – Rot und Grün an, Blau aus – ergibt Gelb. Das überrascht: Mit Tuschkasten wäre Rot + Grün ein Braun. Aber hier mischen wir Licht, und Licht addiert sich. Alle drei an: Weiß. Alle aus: Schwarz.
Warum Grün – und nicht Gelb?
- Im Kunstunterricht sind Rot, Gelb und Blau die Grundfarben. Am Bildschirm sind es Rot, Grün und Blau. Das ist kein Fehler – es sind zwei verschiedene Arten zu mischen.
- Farbe auf Papier schluckt Licht: Jede Farbe, die du dazumischst, nimmt etwas weg. Alle zusammen ergeben ein dunkles Braun.
- Ein Bildschirm sendet Licht: Jedes Subpixel, das du dazuschaltest, kommt hinzu. Alle drei zusammen ergeben Weiß. Deshalb heißt es hier: Rot + Grün = Gelb.
- Merkhilfe: Papier = Wegnehmen (Ende Schwarz). Bildschirm = Dazugeben (Ende Weiß).
Jedes Subpixel hat 256 Stufen – aus bis volle Kraft.
Rot + Grün = Gelb. Alle drei = Weiß.
Rot, Grün, Blau – so schreibt man jede Farbe.
Tafelbild 1
Ausprobieren: der Farbmischer
So funktioniert das Tafelbild
- Du siehst: links die Fläche „Deine Mischung“ – das ist ein einziges, riesiges Pixel. Daneben seine drei Subpixel, so wie unter der Lupe. Darunter die drei Zahlen.
- Du kannst: die drei Regler Rot, Grün und Blau von 0 bis 255 schieben. Mehr ist nicht nötig – schau, was die Fläche und die Subpixel tun.
Ein Subpixel
Stell Grün und Blau auf 0 und schieb nur Rot hoch. Was siehst du bei 50, bei 128, bei 255?
Zwei Subpixel
Rot auf 255 lassen, jetzt Grün hochschieben. Welche Farbe entsteht bei Grün 128? Bei Grün 255?
Alle gleich
Stell alle drei auf denselben Wert: 0, dann 128, dann 255. Was passiert – und warum ist das kein Zufall?
Ohne JavaScript gilt: Rot 255, Grün 0, Blau 0 ist reines Rot. Alle drei auf 255 ergibt Weiß, alle auf 0 Schwarz. Rot 255 und Grün 255 ergeben Gelb.
Was du gesehen hast
- Ein Subpixel allein macht immer nur seine eigene Farbe – heller oder dunkler.
- Rot + Grün wird Gelb, nicht Braun: Licht wird dazugegeben, Farbe auf Papier weggenommen.
- Sind alle drei gleich hell, kommt Grau heraus – von Schwarz (0) bis Weiß (255).
Tafelbild 2
Aufgaben: Mische diese Farben
Jetzt weißt du, was die Regler tun. Hier bekommst du eine Farbe vorgegeben und mischst sie nach. Die Aufgaben werden schwerer: Erst reine Mischungen (Gelb, Türkis, Lila), dann gedimmte (Grau, Orange, Himmelblau, Braun).
So funktioniert das Tafelbild
- Du siehst: rechts eine dritte Fläche: die Zielfarbe mit ihrem Namen. Unten die Aufgaben als Knöpfe „1 · Gelb“ bis „8 · Braun“.
- Du kannst: eine Aufgabe wählen, die Regler schieben, bis deine Fläche der Zielfläche gleicht, dann „Prüfen“. Du bekommst Sterne und die Lösung mit Erklärung. „Lösung zeigen“ stellt die Regler richtig ein. „Zufallsfarbe“ ist das Spiel für Profis.
Die reinen Mischungen
Löse Aufgabe 1 bis 3 (Gelb, Türkis, Lila). Bei allen dreien sind genau zwei Subpixel ganz an. Welche?
Die gedimmten
Löse Aufgabe 4 bis 8. Orange ist Gelb mit weniger Grün – findest du es? Bei Braun hilft: alle drei Zahlen sind klein.
Zufall
Drück „Zufallsfarbe“ und sammle drei Runden lang Sterne. Vergleicht in der Klasse.
Ohne JavaScript gilt: Gelb = Rot 255, Grün 255, Blau 0. Türkis = 0, 255, 255. Lila = 255, 0, 255. Grau = 128, 128, 128. Orange = 255, 140, 0.
Tipp
Erklärt
Wie der Computer die Farbe aufschreibt
Schritt 3: Drei Zahlen sind drei Byte. 256 Stufen je Subpixel – das ist genau das, was in ein Byte passt (8 Bit, 0 bis 255). Ein Pixel mit drei Subpixeln braucht also drei Byte = 24 Bit. Gelb als Bits: 11111111 11111111 00000000 – das erste Byte ist Rot (voll), das zweite Grün (voll), das dritte Blau (aus).
Schritt 4: Wie viele Farben das sind. 256 Stufen Rot × 256 Stufen Grün × 256 Stufen Blau = 16 777 216 Farben. Rund 16,7 Millionen – mehr, als ein Auge unterscheiden kann. Vergleiche mit Lektion 4: 2 Bit waren 4 Farben, 4 Bit 16, jetzt 24 Bit. Mehr Bits je Pixel, mehr Farben – und dreimal so viel Platz wie mit 8 Bit.
Schritt 5: Die Kurzschrift. 24 Ziffern je Farbe sind unhandlich. Webseiten schreiben deshalb jedes Byte als zwei Zeichen aus dem Vorrat 0–9 und a–f: ff heißt 255, 80 heißt 128, 00 heißt 0. Gelb ist dann #ffff00, Koralle #f97c5f. Das ist der Hex-Code. Drei Schreibweisen, eine Farbe.
Als drei Zahlen
- Rot 255
- Grün 255
- Blau 0
Als 24 Bit
111111111111111100000000
Als Hex-Code
#ffff00- ff = 255, 00 = 0
- Zwei Zeichen je Subpixel (Farbe)
So funktioniert das Tafelbild
- Du siehst: dasselbe Tafelbild wie oben – jetzt zeigt es zusätzlich die Bits und den Hex-Code deiner Mischung.
- Du kannst: mischen wie vorher, oder unten einen Hex-Code eintippen (z. B.
#ff0000) – die Regler springen mit.
Bits lesen
Stell Gelb ein (255, 255, 0). Lies die 24 Bits: Welche acht stehen für Blau?
Hex tippen
Tipp unten #000000 ein, dann #ffffff, dann #f97c5f. Welche Farbe ist die letzte – und wo hast du sie auf dieser Seite schon gesehen?
Ohne JavaScript gilt: Eine Farbe ist 3 Byte = 24 Bit. Gelb: 11111111 11111111 00000000 = #ffff00. 256 × 256 × 256 = 16 777 216 Farben.
Sichern
Ins Heft und zwei Aufgaben
5. Der RGB-Farbmischer
Jede Farbe wird aus , und gemischt, je 0 bis .
Gelb = Rot , Grün , Blau . Weiß = alle drei auf .
Ein Pixel braucht 3 Byte = Bit. Das ergibt Millionen Farben.
Der Hex-Code von Gelb: . Der Hex-Code dieser Website-Farbe (Koralle): .
Alle Werte findest du im dritten Tafelbild.
RGB: Jede Farbe sind drei Zahlen von 0 bis 255 – rot, grün, blau. Drei Byte je Pixel, 16,7 Millionen Farben. Licht addiert sich: Rot + Grün = Gelb.
Deine Aufgabe
Welche Farbe ist das?
Drei Zahlen von 0 bis 255 – probier es im Farbmischer aus, wenn du unsicher bist.
Drei Zahlen von 0 bis 255 – probier es im Farbmischer aus, wenn du unsicher bist.
Rot 255, Grün 0, Blau 0
Rot 255, Grün 255, Blau 255
Rot 0, Grün 0, Blau 0
Rot 255, Grün 255, Blau 0
Rot 128, Grün 128, Blau 128
Deine Aufgabe
Zahlen und Farben
Ordne jeder Beschreibung die passende Farbe zu.
- Alle drei Lämpchen aus
- Alle drei Lämpchen voll an
- Nur das blaue Lämpchen an
- Rot und Blau an, Grün aus
- Grün und Blau an, Rot aus
- Blau
- Lila
- Schwarz
- Türkis
- Weiß