HowTo: Farbverläufe in C#

Aufgrund meines Ferialjobs im Forschungszentrum Gumpenstein habe ich viel mit Programmier-Zeichnerei etc. zu tun. Letztens hatte ich die Aufgabe eine Color-Ramp (Farbverlauf) in eines meiner Programme einzubauen und da ich natürlich anfangs keine Ahnung von dem Ganzen hatte begann ich hilflos loszugoogeln. Aber Google lieferte mir keine für mich einfachen Algorithmen… Deshalb begann ich nach dem Prinzip der Wunderharke 5000 zu denken:  Gibt es denn keine bessere Lösung? … DOCH! Die gibt es! Auf einmal kam mir ein Geistesblitz und ich kam drauf, dass so etwas eigentlich überhaupt nicht schwer, eigentlich sogar ziemlich einfach ist. Deswegen will ich euch Kopfzerbrechen sparen und euch „mein“ Prinzip erklären:

Eine Farbe besteht immer aus 3 Werten (R,G,B). Und um einen Verlauf von einer Farbe zur Anderen zu machen muss man von Zwischenfarbe zu Zwischenfarbe jeden Teilfarbe um einen gewissen Wert ändern. Um es noch einfacher zu erklären hier ein…


Beispiel:

Wir haben 2 Farben: Die Erste ist Blau (R: 15, G: 58, B: 250) und die Zweite  Braun (84, 14, 15). Es soll ein Verlauf mit 10 Farben erstellt werden.

Jetzt rechnet man DeltaR aus: dR = (Braun.R – Blau.R)/Anzahl Zwischenfarben = (84 – 15)/10 = 6,9

Das selbe nun mit den anderen Werten:

dG = (Braun.G – Blau.R) / Anzahl ZF = (14 – 58)/10 = -4,4

dB = (Braun.B – Blau.B) / Anzahl ZF = (15 – 250)/10 = -23,5


Nun kann man die Zwischenfarben berechnen:

Ausgangsfarbe: Blau (R: 15; G: 58; B: 250)

1. Farbe: R: Blau.R + dR = 15 + 6,9 = 21,9; G: Blau.G + dG = 58 + (-4,4) = 53,6; B: Blau.B + dB = 250 + (-23,5) = 226,5.  —> R: 21,9; G: 53,6; B: 226,5

2. Farbe: R: 21,9 + 6,9 = 28,8; G: 53,6 + (-4,4) = 49,2; B: 226,5 + (-23,5) = 203. —> R: 28,8; G: 49,2; B: 203

3. Farbe: R: 28,8 + 6,9 = 35,7; G: 49,2 + (-4,4) = 44,8; B: 203 + (-23,5) = 179,5;  —> R: 35,7; G: 44,8; B: 179,5

10. Farbe: R: 77,1; G: 18,4; B: 38,5

Endfarbe: Braun (R: 84; G: 14; B: 15)

Ich hoffe das Beispiel ist verständlich erklärt. Um die Farben wirklich zu verwenden muss man diese natürlich noch in ganze Zahlen (Integer) umwandeln.

Nun zur Umsetzung in C#:

public static Color[] generateRampFrom2Colors(Color c1, Color c2, int anz)
{
Color[] cols = new Color[anz];
float r = c1.R;
float g = c1.G;
float b = c1.B;
float cR = (r - c2.R) / anz;
float cG = (g - c2.G) / anz;
float cB = (b - c2.B) / anz;
for (int i = 0; i < anz; i++)
{
      cols[i] = Color.FromArgb((int)r,(int)g,(int)b);
      r -= cR;
      g -= cG;
      b -= cB;
}
return cols;
}

Ganz einfach, oder?

Viel Spaß damit 🙂


© 2009-2020 Die Rot-Weiß-Rote Brille Impressum