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

[Matthias Scharwies]

Guten Morgen,

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

Ja, so war's im Farbwähler und so kommt's auch wieder hin. Evtl. nur mit accent-color im Schieberegler selbst.

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.

Dort hast du die drei Achsen visualisiert und in der jetzigen Scheibe nicht.

Welcher Punkt ist ausgewählt? (Das hast Du im nächsten Post ja festgestellt.) Beim Farbwähler sind die drei Achsen die Vorschau und das Viereck das Ergebnis; Stand jetzt dreht sich etwas und man sieht aber nicht, was das Farbergebnis der drei Parameter ist.

Nächstes Problem: hsl() hat Probleme mit der Mischung von Farben - viele wirken sehr dunkel. Deshalb hat das HSL-SVG ja auch einen Ring und keinen Kreis.

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.

Wäre besser.

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.

Schade!

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

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 Notierungen 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…

Ich hab's mal eingefügt: HSV, HSB bzw hwb()/wiki/Farbe/Farbmodelle#HSV.2C_HSB_bzw_hwb.28.29

Diese Grafik mach ich bis Ende der Woche fertig:

Problem ist hier wieder die Quadratur des Kreises:

• Anfänger sollen einen schnellen Überblick (zuerst RGB, hsl() ) erhalten;
• Fortgeschrittene sollen die neuen Möglichkeiten (bes. oklch() ) kennenlernen.

Der Artikel wird jetzt ziemlich lang und unübersichtlich. Wo sollte unser Fazit stehen? - Am Schluss, zu dem sich die Fleißigsten durchgekämpft haben oder doch eher jeweils nach RGB, hsl() und dann bei oklch()?

Mein Eindruck aus mittlerweile 5 Wochen Recherche: oklch() ist das kommende Ding bei den Blog-Autoren, der Rest wird beiläufig erwähnt.

Letztendlich kann man so ein Farbmodell nur über die entsprechenden Beispiele pushen. Sobald der Firefox die relative Syntax kann, sollte man über die Seiten zu linear-gradient() etc rüber.

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

Machst du's?

Herzliche Grüße

Matthias Scharwies