Self-Wiki: Farbe
Matthias Scharwies
- farbe
- selfhtml-wiki
0 Mitleser 2.00 JürgenB0 Rolf B
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?
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.
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:
RGB-Raum, der erst am Ende als sRBG weiter spezifiziert wird.
rgba()
heraus, mittlerweile sind Transparenzen wieder ein ganzer Absatz.@Rolf B hatte eine zündende Idee,hsl()
interaktiv zu visualisieren, das kommt demnächst!
Das war uns allen neu, und ist erst mal nur der Vollständikeit halber erwähnt.
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.
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 ...
Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!
Herzliche Grüße
Matthias Scharwies
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. ↩︎
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.
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
@@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?
🖖 Живіть довго і процвітайте
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.
Hallo
Viele Bildschirme können heutzutage aber mehr darstellen als nur sRGB. Warum sollte man das nicht ausnutzen?
wie muss ich mir das vorstellen?
Gruß
Jürgen
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.
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.
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
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.
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
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%);
}
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
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
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
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
Hallo Matthias,
done, mein Beispiel dafür hab ich mitgenommen:
https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/BeispielVorschau
Rolf
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
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...😉
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
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
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.
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
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
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
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
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 hue
da - für die Sättigung sollte man meiner Meinung nach eine weitere Achse oder eben eine „Lupe“ haben.
Herzliche Grüße
Matthias Scharwies
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
Aus dem Bugzilla:
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
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