Matthias Scharwies: Self-Wiki: Farbe

problematische Seite

Guten Morgen!

grad auf Mastodon gefunden:

So color spaces are really starting to piss me off. Anyone have a favored tutorial / explainer about what they are, how they work, and how to use them to e.g. post photos online?

Some bullshit about color spaces from deep in the bowels of Lightroom's export menu system.

Die Kommentare, die für Fotos weiterhin RGB empfehlen, überwogen.[1]


Wir hatten ja auch angefangen, den Bereich Farbe zu überarbeiten.

Durch das CSS Color Module level 4 (Level 6 ist schon in der Pipeline) ergeben sich da viele Neuerungen.

Wie können wir hier Anfänger zu einem Einstiegs-Tutorial mit den Basics leiten, Profis aber auf der Übersichtseite mittels eines Aha-Effekts hin zum Color Module Level 4 verlocken?

@JürgenB fragte mehrfach, wie Anfänger denn anfangen sollten.

Farbe/Farbangaben

Das wird hier imho ganz gut erklärt, das Beispiel ist evtl. etwas zu einfach. Was meint ihr?

Die bisher gezeigte Tabelle zu den 216 websicheren Farben für GIF ist rausgeflogen, zu Recht?

Die ca. 150 Farbnamen sind für ein Farbkonzept problematisch,

Deshalb ist darkgray (aus X11) heller als gray (aus den VGA-Farben).

→ Also stellen wir im nächsten Kapitel 16.7 Mio Farben vor:

Farbe/Farbmodelle

RGB-Modell (Rot/Grün/Blau-Mischung)

RGB-Raum, der erst am Ende als sRBG weiter spezifiziert wird.

  • seit Februar '22 haben wir die Leerzeichen-separierten Werte im ganzen Wiki
  • damals fiel rgba() heraus, mittlerweile sind Transparenzen wieder ein ganzer Absatz.
  • Neu: Es gibt jetzt interaktive Visualisierungen, die als Beispiel angelegt sind. Langfristig soll hier die Vorschau-Ansicht der Beispiel-Vorlage aktiviert werden, damit diese Farbmischer gleich zu sehen sind.
  • Benötigt man bei den Hex-Werten eine Erklärung des Begriffs? Die deutsche Wikiseite ist eher schwierig, die englische besser. Eine Umrechnungstabelle würde eher ins Glossar passen. Was meint ihr?

@Rolf B hatte eine zündende Idee,hsl() interaktiv zu visualisieren, das kommt demnächst!

CIE-LAB_Farbmodelle

Das war uns allen neu, und ist erst mal nur der Vollständikeit halber erwähnt.

  • welche Farbräume müssten jetzt kommen? Als nächster Abschnitt oder in einem neuen Kapitel?

Ich persönlich würde hier noch lab(), lch() aber auch oklab() und oklch() besprechen.

Hier sind wir uns überhaupt nicht klar, ob man die Erklärung zu OKLAB-Farbraum gleich zum CIE-LAB schieben soll und ob man dort Beispiele oder eher Infografiken benötigt.

Farbinterpolation

Das Kapitel der Farbinterpolation beschreibt dann für Fortgeschrittene die Mischung bei Verläufen, Filtern und color-mix().

Große Frage für mich:

Wann ...

  • ein Frickl-Beispiel, auf das extra geklickt werden muss?
  • ein inline-div, das evtl. in älteren Browser nicht angezeigt wird?
  • eine (SVG)-Grafik, die im Text steht, aber wsl. nur aus RGB-Farben besteht.

Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!

Herzliche Grüße

Matthias Scharwies

--
Die Signatur findet sich auf der Rückseite des Beitrags.

  1. advice my photography professor gave me: color spaces are like the box of crayons you have to work with when you make an image. some boxes will have more kinds of crayons than others, but generally you can get away with using the basic box of crayons (sRGB). the bigger boxes of crayons are usually made for specific purposes/to be used with specific devices. most screens and monitors really work best with sRGB anyways, so even if you put up an image you made with the bigger box of crayons, those other screens won't be able to replicate it with their own crayons. basically: use sRGB unless something or someone is specifically asking you to use something else. ↩︎

  1. problematische Seite

    Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!

    Durchaus ein wenig… M.E. ist das Thema im Web oft und gerne überbewertet. Letztlich weiß man eh nicht, auf welchem Screen / Browser / System welche Farbwerte wie genau wiedergeben werden. Es ist und bleibt im Web ein Bildschirm. Da ist der Ansatz "RGB" m.E. absolut stimmig. So funktionieren meines Wissens zumindest lichtbasierte Darstellungen.

    Ob sich da jetzt jemand mit HSL, LAB oder was auch immer wohler fühlt und das Ergebnis dann im RGB-Raum sitzt: Geschmackssache. Jetzt kann man z.B. auch über CMYK nachdenken, weil man einen tollen Ausdruck haben möchte. Liefern die üblichen Tintenpisser / Laserdrucker aber eh nicht: vergebene Zeit für nichts.

    Wichtiger sind m.E. ausreichende Kontraste, um eine Webseite bedienbar zu halten / machen.

    1. problematische Seite

      Servus!

      Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!

      Durchaus ein wenig… M.E. ist das Thema im Web oft und gerne überbewertet. Letztlich weiß man eh nicht, auf welchem Screen / Browser / System welche Farbwerte wie genau wiedergeben werden. Es ist und bleibt im Web ein Bildschirm. Da ist der Ansatz "RGB" m.E. absolut stimmig. So funktionieren meines Wissens zumindest lichtbasierte Darstellungen.

      Ja, sehe ich auch so!

      Wichtiger sind m.E. ausreichende Kontraste, um eine Webseite bedienbar zu halten / machen.

      Ja, siehe Farbe/Farben und Kontraste

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
    2. problematische Seite

      @@Mitleser 2.0

      Es ist und bleibt im Web ein Bildschirm. Da ist der Ansatz "RGB" m.E. absolut stimmig.

      Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB. Warum sollte man das nicht ausnutzen?

      🖖 Живіть довго і процвітайте

      --
      Ad astra per aspera
      1. problematische Seite

        Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB. Warum sollte man das nicht ausnutzen?

        Jeder kann, darf und soll sich da je nach Zielgruppe gerne austoben. M.E. nach steht im Regelfall doch schlicht da irgendein Bildschirm. Ob, und wie gut der nun kalibriert ist... Zweifel sind angebracht…

        Der Farbraum ist dabei auch nur eine Komponente. Wenn ein Foto gut ausgeleuchtet, nachbearbeitet und vernünftig gespeichert ist, dann kommt das auch gut. Auf einem ausgelutschtem Mobile Android von 2013 wie auch auf einem kalibrierten Druckerschirm.

        Ich bleib' dabei: Fokus auf Highend-Displays ist m.E. im Web überbewertet.

        Könnte mir vorstellen, dass ein perfekt aufgenommenes Bild, hochoptimiert auf Schirm/Farbraum X auf einem gewöhnlichen Endgerät sogar mies ausschaut. Mieser als ein gewöhnlicher Schnappschuss.

      2. problematische Seite

        Hallo

        Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB. Warum sollte man das nicht ausnutzen?

        wie muss ich mir das vorstellen?

        • Mehr als nur drei Farben (RGB) pro Pixel?
        • Andere Grundfarben?
        • Mehr als 8 bit pro Farbe?

        Gruß
        Jürgen

        1. problematische Seite

          Servus!

          Hallo

          Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB. Warum sollte man das nicht ausnutzen?

          wie muss ich mir das vorstellen?

          • Mehr als nur drei Farben (RGB) pro Pixel?
          • Andere Grundfarben?
          • Mehr als 8 bit pro Farbe?

          Ja, ich lese mich auch grad erst ein.

          z.,B. hier:

          Der EIZO EV3240X liefert eine außergewöhnlich präzise und nahtlose Wiedergabe von feinsten Grauverläufen. Es gibt keine Anzeichen von Farbverzerrungen oder Banding-Effekten. Dieses beeindruckende Ergebnis ist sicherlich auf die Verwendung einer 14-Bit-LUT (Look-up-Table) für die interne Verarbeitung zurückzuführen, die eine Darstellung von 1,06 Milliarden Farbabstufungen ermöglicht – im Gegensatz zu anderen Bildschirmen, die oft auf einer 8-Bit-Berechnung basieren und durch FRC (“Frame Rate Control”) verbessert werden.

          eine Seite weiter:

          Zur Farbraumabdeckung verspricht EIZO beim EV3240X 100 % sRGB. Die nachfolgenden Grafiken zeigen die Farbraumabdeckung im User1-Modus (6500 K) nach der Software-Kalibration. Es ist deutlich erkennbar, dass der sRGB-Farbraum zu 100 % abgedeckt wird. Allerdings geht der Farbumfang stark über den sRGB-Farbraum hinaus.

          Apple

          About Color space

          A more recent generation of displays—including 4K TVs and computer displays, Apple TV 4K, and newer Mac, iOS, and iPadOS devices—can render a much wider palette of colors. These wide-gamut color devices display more vivid and lifelike hues (in addition to all the hues that standard-gamut devices can display). Accordingly, the video industry has adopted a wide-gamut color standard called Rec. 2020.

          Farbe/Farbmodelle#CIELAB_Farbmodelle - hier die Dreiecke, die sRGB und Rec2020 zeigen.

          HDR displays typically process video at 10 or 12 bits per color component rather than 8 bits. The additional data lets HDR displays render more discrete steps from the minimum to maximum brightness value in each color, creating more realistic color transitions and revealing more detail in both shadows and highlights.

          Und so was können wohl alle neu(er)en Monitore und Handys.

          Über die Feiertage mach ich mich da mal schlau.

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
      3. problematische Seite

        Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB.

        Ist das tatsächlich so? Oder sind es überwiegend doch nur Werbeaussagen? Immerhin: Dünnfilm-Transistoren geben mit Mühe eine sicher Abstufung für die „guten alten >16 Millionen Farben“ her. Jedes weitere Bit im Farbkanal ist damit eine Opfergabe fürs Rauschen. Bleiben, wie mir es scheint, nur Monitore, deren einzelne tatsächliche Pixel über eine eigene Beleuchtung verfügen, die auch, jedes Pixel für sich, gesteuert werden kann.

        IMO: „wir basteln einen Hype“ ist ein mindestens(!) „seit Harry Potter“ gut erprobtes Geschäftsmodell: sehr viele Leute „sehen“, was ihnen dabei erzählt wird.

        Beispiel? Vor einigen Jahren gab es „Berichte“ darüber, daß „der Mac“ keine 10Bit/Kanal bedienen würde. Und „alle“ haben es genau gesehen. Vor allem bei Photoshop-Demonstrationen, die leidiglich belegt haben, daß da jemand Photoshop nicht durchgängig kannte. Dagegen stelle ich die gleichen Leute, die seltsamerweise heute nicht über unscharfe Darstellungen aller Web-Inhalte klagen.

  2. problematische Seite

    Hallo,

    ich habe mich mal etwas mit den Farbmodellen beschäftigt und einen Konverter gebastelt:

    http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_umrechnen.html

    Bisher habe ich zwei Probleme:

    • Der Konverter von Lab nach RGB erzeugt Werte kleiner 0 und größer 255. Daher habe ich da erst mal einen Begrenzer eingebaut.

    • Ich kann mit RGB Farben einstellen, die nach Lab falsch konvertiert werden. Stellt einfach mal RGB auf 0 0 beliebig.

    Für die Konvertierung müssen 3 Referenzwerte gewählt werden, die von der„ Umgebung“ abhängen, z.B. „D65/2° Daylight“. Ich vermute, dass die Browser hier irgendetwas anderes nehmen.

    Hat jemand eine Idee, wo ich die Referenzwerte der Browser finde?

    Gruß
    Jürgen

    1. problematische Seite

      Servus!

      Hallo,

      ich habe mich mal etwas mit den Farbmodellen beschäftigt und einen Konverter gebastelt:

      http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_umrechnen.html

      Bisher habe ich zwei Probleme:

      • Der Konverter von Lab nach RGB erzeugt Werte kleiner 0 und größer 255. Daher habe ich da erst mal einen Begrenzer eingebaut.

      Da gibt es wohl Look-Up-Tabellen, aber wo?

      • Ich kann mit RGB Farben einstellen, die nach Lab falsch konvertiert werden. Stellt einfach mal RGB auf 0 0 beliebig.

      Die Prozentwerte der hue beschreiben in den unterschiedlichen Farbräumen unterschiedliche Farben; siehe hier: Farbe/Farbmodelle#oklch()

      Für die Konvertierung müssen 3 Referenzwerte gewählt werden, die von der„ Umgebung“ abhängen, z.B. „D65/2° Daylight“. Ich vermute, dass die Browser hier irgendetwas anderes nehmen.

      Hat jemand eine Idee, wo ich die Referenzwerte der Browser finde?

      Das müssen wir irgendwann alles mal auf Discord diskutieren.

      Herzliche Grüße

      Matthias Scharwies

      PS: Wo würdet ihr die relative Color-Syntax erklären? Von der Komplexität her würde ich es gerne zur /Farbinterpolation packen.

      :root {
        --brand-color: hsl(300deg 75% 50%);
        --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
      }
      
      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
    2. problematische Seite

      Hallo,

      ich habe den Umrechner und einen Farbmodellvergleicher (erst mal) fertig.

      Auf lab/lch habe ich beim Vergleich verzichtet. Irgendwie habe ich es nicht geschafft, Lab nach RGB umzurechnen.

      Um die Modell zu vergleichen, habe ich in RGB, HSL, P3, oklab und oklch einen linearen Gradienten angelegt, dessen Start- und Endwerte über Schieberegler gewählt werden können.

      http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_umrechnen.html

      http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_vergleichen.html

      Gruß
      Jürgen

      1. problematische Seite

        Servus!

        ich habe den Umrechner und einen Farbmodellvergleicher (erst mal) fertig.

        Vielen Dank!

        Auf lab/lch habe ich beim Vergleich verzichtet. Irgendwie habe ich es nicht geschafft, Lab nach RGB umzurechnen.

        Meine noch nicht beantwortete Frage: Geht das überhaupt? Irgendwie hab' ich mehrmals von LookUp-Tables gelesen.

        Um die Modell zu vergleichen, habe ich in RGB, HSL, P3, oklab und oklch einen linearen Gradienten angelegt, dessen Start- und Endwerte über Schieberegler gewählt werden können.

        http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_umrechnen.html

        http://test.berkemeier.eu/selfwiki/Farben/Farbmodelle_vergleichen.html

        Der Vergleich würde gut zum Fazit passen!

        Herzliche Grüße, bis heute Abend um 20:15!

        Matthias Scharwies

        --
        Die Signatur findet sich auf der Rückseite des Beitrags.
      2. problematische Seite

        Hallo

        die Version fürs Wiki liegt jetzt hier:

        https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Oklch-2.html

        Wie kann ich denn im Wiki eine Beispiel so einbinden, dass es sofort in der Vorschau gezeigt wird. Oder kann man da einen Link setzen, der das Beispiel sofort als neue Seite oder im neuen Tab öffnet?

        Gruß
        Jürgen

        1. problematische Seite

          Servus!

          Hallo

          die Version fürs Wiki liegt jetzt hier:

          https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Oklch-2.html

          Vielen Dank!

          Es funktioniert wegen der (in ...)-Syntax noch nicht im FF121, aber das müssen wir wohl in Kauf nehmen.

          Wie kann ich denn im Wiki eine Beispiel so einbinden, dass es sofort in der Vorschau gezeigt wird.

          Das baut @Rolf B die Tage ein, im Test-Wiki läuft es schon!

          Oder kann man da einen Link setzen, der das Beispiel sofort als neue Seite oder im neuen Tab öffnet?

          Oder so.

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
          1. problematische Seite

            Hallo Matthias,

            done, mein Beispiel dafür hab ich mitgenommen:

            https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/BeispielVorschau

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Servus!

              Hallo Matthias,

              done, mein Beispiel dafür hab ich mitgenommen:

              https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/BeispielVorschau

              Vielen Dank!

              Ich habe noch die Hintergrund-Verläufe aus dem alten Farbwähler hinzugefügt.

              Wenn ich den Visualisierer mit Jürgen's Vergleicher vergleiche, überlege ich, ob die Schieberegler so sortiert und belabelt werden sollten:

              Hue (Farbton)

              Saturation (Sättigung)

              Lightness (Helligkeit)


              @JürgenB Dein Vergleicher ist ein Monster! 😀

              Besonders irritiert mich, dass Lightness und Hue bei HSL und OKLCH vertauscht sind,, aber ich würd's so lassen!

              Herzliche Grüße

              Matthias Scharwies

              --
              Die Signatur findet sich auf der Rückseite des Beitrags.
        2. problematische Seite

          Hi there,

          die Version fürs Wiki liegt jetzt hier:

          https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Oklch-2.html

          Abgesehen davon, daß die Verlaufsdarstellungen offenbar zwei linke Ränder haben sehr gut und informativ gelöst...😉

          1. problematische Seite

            Servus!

            Abgesehen davon, daß die Verlaufsdarstellungen offenbar zwei linke Ränder haben sehr gut und informativ gelöst...😉

            ist gefixt!

            Herzliche Grüße

            Matthias Scharwies

            --
            Die Signatur findet sich auf der Rückseite des Beitrags.
            1. problematische Seite

              Hallo Matthias,

              Abgesehen davon, daß die Verlaufsdarstellungen offenbar zwei linke Ränder haben sehr gut und informativ gelöst...😉

              ist gefixt!

              ups, das ist beim Kopieren passiert und ich habe nicht aufgepasst. Danke fürs fixen.

              Gruß
              Jürgen

  3. problematische Seite

    Matthias schrub:

    @Rolf B hatte eine zündende Idee,hsl() interaktiv zu visualisieren, das kommt demnächst!

    Hier mal der Arbeitsstand zum Anschauen:

    https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Farben-HSL-Visualize.html

    Da sind jetzt mehr Dinge drin als am Ende bleiben sollen.

    • Der Blickwinkel soll am Ende einen fixen Wert haben und der Slider entfallen. Er ist zum Ausprobieren und für die 3D Fehlersuche drin.
    • Die Radiobuttons für den Anzeigemodus sind als Checkbox-Hack implementiert und sollen später auch wieder raus. Ich wollte nur schnell mal beide Modi zum Ausprobieren drin haben.

    Ein großer Teil der Anzeigesteuerung inclusive der 3D-Modellierung erfolgt im CSS. Eigentlich sollte der Lightness-Balken bloß ein Div mit Farbverlauf werden, aber das sah beim Erstellen der Schrägansicht einfach nicht mehr gut aus. Ein echter Balken aus 7 Rechtecken und einem Kreis als Deckel ist einfach schicker 😉.

    Für die 3D-Operationen hatte ich dann auch mal eine Anwendung für trigonometrische Funktionen in CSS.

    CSS Nesting für das HSL-Modell hatte ich drin, musste es aber wieder rausnehmen, weil die Chrome-Entwicklertools immer noch darüber zerbrechen. Vor allem, wenn man einzelne Eigenschaften deaktiviert und reaktiviert.

    Das ganze Ding ist in seinen Abmessungen jedenfalls hoch parametrisiert. Der Ausgangswert ist die Breite der Viewerbox, der Rest wird davon abgeleitet. Ich überlege auch noch, eine echte Maussteuerung zu integrieren, aber das wird dann eigentlich zu viel Arbeit.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Servus!

      Matthias schrub:

      @Rolf B hatte eine zündende Idee,hsl() interaktiv zu visualisieren, das kommt demnächst!

      Hier mal der Arbeitsstand zum Anschauen:

      https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Farben-HSL-Visualize.html

      Da sind jetzt mehr Dinge drin als am Ende bleiben sollen.

      • Der Blickwinkel soll am Ende einen fixen Wert haben und der Slider entfallen. Er ist zum Ausprobieren und für die 3D Fehlersuche drin.

      Evtl. sogar nur 20° Blickwinkel, damit man mehr von der Säule sieht?

      • Die Radiobuttons für den Anzeigemodus sind als Checkbox-Hack implementiert und sollen später auch wieder raus. Ich wollte nur schnell mal beide Modi zum Ausprobieren drin haben.

      Ein großer Teil der Anzeigesteuerung inclusive der 3D-Modellierung erfolgt im CSS. Eigentlich sollte der Lightness-Balken bloß ein Div mit Farbverlauf werden, aber das sah beim Erstellen der Schrägansicht einfach nicht mehr gut aus. Ein echter Balken aus 7 Rechtecken und einem Kreis als Deckel ist einfach schicker 😉.

      Erst überlegt, was du meinst, dann im Inspektor untersucht! Wahnsinn - so sieht es realistisch aus!

      Einziges Problem: Firefox

      Der untere Rand der Säule ist im FF 121 nicht gerundet

      Die Farben sind im Firefox nicht gut - wsl. hast du die neue Hue interpolation method in <system> [ <richtung> hue ](caniuse) verwendet, habe noch nicht ins JS geschaut.

      Evtl. reicht beim hsl()-Visualizer ein „normaler“ conic-gradient.

      .conic-gradient1 {
      	background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
      }
      

      Im Farbwähler finde ich die label der Schieberegler für hsl() sehr schick. Für rgb() gefällt mir das dunkle nicht, deshalb habe ich da mit accent-color gearbeitet.

      Sollte/Könnte man den Schiebereglern den aktuellen Helligkeitswert, bzw. die Sättigung als Wert für accent-color geben? Dann könnte man dort auf den visuell „breiten“ Streifen verzichten.

      Wie willst du den Keil für die Farbsättigung anlegen? Evtl. nur eine Lupe/Kreis, die sich von der Säule nach außen bewegt?

      Das ganze Ding ist in seinen Abmessungen jedenfalls hoch parametrisiert. Der Ausgangswert ist die Breite der Viewerbox, der Rest wird davon abgeleitet. Ich überlege auch noch, eine echte Maussteuerung zu integrieren, aber das wird dann eigentlich zu viel Arbeit.

      Hatte zwar grad versucht mit + den Blickwinkel zu verstellen, ist aber imho nicht nötig!

      Vielen Dank!

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      1. problematische Seite

        Hallo Matthias,

        ich hatte das Ding im Firefox noch gar nicht ausprobiert. Die Hue-Scheibe ist ja eine Katastrophe!

        Die wird nicht mit CSS erzeugt, sondern als Canvas gezeichnet. Grund ist, dass sie einen zweidimensionalen Gradienten anzeigt: Farbe im Winkel und Sättigung im Radius. Möglicherweise kann ich das durch Überlagerung zweier Gradienten mit passendem Blend-Mode in CSS lösen, muss ich schauen. Aber es wundert mich, dass FF den Canvas teiltransparent anzeigt.

        Rolf

        --
        sumpsi - posui - obstruxi
      2. problematische Seite

        Hallo Matthias,

        für die Darstellung im Firefox kann ich nichts, der Fuchs ist krank. Vermutlich hatte die Gans, die er gestohlen hat, die Vogelgrippe 😉

        Ich habe einen Firefox Bug gemeldet. Vergleiche das Beispiel von der MDN Seite zum konischen Gradienten in FF und Chrome:

        Firefox 121.0 Chrome 120.0.6099

        Wie sieht das auf anderen OS/Browsern aus? Kann das jemand mal prüfen?

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Servus!

          Hallo Matthias,

          für die Darstellung im Firefox kann ich nichts, der Fuchs ist krank. Vermutlich hatte die Gans, die er gestohlen hat, die Vogelgrippe 😉

          Ich habe einen Firefox Bug gemeldet.

          Gut.

          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.

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
        2. problematische Seite

          Hallo Rolf,

          Wie sieht das auf anderen OS/Browsern aus? Kann das jemand mal prüfen?

          unter MacOS sieht es im aktuellen FF, Chrome und Safari gleich aus.

          Gruß
          Jürgen

        3. problematische Seite

          Aus dem Bugzilla:

          • Meine Bugmeldung wurde als Duplicate eines Bugs vom 7. September 23 eingestuft.
          • Dieser Bug besagt, dass der Farbfehler bei eingeschalteter Hardwarebeschleunigung auftrifft. Es wird gemutmaßt, dass eine Änderung der Compilereinstellungen für Firefox (Link Time Optimization) verantwortlich ist. Jedenfalls wurde meine Bugmeldung als Regression zu Bug 1834815 eingestuft, worin diese Einstellung geändert wurde. Dieser Compilerschalter betrifft Linux und Windows, was erklärt, weshalb Jürgen es auf den Mac nicht nachvollziehen kann
          • Abschalten der Hardwarebeschleunigung behebt den Fehler bei mir (FF Einstellungen, unten "Leistung", empfohlene Einstellungen abschalten, Hardwarebeschleunigung abschalten)
          • Firefox 115 ESR ist nicht betroffen.
          • FF ab 117 meldet Betroffenheit, für 117 bis 120 wurde "wontfix" entschieden

          Es besteht also Hoffnung, dass ein FF 121 Fix oder FF 122 den Fehler dadurch behebt, dass der Compiler weniger aggressiv optimiert. Aber wenn aggressives Optimieren Logikfehler erzeugen, ist entweder der Optimizer oder die Logik im Eimer. Find ich…

          Man spürt den Effekt aber durchaus, wenn man die HW-Beschleunigung abschaltet; das Drehen an der Blickwinkelschraube ist dann deutlich zäher.

          Rolf

          --
          sumpsi - posui - obstruxi
      3. problematische Seite

        Hallo Matthias,

        ich habe die Generierung der Farbscheibe jetzt komplett von Hand gemacht. Damit funktioniert sie auch im Firefox problemlos.

        https://jsfiddle.net/Rolf_b/w0dnavqk/

        Erkenntnis zum staunen: Firefox rendert die Scheibe bei mir um 1/3 schneller als Chrome!

        Rolf

        --
        sumpsi - posui - obstruxi