Bit, Dezimal, Hexadezimal & Farben

Farben können als uint oder hex Werte definiert werden.
Zum Thema RGB und Farbmodelle hab ich auch einges geschrieben.

RGB besteht aus 3 Farbwerten für Rot Grün und Blau mit jeweils einem Wert von 0 bis 255. Diese Zahl ist die höchste zweistellige Zahl im Hexadezimalsystem FF.
Der Farbwert ist allerdings ein Wert, wobei in Hexadezimal die letzten beiden Stellen für Blau, die mittleren für Grün und die ersten beiden Stellen für Rot reserviert sind. Diesen uint Farbwert kann man als Hex-Wert aber auch als Dezimalwert darstellen. Ich hatte anfangs Probleme das zu verstehen, geholfen hat mir folgendes Beispiel.

Ein Beispiel:
Drei dreistellige Werte in einer Zahl dargestellt. Der mindere Wert1 bleibt wie er ist der zweite, wird mit 1000 multipliziert, wert3 wird mit 1 Mill multipliziert. Diese 3 Werte werden addiert.

Stellen wir uns vor wir hätten 2 Werte, die man in einer Zahl darstellen will. Die Werte sind jeweils eine dreistellige Zahl. So könnte man für einen der beiden Werte die Stellen von 0 bis 999 reservieren und für die zweite Zahl die tausender Stellen, also von 1000 bis 999000. Das gleiche kann man sich natürlich auch mit 3 oder mehr Zahlen vorstellen, indem man einfach nochmal die Zahlen von 1Mill bis 999 Millionen reserviert. Man könnte auch damit rechnen, indem man für einen Wert alles im Tausenderbereich rechnet. Dazu muss man den Wert einfach mit 1000 multiplizieren.

Auf diese Weise wird dieser Hexadezimale Farbwert erzeugt. Wenn man das in dezimal umrechnet, hat man die ersten 256 Werte für blau, das entspräche in meinem Beispiel den Stellen 0 bis 999, dann folgen die nächsten Stellen für grün. Allerdings kann man das im Dezimalsystem nicht so schön sehen, denn es geht ja bei 256 weiter und nicht bei der vierstelligen Zahl 1000. So hätte die Farbe Grün 00FF00 den Dezimalwert 65280 und die Farbe Rot FF0000 den Wert 16.711.680. Die Farbe Gelb FFFF00 könnt ihr ja nun selber ausrechnen, indem Ihr Rot und Grün addiert und Blau 0000FF ist sowieso klar, das ist natürlich 255.

Nun mal ein Rechenbeispiel. Die Farbe Grün=30 / Rot=0 / Blau=0 (001E00) möchte ich als Dezimalzahl haben. Grün liegt in der Mitte. Bei meinem ersten Beispiel musste ich die Zahl mit 1000 multiplizieren, hier muss ich die Zahl mit 256 multiplizieren. 30 x 256 = 7680. Das ist der Hexwert 1E00 und der Wert 30 ist der hexWert 1E. Man sieht es funktioniert.

Die erste fünfstellige Zahl in Hex (FFFF+1=10000) ist in Dez 65536. Also müssen wir, um den Rotwert zu erhalten, ihn mit dieser Zahl multiplizieren. In Dez ist 30 x 65536 = 1966080 das ist in Hex 1E0000.

Ich hoffe das ist einigermaßen anschaulich erklärt.

Die Farbe Rot im Arbeitsspeicher der Grafikkarte

Wie kann man mit diesen Hexwerten rechnen?

Im Dezimalsystem habe ich 10 Zeichen von 0 bis 9. Im Dezimalsystem mulitpliziere ich mit 10, um die Zahl zu erhalten, die eine Stelle mehr hat. 1x10=10, 10x10=100 etc.

Im Hexsystem habe ich 16 Zeichen, von 0-F. Da mulitipliziere ich mit 16 um die Zahl zu erhalten die eine Stelle mehr hat. Allerdings müsste es korrekterweise heißen ich mulitpliziere mit der 10 des Hexsystems, welche der 16 im Dezimalsystems entspricht. Dann erhalte ich folgende Zahlen.

Die Grafikkarte zerlegt die ersten 24 Bit einer Speicherstelle in drei 8ter Gruppen (=Bytes). Das minderwertige Byte für Blau etc.
Das ist unübersichtilich. Man unterteilt für die menschliche Lesbarkeit nochmal jede Farbe in 4er Gruppen und schreibt diese als Hexwerte.

Dezimalwert in Hex mit folgender Funktion

meineZahl.toString(16)

Bitweiser Operator

Für diese Verschiebungen gibt es in Actionscript und vielen anderen Programmiersprachen Operatoren.

9 * 256 entspricht 9 << 8 Verschiebung um 8 Stellen in Bit und um 2 Stellen in Hex
in Hex entspricht das obige Beispiel 900. Im Dezimalsystem ist es 2304. Eine eher nichtssagende Zahl.
Es gibt auch einen Operator um nach rechts zu verschieben.
2304 >> 8 entspricht somit der Zahl 9 in Hex und Dezimalsystem. Es enstpricht 2304 / 256

x << 16 verschiebt 4 Stellen in Hex nach links und 16 Stellen in Bit. Es entspricht einer Multiplikation mit 65536 (siehe oben).

Mit dieser Verschiebung ist es möglich einen Farbwert folgendermaßen zu definieren.
Es entspricht dem Hex-Wert FFFF00

var color:uint = 255 << 16 | 255 << 8 | 0;

Die Schreibweise entspricht

var color:uint = (255 << 16) + (255 << 8) + 0;

Mit diesen Verschiebungen kann man aus einem Farbwert die Farben R, G und B folgendermaßen berechnen.

var col:uint = 0x99CC00;
trace(col); //10079232
trace(col.toString(16)); //99CC00
var rot:uint = col >> 16;
trace(rot.toString(16));//99
var gruen:uint = (col >> 8) - (rot << 8);
trace(gruen.toString(16));//cc
var blau:uint = col - (rot << 16) - (gruen << 8);
trace(blau.toString(16));//0

Erklärung:

Die Farbe rot lässt sich sehr einfach freistellen, indem man sie Bitweise um 16 Stellen nach rechts verschiebt, was im Hex System einer Verschiebung von 4 Stellen entspricht.

Die Farbe grün benötigt 2 Rechenschritte. Eine Verschiebung nach rechts um 2 Stellen im Hex-System. Dann erhält man in diesem Beispiel die Hex Zahl 99CC. Davon muss man nun die Hexzahl 9900 abziehen. Diese Zahl erhält man, indem man den zuvor erzeugten Rot-Wert um 2 Stellen (Hex) nach Links verschiebt. rot << 8 macht aus der Hex-Zahl 99 die Hex-Zahl 9900.

Die Zahl blau wird auf ähnliche Weise erzeugt. Man verschiebt die zuvor erzeugten Farben rot und gruen nach links auf die entsprechende Stelle und zieht beide Werte von der Gesamtfarbe ab.

Möglich ist auch diese einfachere Schreibweise:

var col:uint = 0x99CC00;
var newR: Number = ((col >> 16) & 0xFF);
var newG: Number = ((col >> 8) & 0xFF);
var newB: Number = (col & 0xFF);

Startseite: www.pastorpixel.de