Archiv der 'Webfarbenlehre'

Einführung in das CMYK Farbsystem

Die primären CMYK Pigmente sind Cyan (eine Art Türkis), Magenta (eine Art Pink) und Yellow (Gelb). Schwarz (K) wird auch als Primärpigment gesehen. Durch Schwarz entstehen dünklere Versionen der anderen Pigmente. Schwarz entsteht ebenfalls, indem man Cyan, Magenta und Gelb in großen Mengen miteinander kombiniert.

Das CMYK Farbsystem wird für gedruckte Illustrationen verwendet und benutzt Pigmente statt Licht. Der Unterschied zwischen Pigmenten und Licht liegt dort, wo Farben existieren, welche Enegie von einem beleuchteten Objekt (wie in unserem Taschenlampen-Beispiel aus dem RGB Farbsystem Tutorial) reflektieren. Pigmente stellen Energie dar, die nicht von Substanzen wie Tinte oder Lack absorbiert werden. Daher nennt man das CMYK Farbsystem auch Substraktives Farbsystem.

Zum Beispiel ist die Cyan-farbige Tinte auf einem Papier deshalb Cyan, weil es die Energie vom normalen weißen Licht auf allen sehbaren Wellenlängen absorbiert außer für den Teil des Spektrums der Cyan repräsentiert. Nur dieser Teil wird reflektiert.

Indem man die Primärpigmente kombiniert (Cyan, Magenta und Yellow), entstehen die Primärfarben (Rot, Grün und Blau). Das folgende Diagramm ist die Umkehrung unsere Taschenlampen-Beispiels.

Die dazugehörenden hexadezimalen Werte sind wie folgt:

  • Gibt es keine Level von den Pigmenten, dann entsteht die Farbe Weiß (W), dargestellt durch #FFFFFF.
  • Werden alle Pigmente in großen Mengen kombiniert, dann entsteht die Farbe Schwarz (K), dargestellt durch #000000.
  • Cyan (C): #00FFFF
  • Magenta (M): #FF00FF
  • Gelb (Y): #FFFF00
  • Rot (R) (Magenta und Gelb): #FF0000
  • Grü¼n (G) (Cyan und Gelb): #00FF00
  • Blau (B) (Cyan und Magenta): #0000FF

Das CMYK Farbsystem

Das CMYK Farbsystem arbeitet mit Pigmenten im Gegensatz zum RGB System, welches Licht benutzt. Die vier Primärpigmente sind Cyan (C), Magenta (M), Yellow (Y) (Gelb) und Key (Key steht für Kontrast = Schwarz). Jede Farbe im CMYK Spektrum entsteht dadurch, indem man Tinte oder Lack verwendet, um die Energie des weißen Lichts zu absorbieren. Weißes Licht ist eine Zusammensetzung der Wellenlängen von allen Farben. Die Farbe, die von der Leinwand reflektiert wird, repräsentiert die Energie, die nicht vom weißen Licht absorbiert worden ist. Aus diesem Grund nennt man das CMYK System auch Subtraktives Farbsystem.

Navigation:
Teil 1: Einführung in das CMYK Farbsystem
Konzept des CMYK Farbsystems und die Primärpigmente.

Teil 2: Wie CMYK mit RGB zusammenhängt
Wie die Farbsysteme in Relation zueinander stehen und für was sie benutzt werden.

Das coole RGB Farben Trainingstool

Willkommen bei unserem interaktiven Webfarben-Trainingstool!

Dieses Tool wurde entwickelt, um Ihre Fähigkeit eine Farbe zu analysieren und deren hexadezimalen Farbwert zu bestimmen, zu trainieren. Wie geht das?

Ganz einfach! Analysieren Sie die Farbe, die in der linken Seite der Box erscheint. Schätzen Sie den passenden Level für die rote, grüne und blaue Farbkomponente und schreiben Sie die Werte in die Input-Felder darunter. Klicken Sie auf “Los!” und Sie werden auf der rechten Seite der Box sehen, wie gut Sie sich schlagen! Wenn es nicht stimmt, kein Problem. Sie können die Werte einfach Ändern, indem Sie den Tipps folgen, die wir Ihnen geben!

Trainingsarten

Es gibt zwei Trainingsarten bei diesem Tool:

  • Beim Anfänger Training, das standardmäßig eingestellt ist, gibt es 16 mögliche Werte für jede Farbe. Das sind 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE und FF.
  • Beim Fortgeschrittenen Training gibt es 255 mögliche Wert für jede Farbe.

 
 
#
für Anfänger (Was heißt das?)
 Loading…

RGB Farben mischen

Wie bereits erwähnt, bestehen RGB Farben aus roten, grünen und blauen Komponenten. Jede Farbe im RGB Spekturm besteht aus verschiedenen Farblevels für jede der roten, grünen und blauen Komponenten.

Unterschiedliche Grautöne werden produziert, wenn man von jeder Farbkomponente, also Rot, Grün und Blau, denselben Level verwendet. Die Dunkelheit/Helligkeit des Grautons hängt davon ab, wie nahe die Werte an 0 (also Schwarz) oder an F (also Weiß) herankommen. Ein mittleres Grau entsteht bei einem Hex-Wert von #808080, da 80 den Mittelpunkt der Farblevelskala darstellt. Dieses Prinzip kann man ebenso verwenden, um eine hellere oder dünklere Version von jeder Farbe zu erhalten. Ein helleres Magenta (oder Pink) ist lediglich ein Grau, zu dem gleich hohe rote und blaue Farblevel hinzugefügt wurden, z.B. #FF80FF. Ein Mintgrün ist beispielsweise #CCFFCC. Stahlblau wird angezeigt durch #CCCCDD.

Unterschiedliche Farben entstehen, wenn man unterschiedliche Level von Rot, Grün und Blau vermischt. So ist beispielsweise Orange eine dunklere Version von Gelb mit einem höheren Bestandteil an roten Komponenten als grünen. Daher können wir annehmen, dass ein starkes Orange den Hex-Wert von #FF9900 hat. Probieren Sie unser interaktives Webfarben-Trainingstool aus und lernen Sie die unterschiedlichen Level von Rot, Grün und Blau in einer Farbe ganz einfach und ohne Hilfsmittel zu bestimmen.

Nahe verwandt, baut das CMYK Farbsystem auf den Grundprinzipien des RGB Farbsystems auf.

RGB Farblevel verstehen

Jede Primärfarbe hat verschiedene Farblevel. Das ist deshalb so entscheidend, weil man ohne Level nur 8 volle Farben hätte: Schwarz, Weiß, Rot, Grün, Blau, Cyan, Magenta und Gelb. Es gäbe keine Farben dazwischen.

Denken Sie an unser “Taschenlampen”-Beispiel vom ersten Teil dieses RGB Webfarben Tutorials. Stellen Sie sich vor, dass die Taschenlampen ein bisschen weniger stark leuchten (so als würden die Batterien schwach werden). Das Licht, das auf die Leinwand scheint, nimmt an Helligkeit ab. Wir können dies mit unseren hexadezimalen Farbwerten darstellen, indem wir den jeweiligen Wert für Rot, Grün und Blau näher an 00 heranbringen. Je näher wir zu 00 (also Schwarz) kommen, desto dünkler werden die Farben. Im Webdesign sind die am meisten verwendeten Farben (Farben, die als sicher gelten) mit den Leveln 00, 33, 66, 99, CC oder FF für jede der roten, grünen und blauen Komponenten definiert.

Das Bild unterhalb zeigt die am meisten verwendeten Farblevel:

Ein dunkles Rot könnte durch #330000 dargestellt werden. Dieses Rot hat ein Fünftel der Helligkeit der vollen roten Farbe (d.h. #FF0000). #660000 ist ein Rot, welches zwei Fünftel der Helligkeit des vollen Rots besitzt. Dieses Prinzip gilt auch für Grün und Blau. Ein volles Grün wird mit dem Hex-Wert #00FF00 dargestellt. Ein Dunkelgrün, #003300, hat somit nur ein Drittel der Helligkeit des vollen Grüns.

Die folgenden Bilder illustrieren ein paar einfache Beispiele:

Einführung in das RGB Farbsystem

Das RGB Farbsystem basiert auf dem Grundprinzip, dass sich jede Farbe aus Rot, Grün und Blau zusammensetzt. Farben entstehen, indem mehr Licht zur Startfarbe Schwarz hinzugefügt wird. Daher wird das RGB Farbsystem auch Additives Farbsystem genannt. Jede Farbe im RGB Spektrum setzt sich aus einem anderen Wert für ihre roten, grünen und blauen Farbkomponenten zusammen.

Jede dieser roten, grünen und blauen Komponenten wird durch eine Zahl zwischen 0 und 255 repräsentiert. Webdesigner sind eher mit dem hexadezimalen Format dieser Werte vertraut, die von 00 bis FF reichen. 00 ist die niedrigste Menge der Farbe, FF die höchste Menge. In der folgenden Darstellung verwenden wir den hexadezimalen Wert für Schwarz als Beispiel, um zu zeigen, welcher Teil des Hex-Wertes Rot, Grün und Blau repräsentiert.

Stellen Sie sich am besten das RGB Farbsystem als weiße Leinwand in einem dunklen Raum vor, auf die eine rote, grüne und blaue Taschenlampe leuchtet. Das Bild unterhalb zeigt Ihnen, wie das aussehen könnte.

  • Wenn alle Taschenlampen aus sind, dann ist es schwarz (K). Das heißt alle Farbwerte sind Null, das ergibt den Hex-Wert #000000.
  • Wenn alle Taschenlampen auf die Leinwand scheinen, dann produzieren sie Weiß (W). Das ergibt einen Hex-Wert von #FFFFFF (F wie das englische Full (Voll)… als Eselsbrü¼cke).
  • Rot (R) ist daher #FF0000.
  • Grün (G): #00FF00
  • Blau (B): #0000FF
  • Cyan (C) (eine Art Türkis) besteht aus Blau und Grün: #00FFFF
  • Magenta (M) (eine Art Pink) besteht aus Rot und Blau: #FF00FF
  • Gelb (Y) (Yellow) besteht aus Rot und Grün: #FFFF00

Das RGB Farbsystem

Das RGB Farbsystem basiert auf dem Prinzip, dass jede Farbe eine Komposition der Farben Red (Rot), Green (Grün) und Blue (Blau) ist. Jede Farbe im RGB Spektrum entsteht zum ersten Mal, wenn man auf einer dunklen Leinwand (oder Designfläche) jedes der roten, grünen und blauen Elemente hinzufügt. Aus diesem Grund wird es auch als Additives Farbsystem bezeichnet.

Navigation:
Teil 1: Einführung in das RGB Farbsystem
Konzept des RGB Farbsystems, Diskussion der hexadezimalen Darstellung der Farbwerte.

Teil 2: RGB Farblevel
Art und Weise wie rote, grüne und blaue Farblevel funktionieren und wie man sie benutzen kann. Mit Beispielbildern.

Teil 3: RGB Farben mischen
Farbmischung der unterschiedlichen Farbgrade von Rot, Grün und Blau.

Teil 4: RGB Farben-Trainingstool
Interaktives Webfarben-Trainingstool, um zu lernen wie man Farben analysiert und deren hexadezimale Werte bestimmt.

Einführung in die Webfarben

In unseren Tutorials stellen wir die drei Hauptfarbsysteme vor:

Das RGB Farbsystem ist ein additives Farbsystem bei dem die Farben entstehen, indem Licht auf einer dunklen Leinwand hinzugefügt wird. Daher wird es von Systemen verwendet, welche die Fähigkeit haben, Licht hinzuzufügen wie z.B. Farbbildschirme. In unserem Tutorial stellen wird das hexadezimale Farbformat, die unterschiedlichen Farblevel und die Art und Weise, wie Levels zu neuen Farben zusammengemischt werden können, vor.

CMYK ist ein subtraktives Farbsystem, bei dem die Farben durch Energie geschaffen werden, die nicht vom weißen Licht von Substanzen wie Tinte oder Farbe geschluckt werden. Wir beschreiben wie das CMYK Farbsystem funktioniert und wie das CMYK System mit dem RGB Farbsystem zusammenhängt.

HSB ist ein Farbsystem bei dem sich Farben durch die Bearbeitung dreier Komponenten verändern lassen. Eine Farbe wird mit Hilfe von Hue (Farbton), Saturation (Sättigung) und Brightness (Helligkeit) definiert.

Wir wollen mit unseren Tutorials ein besseres Verständnis dieser drei Farbsysteme vermitteln.