Farbcode: Unterschied zwischen den Versionen

Aus WKwiki
Zur Navigation springen Zur Suche springen
K (muss immernoch überarbeitet werden...)
(vorerst fertig.)
Zeile 1: Zeile 1:
{{Überarbeiten}}Es gibt unterschiedliche Arten von Farbcodes.
Es gibt unterschiedliche Arten von Farbcodes.


==Farbnamen==
==Farbnamen==
Zeile 5: Zeile 5:
{{quote|Code|<nowiki><font color=red>TEXT</font></nowiki>}}
{{quote|Code|<nowiki><font color=red>TEXT</font></nowiki>}}


Es gibt sehr viele dieser Namen und sie lassen sich einfacher Einprägen als Codes.
Es gibt sehr viele dieser Namen und sie lassen sich oft einfacher einprägen als Codes.


==Hex-Codes==
==Hexadezimale Zahlen==
Die verbreitetste Variante, vor allem im Webdesign, aber auch in Grafikprogrammen nicht unbeliebt, sind die Hex-Codes.
Die verbreitetste Variante, vor allem im Webdesign, aber auch in Grafikprogrammen nicht unbeliebt, sind die Hex-Codes.
Hex ist die Abkürzung für "Hexadezimal". Im Hexadezimalsystem gibt es statt 10 Ziffern, wie im "normalen" dezimalsystem (0-9), 16 Ziffern (0-f) im Einstelligen Bereich ist das noch einfach umzurechnen. Zum Veranschaulichen mal eine kleine Tabelle.
Hex ist die Abkürzung für "Hexadezimal". Im Hexadezimalsystem gibt es statt 10 Ziffern, wie im "normalen" dezimalsystem (0-9), 16 Ziffern (0-f) im Einstelligen Bereich ist das noch einfach umzurechnen. Zum Veranschaulichen mal eine kleine Tabelle.
Zeile 49: Zeile 49:
|-
|-
|32||20
|32||20
|-
|...||...
|-
|ff||255
|}
|}
   
   
So könnte man das ganze Beliebig fortsetzen. Mit einem Byte kann man genau 256 mögliche Variationen herstellen (00-ff), wodurch die Hex-Zahlen in der EDV (Elektronische Datenverarbeitung, also alles was mit Computern zutun hat ;-) ) eine große Rolle spielen. Die Hex-Codes für Farben haben in der Regel 6 Stellen. Mit einer 6stelligen Hex-Zahl kann man 16<sup>6</sup> unterschiedliche Farben definieren. Das wären aus geschrieben 16.777.216, also über 16 Mio Farben.
So könnte man das ganze Beliebig fortsetzen. Mit einem Byte kann man genau 256 mögliche Variationen herstellen (00-ff), wodurch die Hex-Zahlen in der EDV (Elektronische Datenverarbeitung, also alles was mit Computern zutun hat ;-) ) eine große Rolle spielen. Die Hex-Codes für Farben haben in der Regel 6 Stellen. Mit einer 6stelligen Hex-Zahl kann man 16<sup>6</sup> unterschiedliche Farben definieren. Das wären aus geschrieben 16.777.216, also über 16 Mio Farben.


Kommen wir zur Zusammensetzung der Codes.<br>
==Hexadezimale Farbcodes (Hex-Codes)==
Die Hex-Codes beginnen immer mit einer Raute, damit sie der Rechner nicht als Farbname vermutet.<br> An einem Bildschirm werden alle Farben aus den 3 Grundfarben rot, grün und blau (RGB) gemischt. Genau so bauen sich auch die HEX-Codes auf. Die ersten beiden der 6 Stellen beschreiben, wie viel Rot verwendet werden soll. 00 bedeutet kein rot und ff bedeutet rot auf voller helligkeit. Genauso definieren die 3. und 4. Stelle den Grün- und die 5. und 6. Stelle den Blauanteil. Das Mischen der Farben funktioniert etwas anders als im Farbkasten der Schule. Hier wird die Leuchtkraft der einzelnen Grundfarben festgelegt (man denke an die Regenbogenfarben, die aus weißem licht entstehen wenn es im Regen gebrochen wird), weshalb auch statt gelb grün in den Grundfarben vertreten ist. Gelb wird aus Grün und Rot gemsicht. Man kann sich hier zur Veranschaulichung wieder den Regenbogen vorstellen, denn gelb liegt hier zwischen rot und grün.
Kommen wir nun zur Zusammensetzung der Farbcodes.<br>
Die Hex-Codes beginnen immer mit einer Raute, damit sie der Rechner sie von Farbnamen unterscheiden kann.<br> An einem Bildschirm werden alle Farben aus den 3 Grundfarben rot, grün und blau (RGB) gemischt.<br> Genau so bauen sich auch die HEX-Codes auf. Die ersten beiden der 6 Stellen beschreiben, wie viel rot verwendet werden soll. 00 bedeutet kein rot und ff bedeutet rot auf voller helligkeit. Genauso definieren die 3. und 4. Stelle den Grün- und die 5. und 6. Stelle den Blauanteil. Das Mischen der Farben funktioniert etwas anders als im Farbkasten der Schule. Hier wird die Leuchtkraft der einzelnen Grundfarben festgelegt (man denke an die Regenbogenfarben, die aus weißem licht entstehen wenn es im Regen gebrochen wird), weshalb auch statt gelb grün in den Grundfarben vertreten ist. Gelb wird aus Grün und Rot gemsicht. Man kann sich hier zur Veranschaulichung wieder den Regenbogen vorstellen, denn gelb liegt hier zwischen rot und grün.


Ein Paar Beispiele zur Veranschaulichung
Ein Paar Beispiele zur Veranschaulichung
Zeile 62: Zeile 67:
|<font color="#000000">#000000</font>||Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
|<font color="#000000">#000000</font>||Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
|-
|-
|<font color="#ff0000">#ff0000</font>||Rot leuchtet auf voller Kraft, wärend grün und blau ausgeschalten sind. Wir erhalten rot.
|<font color="#ff0000">#ff0000</font>||Rot leuchtet auf voller Kraft, während grün und blau ausgeschalten sind. Wir erhalten rot.
|-
|-
|<font color="#00ff00">#00ff00</font>||Grün leuchtet auf voller Kraft, wärend rot und blau ausgeschalten sind. Wir erhalten grün.
|<font color="#00ff00">#00ff00</font>||Grün leuchtet auf voller Kraft, während rot und blau ausgeschalten sind. Wir erhalten grün.
|-
|-
|<font color="#0000ff">#0000ff</font>||Blau leuchtet auf voller Kraft, wärend rot und grün ausgeschalten sind. Wir erhalten blau.
|<font color="#0000ff">#0000ff</font>||Blau leuchtet auf voller Kraft, während rot und grün ausgeschalten sind. Wir erhalten blau.
|-
|-
|<font style="background-color:#000000" color="#ffffff">#ffffff</font>||Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.
|<font style="background-color:#000000" color="#ffffff">#ffffff</font>||Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.
|-
|-
|<font color="#ffff00">#ffff00</font>||Rot und Grün leuchten auf voller Kraft, wärend blau ausgeschalten ist. Wir erhalten gelb.
|<font color="#ffff00">#ffff00</font>||Rot und Grün leuchten auf voller Kraft, während blau ausgeschalten ist. Wir erhalten gelb.
|-
|-
|<font color="#00ffff">#00ffff</font>||Grün und Blau leuchten auf voller Kraft, wärend rot ausgeschalten ist. Wir erhalten türkis.
|<font color="#00ffff">#00ffff</font>||Grün und Blau leuchten auf voller Kraft, während rot ausgeschalten ist. Wir erhalten türkis.
|-
|-
|<font color="#ff00ff">#ff00ff</font>||Rot und Blau leuchten auf voller Kraft, wärend grün ausgeschalten ist. Wir erhalten lila.
|<font color="#ff00ff">#ff00ff</font>||Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten lila.
|-
|-
|<font color="#7f0000">#7f0000</font>||Rot leuchtet auf halber Kraft, wärend grün und blau ausgeschalten sind. Wir erhalten dunkles rot.
|<font color="#7f0000">#7f0000</font>||Rot leuchtet auf halber Kraft, während grün und blau ausgeschalten sind. Wir erhalten dunkles rot.
|-
|-
|<font color="#ff7f00">#ff7f00</font>||Rot leuchtet voll und Grün halb, wärend blau ausgeschalten ist. Wir erhalten orange.
|<font color="#ff7f00">#ff7f00</font>||Rot leuchtet voll und Grün halb, während blau ausgeschalten ist. Wir erhalten orange.
|-
|-
|<font color="#7f007f">#7f007f</font>||Rot und Blau leuchten halb, wärend grün ausgeschalten ist. Wir erhalten dunkles lila.
|<font color="#7f007f">#7f007f</font>||Rot und Blau leuchten halb, während grün ausgeschalten ist. Wir erhalten dunkles lila.
|}
|}


Zeile 98: Zeile 103:
|0||0||0||0%||0%||0%||Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
|0||0||0||0%||0%||0%||Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
|-
|-
|<font color="#ff0000">255</font>||0||0||<font color="#ff0000">100%</font>||0%||0%||<font color="#ff0000">Rot leuchtet auf voller Kraft, wärend grün und blau ausgeschalten sind. Wir erhalten rot.</font>
|<font color="#ff0000">255</font>||0||0||<font color="#ff0000">100%</font>||0%||0%||<font color="#ff0000">Rot leuchtet auf voller Kraft, während grün und blau ausgeschalten sind. Wir erhalten rot.</font>
|-
|-
|0||<font color="#00ff00">255</font>||0||0%||<font color="#00ff00">100%</font>||0%||<font color="#00ff00">Grün leuchtet auf voller Kraft, wärend rot und blau ausgeschalten sind. Wir erhalten grün.</font>
|0||<font color="#00ff00">255</font>||0||0%||<font color="#00ff00">100%</font>||0%||<font color="#00ff00">Grün leuchtet auf voller Kraft, während rot und blau ausgeschalten sind. Wir erhalten grün.</font>
|-
|-
|0||0||<font color="#0000ff">255</font>||0%||0%||<font color="#0000ff">100%</font>||<font color="#0000ff">Blau leuchtet auf voller Kraft, wärend rot und grün ausgeschalten sind. Wir erhalten blau.</font>
|0||0||<font color="#0000ff">255</font>||0%||0%||<font color="#0000ff">100%</font>||<font color="#0000ff">Blau leuchtet auf voller Kraft, während rot und grün ausgeschalten sind. Wir erhalten blau.</font>
|-
|-
|<font color="#ff0000">255</font>||<font color="#00ff00">255</font>||<font color="#0000ff">255</font>||<font color="#ff0000">100%</font>||<font color="#00ff00">100%</font>||<font color="#0000ff">100%</font>||<font color="#ffffff" style="background-color:#000000">Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.</font>
|<font color="#ff0000">255</font>||<font color="#00ff00">255</font>||<font color="#0000ff">255</font>||<font color="#ff0000">100%</font>||<font color="#00ff00">100%</font>||<font color="#0000ff">100%</font>||<font color="#ffffff" style="background-color:#000000">Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.</font>
|-
|-
|<font color="#ff0000">255</font>||<font color="#00ff00">255</font>||<font color="#000000">0</font>||<font color="#ff0000">100%</font>||<font color="#00ff00">100%</font>||<font color="#000000">0%</font>||<font color="#ffff00">Rot und Grün leuchten auf voller Kraft, wärend blau ausgeschalten ist. Wir erhalten gelb.</font>
|<font color="#ff0000">255</font>||<font color="#00ff00">255</font>||<font color="#000000">0</font>||<font color="#ff0000">100%</font>||<font color="#00ff00">100%</font>||<font color="#000000">0%</font>||<font color="#ffff00">Rot und Grün leuchten auf voller Kraft, während blau ausgeschalten ist. Wir erhalten gelb.</font>
|-
|-
|<font color="#000000">0</font>||<font color="#00ff00">255</font>||<font color="#0000ff">255</font>||<font color="#000000">0%</font>||<font color="#00ff00">100%</font>||<font color="#0000ff">100%</font>||<font color="#00ffff">Grün und Blau leuchten auf voller Kraft, wärend rot ausgeschalten ist. Wir erhalten türkis.</font>
|<font color="#000000">0</font>||<font color="#00ff00">255</font>||<font color="#0000ff">255</font>||<font color="#000000">0%</font>||<font color="#00ff00">100%</font>||<font color="#0000ff">100%</font>||<font color="#00ffff">Grün und Blau leuchten auf voller Kraft, während rot ausgeschalten ist. Wir erhalten türkis.</font>
|-
|-
|<font color="#ff0000">255</font>||<font color="#000000">0</font>||<font color="#0000ff">255</font>||<font color="#ff0000">100%</font>||<font color="#000000">0%</font>||<font color="#0000ff">100%</font>||<font color="#ff00ff">Rot und Blau leuchten auf voller Kraft, wärend grün ausgeschalten ist. Wir erhalten lila.</font>
|<font color="#ff0000">255</font>||<font color="#000000">0</font>||<font color="#0000ff">255</font>||<font color="#ff0000">100%</font>||<font color="#000000">0%</font>||<font color="#0000ff">100%</font>||<font color="#ff00ff">Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten lila.</font>
|-
|-
|<font color="#ff7f00">#ff7f00</font>||Rot leuchtet voll und Grün halb, wärend blau ausgeschalten ist. Wir erhalten orange.
|<font color="#ff0000">255</font>||<font color="#007f00">127</font>||<font color="#000000">0</font>||<font color="#ff0000">100%</font>||<font color="#007f00">50%</font>||<font color="#000000">0%</font>||<font color="#ff7f00">Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten orange.</font>
|-
|-
|<font color="#7f007f">#7f007f</font>||Rot und Blau leuchten halb, wärend grün ausgeschalten ist. Wir erhalten dunkles lila.
|<font color="#7f0000">127</font>||<font color="#000000">0</font>||<font color="#00007f">127</font>||<font color="#7f0000">50%</font>||<font color="#000000">0%</font>||<font color="#00007f">50%</font>||<font color="#7f007f">Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten dunkles lila.</font>
|}
|}
Mit CSS könnte man einen Text damit folgendermaßen färben:
{{quote|Code|<nowiki><span style='color:rgb(127,0,127)'>Text in dunkellila</span></nowiki>}}
<span style='color:rgb(127,0,127)'>Text in dunkellila</span>
{{quote|Code|<nowiki><span style='color:rgb(100%,50%,0%)'>Text in orange</span></nowiki>}}
<span style='color:rgb(100%,50%,0%)'>Text in orange</span>

Version vom 18. Juli 2008, 08:25 Uhr

Es gibt unterschiedliche Arten von Farbcodes.

Farbnamen

Das einfachste - und nicht wirklich ein Code - sind die englischen Farbnamen. So kann man beispielsweise mit HTML (zum Beispiel auch im Chat → auch als normaler User) einen Text so färben:

Code:
<font color=red>TEXT</font>


Es gibt sehr viele dieser Namen und sie lassen sich oft einfacher einprägen als Codes.

Hexadezimale Zahlen

Die verbreitetste Variante, vor allem im Webdesign, aber auch in Grafikprogrammen nicht unbeliebt, sind die Hex-Codes. Hex ist die Abkürzung für "Hexadezimal". Im Hexadezimalsystem gibt es statt 10 Ziffern, wie im "normalen" dezimalsystem (0-9), 16 Ziffern (0-f) im Einstelligen Bereich ist das noch einfach umzurechnen. Zum Veranschaulichen mal eine kleine Tabelle.

Dezimal Hexadezimal
0 0
1 1
2 2
... ...
8 8
9 9
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
... ...
30 1e
31 1f
32 20
... ...
ff 255

So könnte man das ganze Beliebig fortsetzen. Mit einem Byte kann man genau 256 mögliche Variationen herstellen (00-ff), wodurch die Hex-Zahlen in der EDV (Elektronische Datenverarbeitung, also alles was mit Computern zutun hat ;-) ) eine große Rolle spielen. Die Hex-Codes für Farben haben in der Regel 6 Stellen. Mit einer 6stelligen Hex-Zahl kann man 166 unterschiedliche Farben definieren. Das wären aus geschrieben 16.777.216, also über 16 Mio Farben.

Hexadezimale Farbcodes (Hex-Codes)

Kommen wir nun zur Zusammensetzung der Farbcodes.
Die Hex-Codes beginnen immer mit einer Raute, damit sie der Rechner sie von Farbnamen unterscheiden kann.
An einem Bildschirm werden alle Farben aus den 3 Grundfarben rot, grün und blau (RGB) gemischt.
Genau so bauen sich auch die HEX-Codes auf. Die ersten beiden der 6 Stellen beschreiben, wie viel rot verwendet werden soll. 00 bedeutet kein rot und ff bedeutet rot auf voller helligkeit. Genauso definieren die 3. und 4. Stelle den Grün- und die 5. und 6. Stelle den Blauanteil. Das Mischen der Farben funktioniert etwas anders als im Farbkasten der Schule. Hier wird die Leuchtkraft der einzelnen Grundfarben festgelegt (man denke an die Regenbogenfarben, die aus weißem licht entstehen wenn es im Regen gebrochen wird), weshalb auch statt gelb grün in den Grundfarben vertreten ist. Gelb wird aus Grün und Rot gemsicht. Man kann sich hier zur Veranschaulichung wieder den Regenbogen vorstellen, denn gelb liegt hier zwischen rot und grün.

Ein Paar Beispiele zur Veranschaulichung

Hex-Code Beschreibung
#000000 Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
#ff0000 Rot leuchtet auf voller Kraft, während grün und blau ausgeschalten sind. Wir erhalten rot.
#00ff00 Grün leuchtet auf voller Kraft, während rot und blau ausgeschalten sind. Wir erhalten grün.
#0000ff Blau leuchtet auf voller Kraft, während rot und grün ausgeschalten sind. Wir erhalten blau.
#ffffff Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.
#ffff00 Rot und Grün leuchten auf voller Kraft, während blau ausgeschalten ist. Wir erhalten gelb.
#00ffff Grün und Blau leuchten auf voller Kraft, während rot ausgeschalten ist. Wir erhalten türkis.
#ff00ff Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten lila.
#7f0000 Rot leuchtet auf halber Kraft, während grün und blau ausgeschalten sind. Wir erhalten dunkles rot.
#ff7f00 Rot leuchtet voll und Grün halb, während blau ausgeschalten ist. Wir erhalten orange.
#7f007f Rot und Blau leuchten halb, während grün ausgeschalten ist. Wir erhalten dunkles lila.

Das ganze kann natürlich fortgesetzt werden... bei den oben genannten 16,77 Mio Möglichkeiten wäre die Tabelle ganzschön lang. Wenn man will, dass das lila etwas rötlicher wird setzt man einfach den rot-Wert nach oben; wenn man einen Farbton heller machen will hebt man alle 3 Werte etwas an, usw. Wenn das eigene Vorstellungsvermögen die Mischverhältnisse nicht hergibt kann man ja auch ein wenig herumprobieren oder eben eine Farbtabelle zurate ziehen.

In CSS gibt es auch noch die Möglichkeit, 3stellige Hex-Codes zu verwenden. Das funktioniert genauso, nur dass man für jede Grundfarbe nur 1 Byte zur Verfügung hat. Es gibt also statt ~ 17 Mio nur 163, also 4096 Möglichkeiten hat. Die Zusammensetzung ist sonst gleich. So steht #000 für schwarz, #f00 für rot, #0f0 für grün, #00f für blau, #fff für weiß, #800 für dunkelrot, #808 für dunkellila, etc.

Dezimal-Codes

Für die, die mit Hexadezimalen Zahlen nicht klarkommen aber sich dennoch nicht von den vergleichsweise wenigen festgelegten Farbnamen abhängig machen möchten gibt es mit CSS und in vielen Grafikprogrammen noch die Möglichkeit, die Farbanteile in Prozent oder (genauer) in Anteilen von 255 angeben. Die Funktionsweise ist sonst wieder gleich.

Teile von 255 Prozent Beschreibung
rot grün blau rot grün blau
0 0 0 0% 0% 0% Alle 3 Grundfarben leuchten mit 0 Anteilen. Wir erhalten schwarz.
255 0 0 100% 0% 0% Rot leuchtet auf voller Kraft, während grün und blau ausgeschalten sind. Wir erhalten rot.
0 255 0 0% 100% 0% Grün leuchtet auf voller Kraft, während rot und blau ausgeschalten sind. Wir erhalten grün.
0 0 255 0% 0% 100% Blau leuchtet auf voller Kraft, während rot und grün ausgeschalten sind. Wir erhalten blau.
255 255 255 100% 100% 100% Alle Farben leuchten mit voller Kraft. Wir erhalten weiß.
255 255 0 100% 100% 0% Rot und Grün leuchten auf voller Kraft, während blau ausgeschalten ist. Wir erhalten gelb.
0 255 255 0% 100% 100% Grün und Blau leuchten auf voller Kraft, während rot ausgeschalten ist. Wir erhalten türkis.
255 0 255 100% 0% 100% Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten lila.
255 127 0 100% 50% 0% Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten orange.
127 0 127 50% 0% 50% Rot und Blau leuchten auf voller Kraft, während grün ausgeschalten ist. Wir erhalten dunkles lila.

Mit CSS könnte man einen Text damit folgendermaßen färben:

Code:
<span style='color:rgb(127,0,127)'>Text in dunkellila</span>

Text in dunkellila

Code:
<span style='color:rgb(100%,50%,0%)'>Text in orange</span>

Text in orange