Des Rätsels Lösung: Blend Modes funktionieren, aber nicht so wie man denkt.

[Camping_RIDER]

Aloha ;)

Hmja. Ich habe mir nochmal Gedanken gemacht. Es gibt mehrere Probleme. Und ich sag jetzt besser nicht wie lange ich für die Recherche gebraucht habe.

---

Ich fang mal mit dem unwichtigsten an:

Links ein Farbkreis mit grauem Zentrum

Das ist streng genommen Quatsch. Was soll das graue Zentrum dort? Ich hab mittlerweile den verlinkten Thread auch angelesen und verstehe, dass da die „lightness“-Stange durch soll in der Visualisierung, aber das ist eigentlich ziemlich egal. Man müsste das, was du suchst, auch ohne diesen fixierten grauen Kreis hinbekommen, denn innendrin müssts ja grau sein wegen konstant geringem „saturation“-Wert und das liefert ja die Maske, also muss dein Problem auch ohne den Kreis in der Mitte im Source-Bild lösbar sein.

---

Dann das andere, was ich hier schon angeschnitten habe. Eigentlich dürfte laut der Beschreibung in der MDN (und übrigens auch laut der Beschreibung in der Spec!) eine Veränderung des lightness-Wert in der Maske genau so keine Rolle spielen wie es eine Veränderung des hue-Wert tatsächlich auch nicht tut.

Die Spec schreibt:

Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.

Und da stolpere ich über den Begriff „luminosity“. „Luminosity“? Ist das synonym zu lightness, oder eben genau nicht? Ich weiß es nicht, ich kenne mich ehrlich nicht gut genug aus, aber mir schwant da übles. Oder, wie es die englische Wikipedia schreibt:

While the definition of hue is relatively uncontroversial – it roughly satisfies the criterion that colors of the same perceived hue should have the same numerical hue – the definition of a lightness or value dimension is less obvious: there are several possibilities depending on the purpose and goals of the representation.

Und zack - damit wäre mein Missverständnis gelöst. Das L in HSL ist, da bin ich mir mittlerweile zu 90% sicher, nicht das L, das die Spec mit Luminosity meint.

Ich argwöhne mittlerweile ziemlich sicher, dass der Saturation Blendmode durchaus das tut was er soll, dass die Maske dafür aber eben nicht im hsl-Modell zu denken ist.

Und nachdem ich jetzt wusste was vermutlich das Problem ist, habe ich dann auch einen Stackoverflow-Thread gefunden, der mich darin bestätigt.

Money Quote:

The name of the function and it's usage might have you assume that they're referring to the Luminance that is sometimes ascribed to the L in HSL, or the B or V in HSB/HSV. They're not. This function is used to determine the relative brightness of a color to the human eye. It comes from the YIQ colorspace

Brainfuck.

Also: die color-blend-modes sind effektiv für den Popo (zumindest meiner Schlussfolgerung nach. Nicht, weil sie nicht funktionieren, sondern weil sie so funktionieren wie sie funktionieren sollen und weil das wie sie funktionieren sollen überhaupt nicht mit allem anderem zusammenpasst was im Web so passiert.

Irgendwo auf dem Weg in meiner Recherche habe ich gelesen (zumindest meine ich das gelesen zu haben, finden tu ich es aktuell nicht), dass Adobe in die Entwicklung der Blend-Modes für die CSS-Spec involviert war.

Sicher eine gute Idee, wenn man sich mal klar macht, dass Adobe z.B. in Photoshop HSV verwendet während man sich in CSS für HSL entschieden hat.

Ich kann nur vermuten, dass dieser Irrsinn daher kommt, dass Adobes Photoshop so weit verbreitet ist und man nun wollte, dass die CSS Blend Modes genauso funktionieren wie Blend Modes in Photoshop. Man hat also die Photoshop-User priorisiert gegenüber Webentwicklern, die jetzt irgendwie mit dem Scherbenhaufen umgehen müssen, statt direkt ein blendmode-System zu entwickeln, das im HSL-Farbraum arbeitet und den Webentwicklern entgegenkommen würde.

---

Zusammenfassung: Blend-Mode Saturation funktioniert „as intended“, ist aber völlig ungeeignet um damit HSL-Farben zu manipulieren.

Für den Zusammenbau für deine Zwecke sollte das, was ich oben gepostet habe aber trotzdem funktionieren. Die Überlagerung mit einem teiltransparenten Radialgradienten erzeugt ja letztlich genau das was du für die Visualisierung brauchst - oder übersehe ich da was? Für höhere l-Werte musst du wahrscheinlich ein Grau mit höherem l-Wert nehmen, damit das alles noch zusammenpasst, aber das sollte ja machbar sein.

Wo genau und wie genau schreiben wir jetzt ins Wiki, dass die blend-modes hue/saturation/color/luminosity nicht das tun, was sie auf den ersten Blick versprechen? (Die Popo-Formulierung war vielleicht etwas harsch...)

Grüße,

RIDER