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

Beitrag lesen

Aloha ;)

Ich schrub am 21.12.:

Ich denke aber trotzdem, dass die Scheibe nicht zwei Parameter visualisieren sollte. Sie ist für den hueda - für die Sättigung sollte man meiner Meinung nach eine weitere Achse oder eben eine „Lupe“ haben.

Das würde ich gerne am Stammtisch am 03.01. (morgen) mit allen Interessierten besprechen.

Das sehe ich allerdings schon so wie Rolf - Ich denke, dass die Scheibe mit zwei Parametern einen Sinn hat. Die Idee mit der weiteren Achse bzw. der Lupe kann ich mir jetzt nicht so richtig vorstellen. Ich denke im interaktiven Beispiel fehlt eigentlich nur ein Punkt innerhalb der markierten Halbgerade auf der Scheibe, der mit Saturation nach innen oder außen wandert.

@Edit: Keine Ahnung ob das schon jemand vorgeschlagen hat, aber so wie der Saturation-Schieberegler eine Vorschau mit den aktuellen hue/lightness-Werten zeigt, sollte auch der hue-Schieber eine Vorschau mit dem aktuellen Saturation/Lightness zeigen, und entsprechend der Lightness-Schieber auch... Dann hat man nämlich zwei vollständige Visualisierungen in einem - die Schieber und die grafische Darstellung, und kann genau nachvollziehen wie das eine das andere verändert...

Wenn die Scheibe nur noch einen Parameter zeigen soll, dann hat sie als Scheibe keine richtige Berechtigung. Eine Scheibe ist ja ein zweidimensionales Objekt, hat also zwei Achsen, warum soll sie dann keine zwei Parameter visualisieren? Außerdem geht die Darstellung durchaus Hand in Hand mit anderen populären Visualisierungen, z.B. hier.

Was ich mir da alternativ noch vorstellen könnte ist, statt der Scheibe einen dünnen Ring zu zeigen, der je nach Saturation einen größeren oder kleineren Durchmesser hat. Das ist aber nichts anderes als die zweidimensionale Scheibe mit zwei Parametern, nur, dass man sie nicht mehr komplett sondern nur noch ausschnittsweise sieht.

Ich bin leider morgen bereits anderweitig terminlich gebunden (zusammen mit @Felix Riesterer in Aventurien), so dass ich zum Stammtisch nicht da sein kann um das live zu diskutieren.

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...)

Das ist auch unsere Frage. hwb() ist bis jetzt noch nirgendwo erwähnt.

Es ist ja noch schlimmer: Die blend-modes sind ja weder hsl noch hwb, zumindest wenn ich die Berechnungen richtig verstanden habe... hwb ist zwar intuitiver als hsl, aber die luminosity aus den blend-modes ist weder das white noch das black aus hwb, und auch nicht das s und l aus hsl. Das ist ja der Murks. Die Blend-Modes funktionieren wie in Photoshop, aber nicht wie sonst was.

Da müssen wir einen Konsens finden.

Ja.

Der Vollständigkeit halber wohl am Besten in einer Unterseite von CSS/Funktionen/hwb(), Farbe/Farbmodelle sollte wohl eher nur die gängigen Farbmodelle und Noierungen beschreiben; rgb(), HEX und hsl(), sowie dann oklch().

Hm. Wenn man aus der Bildbearbeitung kommt oder mit GIMP aufgewachsen ist, dann ist hwb intuitiver und viel bekannter als hsl. Insofern wird das wohl noch zu besprechen sein, welches denn die gängigen Farbmodelle sind (das bemisst sich ja nicht nur daran, was häufig verwendet wird, sondern auch daran, wie eingängig die Notation ist). Ich könnte mir vorstellen, dass Leser sich freuen, wenn sie direkt auf der Übersichtsseite erfahren, dass es das, was sie aus ihrem Grafikbearbeitungs-Colorpicker kennen, auch auf CSS-Ebene gibt…

Und: die blend-modes passen da in keine Kategorie - leider. Ich denke diesbezüglich wird man auf jeden Fall hier auf die missverständlichen Bezeichnungen "Sättigung"/"Helligkeit" hinweisen müssen, um zu vermeiden, dass anderen die selbe Verwechslung passiert wie hier Rolf (und mir anfangs natürlich auch).

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
# Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[