Formel, mit der eine Farbe heller oder dunkler gemacht werden kann

[colaka]

Hallo,

ich habe ein kleines, mathematisches Problem. Ich möchte ein Programm schreiben, mit dem ich eine Ausgangsfarbe beliebig heller oder dunkler machen kann. Um das Problem anschaulich zu machen, beschreibe ich am besten, wie ich das bisher ohne Programm gelöst habe. Ich habe mir mit Photoshop und dem Verlaufswerkzeug einen Farbbalken mit einer Breite von 1000 Pixeln hergestellt, der an der linken Seite schwarz und an der rechten Seite weiß war. In der Mitte befand sich die Ausgangsfarbe.
Im Bild ist so ein Farbbalken mit der Ausgangsfarbe Gold zu sehen. Damit konnte ich von links nach rechts mit der Pipette jeden beliebig hellen oder dunklen Farbwert von der Farbe „Gold“ abgreifen. Wenn ich eine andere Farbe als Gold heller oder dunkler machen will, muss ich mir wieder einen neuen Farbbalken erzeugen. Da ich viele Homepages für Kunden erstellen muss, brauche ich das ziemlich oft und deshalb möchte ich mir dafür jetzt ein kleines Programm schreiben. Ich bräuchte also eine Formel, die mir auf der Basis der Ausgangsfarbe, die sich in meinem Farbbalken an der Stelle 500 befindet, jeden beliebigen anderen Wert an der Stelle X ( 0 < X < 1000) berechnet. Ich hatte eigentlich nicht erwartet, dass das besonders schwierig wäre, aber jetzt sitze ich schon seit 2 Tagen an diesem Problem und muss so langsam feststellen, dass meine mathematischen Fähigkeiten dafür wohl nicht ausreichen.

Vielleicht gibt es hier intelligentere Leute.

[hroptatyr]

Hallo,
ohne jetzt viel Mathematik hier aufschreiben zu wollen, es ist eigentlich ganz einfach. Zumindest, wenn man einfache Modelle (wie den HSV Zylinder) nimmt.

Siehe „Umrechnung HSV in RGB“. in https://de.wikipedia.org/wiki/HSV-Farbraum
(Saturation (S) sollte Deinem Besipiel nach immer 1 sein).

[colaka]

Vielen Dank für Deine schnelle Antwort. Der von Dir genannte HSV-Zylinder beschreibt genau mein Problem. Trotzdem bringt mich das nicht recht weiter. In meinem genannten Beispiel habe ich als Ausgangsfarbe EEA316 gewählt. In meinem Farbbalken ist das der Farbwert an der Stelle 500. Mit welcher Formel kann ich denn den Farbwert beispielsweise an der Stelle 200 oder 900 berechnen. Für Dich mag das vielleicht einfach sein, aber für mich nicht.

[hroptatyr]

Ah, ich sehe, also ich mach’s mal am Beispiel vor:

RGB(ee,a3,16) nach HSV:
MAX := max(ee, a3, 16) = ee (R)
MIN := min(ee, a3, 16) = 16 (B)
H := 60 * (0 + (a3 - 16) / (ee - 16)) = 60 * 141/222 (<- dezimal) = 38
S := (MAX - MIN) / MAX = 222 / 238 ~ 93.2%
V := MAX = 238 (/ 255) ~ 93.3%

So, die Werte H und S bleiben unveraendert, es soll ja nur die Helligkeit (V) geaendert werden.
Die 93.3% Helligkeit, die der Ton schon hat, soll jetzt Deine neue 500 sein.

Wenn man das schoen machen moechte, wird es nicht-linear. Ich geh jetzt aber mal davon aus, dass sowohl die linke Haelfte (bis schwarz) als auch die rechte Haelfte (bis weiss) linear sein sollen. Also der Punkt 200 waere dann (nach Dreisatz) 0.4 von 93.3% (also run 37.3%), der Punkt 900 waeren 400 Punkte mehr als 500, also 0.8 von der Differenz von 100% bis 93.3%, also 0.8 * 6.7% ~ 5.3% und somit 98.8%.

Nun rechnen wir wieder ins RGB zurueck:

HSV(38, 93.2%, 37.3%) nach RGB:
RGB = (V, t, p) (wegen hi = floor(H / 60) = 0), f = 0.633
R = 37.3% (von 255) = 95 = 5f (hex)
t := V * (1 - S * (1 - f)) = 37.3% * (1 - 93.2% * (1 - 0.633)) ~ 24.5%
G = 24.5% (von 255) = 63 = 3f (hex)
p := V * (1 - S) = 37.3% * (1 - 93.2%) ~ 2.54%
B = 2.54% (von 255) = 6 = 6 (hex)

Neue Farbe fuer die Stelle 200 ist also 5f3f06
Auf gleiche Weise, neue Farbe fuer die Stelle 900 ist fca611.

Naja, das sollte man natuerlich in ein Programm fassen, damit man nicht wahnsinnig wird beim Rechnen in sovielen Systemen und fuer die Genauigkeit ist es auch gut.

[colaka]

Vielen Dank für Deine viele Mühe.

Jetzt wundere ich mich nicht mehr, dass ich mich seit drei Tagen im Kreis drehe. Als ich mit dem Programm anfing, dachte ich eigentlich, da bastel ich mir eine Formel so ungefähr: BlauNeu := BlauAusgangsfarbe * irgendwas / irgendwas. Und das dann auch noch mit Grün und Rot. Aber jetzt sehe ich, dass das viel komplizierter ist.

Aber ich bin schon dabei, das Ganze umzusetzen. Da ich auch noch Programmieranfänger bin, wird das wohl noch eine Weile dauern. Aber ich denke schon, dass ich das hinbekomme.

Vielen, vielen Dank

[colaka]

Ich bin jetzt an dem Punkt, an dem die Prozentzahl berechnet wird, und möchte dabei am liebsten die linke und die rechte Hälfte nicht getrennt behandeln. Gibt es eine Formel, mit der ich diese Prozentzahl einheitlich berechnen kann, unabhängig davon, ob sie kleiner oder größer als 500 ist?

[hroptatyr]

Ja, klar das geht, ist aber wie gesagt nicht einfacher. Das Grundproblem, wir haben 3 Punkte und wir wollen eine Kurve durch diese drei Punkte legen, die einigermassen glatte Farbuebergaenge herstellt.

Nach linear kommt erstmal quadratisch, also koennte man eine Parabel durch die drei Punkte legen:

ax^2 + bx + c = y
0^2 * a + 0 * b + c = 0           Punkt (0, 0%)
500^2 * a + 500 * b + c = 0.933   Punkt (500, 93.3%, 500)
1000^2 * a + 1000 * b + c = 1    Punkt (1000, 100%)

Da haben wir also ein lineares Gleichungssystem mit 3 Variablen und 3 Gleichungen, sollte also loesbar sein. Eigentlich ergibt sich wegen des Punktes (0%, 0) immer, dass c = 0, also sind es nur noch 2 Gleichungen und 2 Unbekannte.

Nun ja, jetzt weiss ich nicht, ob es fuer Dich selbstverstaendlich ist, aber in Matrixschreibweise steht da: Ax = y und wir muessen umstellen zu x = A^-1 y

Also

 250000   500      __>     -0.000004  0.000002
1000000  1000        >      0.004    -0.001

Und nun mit y = (0.933 1.000) multiplizieren:

-0.000004 * 0.933 + 0.000002 * 1.000 = a = -1.732e-06
0.004 * 0.933 + -0.001 * 1.000 = b = 2.732e-03

Das Polynom ist also -1.732e-06*x^2 + 2.732e-03*x. Leider musst Du dieses Polynom jedes Mal aufs Neue ausrechnen, weil die Grenze (93.3%) ja immer wieder woanders liegt. Aber wenigstens bleibt die inverse Matrix immer die gleiche.

Es gibt noch glattere Kurven, die man da durchlegen kann, z.B. eine Gompertz-Kurve, oder die Softplus-Kurve oder deren Ableitung, die logistische Kurve.

Das Prinzip waere hier das gleiche, Gleichungssystem aufstellen und loesen. Die meisten glatteren Kurven haben jedoch mehr Parameter, als Du Punkte hast, also muesste man sich da noch ueber Zusatzeigenschaften unterhalten.