berechnete Farbe bei Transparenz

[Gunnar Bittersmann]

Wenn man ein teiltransparentes Ding der Farbe (r₁, g₁, b₁) mit der Opazität a₁ (im Bereich 0 ≤ a₁ ≤ 1) vor einem Hintergrund der Farbe (r₀, g₀, b₀) hat, was ist dann die berechnete Farbe der Pixel dieses Dingens?

Die Interpolation im RGB-Modell $$\begin{pmatrix} r \ g \b \end{pmatrix} = a_1 \begin{pmatrix} r_1 \ g_1 \b_1 \end{pmatrix} + \left( 1 - a_1 \right) \begin{pmatrix} r_0 \ g_0 \b_0 \end{pmatrix}$$ ist es nicht.

Wikipedia meint: „Das RGB-Modell ist hier ungeeignet und es wird regelmäßig zur HSB-Darstellung gewechselt; die Sättigung S (Saturation) wie auch die Helligkeit B (Brightness) korrelieren dabei mit dem Opazitätswert.“ Und was ist mit dem Farbwert?

Wie berechnet sich (h, s, b) aus (h₁, s₁, b₁, a₁) und (h₀, s₀, b₀)?

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

ich habe keine Ahnung. Aber neugierig bin ich, warum Du das fragst. Möchtest Du aus Performance-Gründen diese Berechnung an anderer Stelle machen, um keine echte Opazität einsetzen zu müssen?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Aber neugierig bin ich, warum Du das fragst. Möchtest Du aus Performance-Gründen diese Berechnung an anderer Stelle machen, um keine echte Opazität einsetzen zu müssen?

Nein, die Optimierung ist anderer Art.

Deshalb muss auch derselbe Wert (oder so dicht dran, dass es noch als 100%ige Übereinstimmung durchgeht) rauskommen wie im Browser. Und bei Target #7 ergibt #7FD2 auf #0B2429 ziemlich genau das geforderte #1A4341, ist aber 2 Zeichen kürzer.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

hier Alpha Blending wird eine rgb-Formel angegeben.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

hier Alpha Blending wird eine rgb-Formel angegeben.

Genau das, worüber ich schon schrieb, dass das so mit RGB nicht geht. Es kommt nicht derselbe Farbwert raus wie im Browser.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

hier Alpha Blending wird eine rgb-Formel angegeben.

Genau das, worüber ich schon schrieb, dass das so mit RGB nicht geht. Es kommt nicht derselbe Farbwert raus wie im Browser.

auch bei dieser erweiterten Formel

https://wikimedia.org/api/rest_v1/media/math/render/svg/31c782ec074491a9cfadc73cfcbe68a7659207cb

wegen einer geringen Teiltransparenz?

Steckt die Abweichung denn im Farbwert oder in der Transparenz?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

auch bei dieser erweiterten Formel

AFAIS besteht die Erweiterung darin, dass auch der Hintergrund eine von 1 verschiedene Opazität haben kann. Ansonsten liegt weiterhin das RGB-Modell zugrunde.

Steckt die Abweichung denn im Farbwert

Sah für mich so aus. Bei den genannten Werten (genauer: den inzwischen berichtigten) #7FD2 auf #0B2429 liefert die Formel #194141. Firefox rendert in der Farbe #1a4142, was sich mit der Pipette im Entwicklertool ja leicht feststellen lässt.

Chrome ist da nicht so komfortabel. Wie kriege ich die in Chrome gerenderte Farbe raus? Screenshot in Photoshop öffnen fragt nach Farbprofil. Was müsste ich da tun, um keine noch so geringe Verfälschung zu bekommen?

In Firefox ein <input type="color"> gerendert, mit dessen Pipette man auch an andere Fenster kommt, ergibt in Chrome #184040 auf der CSSBattle-Seite; aber #194040 auf CodePen. WTF? Unnötig zu erwähnen, dass weder der eine noch der andere Wert anstatt #1A4341 bei CSSBattle eine annähernde Übereinstimmung ergibt …

Vielleicht sollte ich doch mal die Berechung im RGB-Modell probieren und schauen, ob ich für irgendeine Farbkombination was Annäherndes hinbekomme. Sind ja für eine Hintergrundfarbe nur 16⁴ Vordergrundfarben (sollen ja nur 4 Hexadezimalstellen sein); mit Abzug der Werte mit voller Opazität und voller Transparenz 16³ · 14 = 57344.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

kann es sein, das die Abweichung bei der Umrechnung von #RGBA nach #RRGGBBAA kommt?

Allerdings sollte eine +-1-Abweichung durch Probieren zu eliminieren sein. Da sollten deutlich weniger als 256^4 Versuche nötig sein 😀

Gruß
Jürgen