WEBVTT

00:00:00.017 --> 00:00:05.517
Also ein Farbraum, wenn man jetzt sagt RGB oder HSL oder LCH,

00:00:05.757 --> 00:00:11.597
das ist eigentlich, wenn man so will, ein Abbild, wie man Farben darstellen kann.

00:00:12.737 --> 00:00:16.937
Ich glaube, das ist manchmal auch so eine Aufgabe, wenn ein Designer vergisst,

00:00:16.957 --> 00:00:19.137
dass es halt wichtig ist, einen Farbkontrast zu haben.

00:00:19.257 --> 00:00:24.177
Dass wir da sagen können, hey, schau, die Farben sind einfach zu nah beieinander,

00:00:24.277 --> 00:00:26.137
da haben wir Probleme mit dem Kontrast.

00:00:26.977 --> 00:00:30.077
Die Leute können immer noch hässliche Farben wählen, das ist klar,

00:00:30.177 --> 00:00:32.357
aber es ist wenigstens lesbar.

00:00:32.720 --> 00:00:40.080
Music.

00:00:38.037 --> 00:00:41.937
Diese Revision von Working Draft wird euch präsentiert von Hörerinnen und Hörern wie euch.

00:00:42.337 --> 00:00:46.117
Auf patreon.com slash workingdraft könnt ihr uns ein paar Euro in den Hut werfen.

00:00:46.217 --> 00:00:49.337
Aus euren Beiträgen und den gelegentlichen Werbeblöcken bezahlen wir Domains,

00:00:49.377 --> 00:00:53.497
Server, diverse Softwareabos und natürlich das Honorar unserer Audio-Producerin.

00:00:53.777 --> 00:00:55.737
Danke euch allen für eure treue Unterstützung.

00:01:00.217 --> 00:01:07.457
Revision 623 Wir sind heute zu dritt. Da hätten wir zum einen aus unserem Team den Peter.

00:01:07.997 --> 00:01:13.017
Moin Moin. Ich bin der Shep und wir haben einen, ich sag mal einen Veteranen

00:01:13.017 --> 00:01:17.897
als Gast bei uns, nämlich den John Uhlmann. Hallo John. Hallo.

00:01:18.897 --> 00:01:22.977
John ist ja auch richtig, nicht John. Ja, John ist richtig.

00:01:23.057 --> 00:01:27.797
Also von Jonathan die englische Form Jonathan, müssen, dann die Kurzform davon. Er gibt schon,

00:01:29.341 --> 00:01:31.901
Genau, weil es ja bei dir ohne H geschrieben wird und es gibt ja auch,

00:01:32.041 --> 00:01:34.761
also ich kenne das auch als Jon oder Jon.

00:01:35.241 --> 00:01:38.541
Genau, mit H wäre es dann von Hans und ohne H ist es von Jonathan.

00:01:39.081 --> 00:01:43.861
Ah ja, okay. Genau. Schon wieder was gelernt. Ja, dann diese Revision ist über

00:01:43.861 --> 00:01:46.281
diesen Namen, das war's. Danke fürs Zuhören.

00:01:47.521 --> 00:01:52.761
Nee, der Showtitel gibt es sicherlich schon her. Wir wollen heute mit dir oder

00:01:52.761 --> 00:01:55.061
du hast mitgebracht im Gepäck das Thema Farbräume.

00:01:55.861 --> 00:02:02.341
Vor allem eben neue Farbräume, auf die wir im Browser via CSS und auch glaube

00:02:02.341 --> 00:02:06.701
ich via Bild Bildern zurückgreifen können oder die wir nutzen können.

00:02:07.301 --> 00:02:12.281
Das ist ein total cooles Thema und auch ein nicht immer einfaches Thema.

00:02:12.921 --> 00:02:15.301
Finde ich super. Haben wir noch nie drüber gesprochen, glaube ich.

00:02:16.581 --> 00:02:19.801
Ja, wo ich da das jetzt habe zu dem Thema, war ich froh gewesen manchmal.

00:02:22.481 --> 00:02:26.181
Weil man weil man sich so umdenken muss. Also ich glaube, jeder,

00:02:26.261 --> 00:02:29.101
wo ja mit Web angefangen hat, kennt ja diese,

00:02:29.861 --> 00:02:34.341
Hacks, Colors und ich kenne aber keinen einzigen, wo kein Entwickler,

00:02:34.341 --> 00:02:37.121
wo quasi sagen kann, okay, das ist jetzt die Farbe, also ich schaffe es knapp

00:02:37.121 --> 00:02:41.181
bei Rot, Blau und Grün und dann ist es schon bald fertig. Vielleicht noch Schwarz und Weiß.

00:02:41.981 --> 00:02:45.241
Oder das ist ein Grauwert. Ich habe eingewirft, dass ich einen super Talk gesehen

00:02:45.241 --> 00:02:54.141
habe auf der .css 2019 von dem Typen, der dieses Masonry erfunden hat.

00:02:55.701 --> 00:03:02.221
Der hatte das cool in seinem Talk aufgeschlüsselt. Ah ja, David DeCendro.

00:03:02.701 --> 00:03:05.521
Genau, den verlinken wir direkt mal. Ja, super.

00:03:06.941 --> 00:03:11.701
Genau, wollte ich nur kurz eingeworfen haben. Was ist dein Verhältnis zu Hexfarben jetzt nochmal?

00:03:13.521 --> 00:03:18.221
Mein Verhältnis? Gut, ich habe ja vor circa zweieinhalb Jahren,

00:03:18.301 --> 00:03:21.881
das kommt ein bisschen in eine Historie, vor zweieinhalb Jahren habe ich aus

00:03:21.881 --> 00:03:22.901
versehenem ein Produkt entwickelt.

00:03:24.981 --> 00:03:31.361
Und zwar habt ihr sicher schon mal gehört, wenn ihr einen Podcast da von mir,

00:03:31.421 --> 00:03:33.801
wo ich dabei war, habt ihr gehört, ich bin da am Neos-Team dabei.

00:03:34.241 --> 00:03:38.981
Nein, nicht die Partei aus Österreich, sondern so ein CMS, wo man halt immer

00:03:38.981 --> 00:03:41.461
wieder deployen muss, wenn man eine Designänderung haben will.

00:03:42.261 --> 00:03:45.961
Und ich habe dann so überlegt, okay, wie kann ich das quasi konfigurierbar machen,

00:03:46.721 --> 00:03:50.461
dass man sowas hat wie ein Theme-Builder, aber es ist dann halt auf stabil,

00:03:50.661 --> 00:03:55.761
also nicht irgendwie so ein Cinquecento-Motor darunter, so ein Enterprise-System.

00:03:56.901 --> 00:04:02.401
Und da war halt ein Teil davon, ja, die Leute müssten Farben wählen können.

00:04:04.261 --> 00:04:11.661
Und es soll aber auch irgendwie einfach sein und man soll die Leute ein bisschen unterstützen.

00:04:12.381 --> 00:04:16.861
Deswegen war das am Anfang so ein Tailwind-Color-Picker, wo man dann so diese

00:04:16.861 --> 00:04:18.721
Tailwind-Colors genommen hat.

00:04:18.841 --> 00:04:22.801
Und dann konnte man das wählen und dann konnte ich quasi die Kontrastfarbe so bestimmen.

00:04:24.261 --> 00:04:27.361
Dann kamen natürlich Kumpels, wo wir das dann zum ersten Mal ein bisschen ausprobiert

00:04:27.361 --> 00:04:30.921
haben. Ja, sie hätten jetzt gerne da genau dieses Rosa und so weiter und so fort.

00:04:31.561 --> 00:04:35.821
Und so ist es dann mit der Zeit, wurde es halt da mehrmals neu geschrieben.

00:04:37.621 --> 00:04:41.861
Und die Schwierigkeit ist ja, dass man einem, wenn ich jetzt sage,

00:04:41.941 --> 00:04:44.781
ich übergebe jemandem die Möglichkeit, dass er eine Farbe wählen kann,

00:04:45.181 --> 00:04:49.241
dass es nicht so leicht ist für diese Person festzustellen, ja was ist jetzt

00:04:49.241 --> 00:04:54.021
da die korrekte Kontrastfarbe, ist es weiß, ist es schwarz oder wenn man noch

00:04:54.021 --> 00:04:59.121
einen gleichen Farbstich drin haben will, was ist jetzt da das Korrekte,

00:05:00.661 --> 00:05:03.741
und am Anfang habe ich das mit Text ausgerechnet.

00:05:03.741 --> 00:05:09.201
Das war nicht einfach und nicht wirklich cool, weil es dann auch nicht immer funktioniert hat,

00:05:09.821 --> 00:05:18.181
weil ich dann gemerkt habe, ja gut, ein Gelb mit der Helligkeit oder der Farbsättigung,

00:05:19.041 --> 00:05:20.801
verhält sich bei Blau komplett anders,

00:05:22.081 --> 00:05:25.241
weil erstens mal der Monitor ganz andere Sachen darstellen kann,

00:05:25.361 --> 00:05:28.601
je nach Farbraum oder Farbcode, wenn man so will.

00:05:29.361 --> 00:05:34.481
Und gleichzeitig das Auge, wenn du jetzt sagst, du hast 50% Gelb im Hex und

00:05:34.481 --> 00:05:39.601
50% Blau, ist für jeden eigentlich das Blau viel dünkler als das Gelb zum Beispiel.

00:05:39.801 --> 00:05:45.041
Also das war einfach mathematisch, war das halt in den jeweiligen Farbräumen,

00:05:45.141 --> 00:05:49.601
also Hex ist ja RGB, aber auch in den anderen war das eigentlich alles mathematisch

00:05:49.601 --> 00:05:52.421
korrekt, aber halt nicht aufs menschliche Auge angepasst.

00:05:52.421 --> 00:06:01.061
Und so bin ich dann irgendwann mal natürlich auf diese OK LCH und OK LAB Farbräume gestossen.

00:06:02.947 --> 00:06:06.987
Wo ich mir dann auch gedacht habe, what the fuck, was ist dieses OK davor?

00:06:07.127 --> 00:06:11.467
Dann habe ich gemerkt, okay, das heißt einfach wirklich, jetzt ist es okay, der Farbraum.

00:06:12.007 --> 00:06:16.907
Fand ich ganz witzig, die Namensgebung. Aber ja, was will man machen?

00:06:17.647 --> 00:06:20.907
Und mit denen war es dann quasi möglich zu sagen,

00:06:21.027 --> 00:06:26.827
ich habe 50 Prozent Farbwert und ich habe diese Sättigung und ich konnte am

00:06:26.827 --> 00:06:31.667
Farbrad drehen und die Helligkeit quasi für das menschliche Auge blieb immer

00:06:31.667 --> 00:06:33.147
gleich und das ist eigentlich dieser,

00:06:33.307 --> 00:06:35.947
das ist eigentlich die ganze Zauberei dahinter,

00:06:36.867 --> 00:06:42.887
hinter diesem Farbraum und mit dem konnte ich dann halt wirklich so einen Color

00:06:42.887 --> 00:06:46.947
Picker bauen, wo man dann halt schön die Farbe wählen kann und man kann auch

00:06:46.947 --> 00:06:49.907
die einzelnen Werte einstellen und,

00:06:50.827 --> 00:06:55.227
so konnten dann die Leute quasi bei dem System die Farbe wirklich endlich frei

00:06:55.227 --> 00:06:58.307
wählen, aber sie konnten es nicht kaputt machen, indem dann irgendwelche,

00:07:00.187 --> 00:07:05.567
Kontrastwerte herauskamen, wo man jetzt nicht will, sondern je nachdem ist halt

00:07:05.567 --> 00:07:07.267
der Text dann eher dunkel oder eher hell.

00:07:09.167 --> 00:07:13.127
Und genau, das ist eigentlich der ganze Clou dabei und das ist eigentlich echt cool.

00:07:13.227 --> 00:07:16.207
Also die Leute können immer noch hässliche Farben wählen, das ist klar,

00:07:16.327 --> 00:07:18.467
aber es ist wenigstens lesbar.

00:07:18.767 --> 00:07:21.787
Ja, also wenn wir uns da jetzt gleich mal reinnerden, kannst du,

00:07:21.827 --> 00:07:25.567
wollen wir mal ganz beim Anfang anfangen, kannst du mir beibiegen,

00:07:25.627 --> 00:07:27.147
was eigentlich ein Farbraum ist?

00:07:28.307 --> 00:07:29.927
Was ist ein Farbraum?

00:07:31.247 --> 00:07:37.507
Also ein Farbraum, wenn man jetzt sagt RGB oder HSL oder OKLCH,

00:07:38.267 --> 00:07:43.387
das ist eigentlich, wenn man so will, ein Abbild, wie man Farben darstellen

00:07:43.387 --> 00:07:45.767
kann. Also beim RGB kennt man das ja.

00:07:46.227 --> 00:07:51.427
Es gibt ja diese Systeme, wo Zylinder repräsentieren und dann wählt man den

00:07:51.427 --> 00:07:57.627
Winkel und die verschiedensten Hues, also das Rotate zum Beispiel und die Sättigung

00:07:57.627 --> 00:07:58.547
und so weiter und so fort.

00:08:00.462 --> 00:08:06.202
Und dann gibt es halt andere Farbräume, wo andere 3D-Objekte abbilden.

00:08:06.902 --> 00:08:10.282
Und das ist so eigentlich jetzt ganz kurz gesagt.

00:08:10.542 --> 00:08:14.622
Also man kennt eben den typischen RGB-Color Picker, also dieses Rechteck mit

00:08:14.622 --> 00:08:18.382
diesem Farbverlauf drauf und dann geht man mit der Maus drauf und dann wählt

00:08:18.382 --> 00:08:22.002
man die Farbe. Ja, also im Prinzip ist es ja eine geometrische Konstruktion.

00:08:22.642 --> 00:08:27.102
Genau. Letztlich ein originelles Koordinatensystem, auf dem man dann Parameter

00:08:27.102 --> 00:08:30.122
drehen kann, um dann verschiedene Farben zu bekommen.

00:08:30.942 --> 00:08:35.182
Genau. Ja. Und wenn wir jetzt dann mal in die Historie gehen,

00:08:35.262 --> 00:08:38.942
dann verstehe ich das ja schon so, dass irgendwie so RGB so dieser typische

00:08:38.942 --> 00:08:43.562
Fall ist von offensichtliche Lösung, wenn ich irgendwie Farben auf den Computerbildschirm

00:08:43.562 --> 00:08:44.822
irgendwie bringen möchte.

00:08:44.822 --> 00:08:48.582
Und wie halt so oft ist die offensichtliche erste Lösung nicht so ganz die optimale.

00:08:48.662 --> 00:08:51.402
Also was du, glaube ich, vorhin auch schon erwähnt hattest, ist so,

00:08:51.422 --> 00:08:56.162
das ist halt sehr darauf getunt, dass man das irgendwie der Maschine am Ende leicht macht,

00:08:56.282 --> 00:09:00.382
ohne allzu große Konzessionen an menschliche Wahrnehmung mit unterschiedlicher

00:09:00.382 --> 00:09:05.402
Sensitivität für unterschiedliche Farben und Farbaspekte. Ist das so einigermaßen korrekt?

00:09:06.202 --> 00:09:11.142
Genau, und das Problem beim RGB, also Hex-RGB quasi, ist ja auch,

00:09:11.302 --> 00:09:13.062
dass es ja beschränkt ist.

00:09:13.162 --> 00:09:21.942
Also ich habe ja RGB, diese drei Kanäle, Rot, Gelb, Blau und Grün, Entschuldigung, Grün.

00:09:21.962 --> 00:09:27.822
Und das ist immer von 0 bis 255, also ich habe 256 Werte.

00:09:27.942 --> 00:09:30.662
Jetzt kann man sich ausrechnen, wie viele Kombinationen es gibt.

00:09:31.562 --> 00:09:34.402
Und wenn man die Zahl dann sieht, dann weiß man dann ziemlich schnell,

00:09:34.522 --> 00:09:36.802
mein Monitor kann eigentlich schon mehr.

00:09:37.242 --> 00:09:44.062
Es gibt diese High Dynamic Range Monitore oder jedes iPhone kann schon mehr Farben darstellen.

00:09:44.502 --> 00:09:50.142
Und dann gibt es halt Farben in diesem, wo auch ein Monitor darstellen kann,

00:09:50.362 --> 00:09:54.442
wo aber in dem Farbraum nicht abbildbar sind, weil es ja beschränkt ist.

00:09:54.762 --> 00:09:59.802
Ich würde nochmal einhaken wollen, denn es gibt zum einen Farbräume und dann

00:09:59.802 --> 00:10:02.342
gibt es die Die Farbmodelle,

00:10:02.402 --> 00:10:11.062
die HEX und RGB und HSL, die teilen sich im Grunde den gleichen Farbraum,

00:10:11.082 --> 00:10:12.882
die bilden den nur in anderen Modellen ab.

00:10:13.002 --> 00:10:16.822
Und es gibt dann zum Beispiel den P3-Farbraum.

00:10:18.062 --> 00:10:20.182
Und dann gibt es noch, glaube ich,

00:10:20.222 --> 00:10:26.822
CEE-Farbraum. Und REC 2020 gibt es auch noch. Genau, den gibt es auch.

00:10:27.702 --> 00:10:31.562
Genau, das eine ist halt quasi der Farbraum, also tatsächlich dann,

00:10:31.602 --> 00:10:35.322
wie viele Farben kann ich darstellen und dann, welches Modell liegt mir für

00:10:35.322 --> 00:10:40.222
meinen Use Case irgendwie gerade am besten, um darin quasi herumzuvorwerken.

00:10:40.362 --> 00:10:45.442
Und das eben, das kann mal der Zylinder sein, das kann auch mal eben so ein Würfel sein.

00:10:45.442 --> 00:10:53.542
Und zum Beispiel OK Lab und OK LCH sind im Grunde auch nur verschiedene Modelle,

00:10:53.562 --> 00:10:58.962
um diesen REC 2020-Farbraum abzugreifen, soweit ich weiß.

00:11:01.362 --> 00:11:07.142
Ja, also eben die ganzen HSL und wie die alle heißen,

00:11:07.162 --> 00:11:14.242
die sind beschränkt auf den RGB-Farbraum, aber effektiv, also das LCH und LAB

00:11:14.242 --> 00:11:17.622
und auch die OCA-Variante davon natürlich,

00:11:17.882 --> 00:11:20.642
weil da wurden einfach gewisse Sachen korrigiert.

00:11:20.762 --> 00:11:23.262
Das können wir dann später nochmal tiefer tauchen.

00:11:23.622 --> 00:11:26.642
Da kann ich effektiv Farben abbilden, die gar nicht möglich sind.

00:11:27.162 --> 00:11:31.822
Also das hört sich jetzt vielleicht an, aber ich habe einerseits,

00:11:31.842 --> 00:11:32.622
also ich habe einfach diesen,

00:11:33.302 --> 00:11:37.982
jetzt beim OCA-LCH oder beim LCH, da habe ich einfach diesen Winkel quasi,

00:11:38.162 --> 00:11:47.822
dieses Hue, das ist dann das Rad und das Chroma und das ist ja nicht auf eine Zahl beschränkt.

00:11:47.842 --> 00:11:50.902
Also das kann, muss ja nicht zwischen 0 und 1.

00:11:50.982 --> 00:11:55.282
Klar, das ist eigentlich das, wo wir halt sehen in dem Sinn.

00:11:55.342 --> 00:11:58.802
Aber die Zahl könnte natürlich auch viel höher sein.

00:12:00.402 --> 00:12:06.522
Und auch die Sättigung ist klar, eigentlich von 0 bis 100 Prozent,

00:12:06.702 --> 00:12:08.322
aber könnte natürlich auch mehr sein.

00:12:08.462 --> 00:12:15.802
Also man kann mit dem Farbraum auch Farben abbilden, wo er jetzt noch gar kein

00:12:15.802 --> 00:12:16.802
Monitor darstellen kann.

00:12:17.222 --> 00:12:22.542
Es gibt ja auch so einen Color Picker, der ist auf oklch.com.

00:12:24.760 --> 00:12:27.600
Und da kann man ein bisschen rumspielen und dann sieht man sehr schnell,

00:12:27.720 --> 00:12:32.400
okay, dein Monitor kann das noch gar nicht darstellen oder es gibt das noch

00:12:32.400 --> 00:12:36.400
gar nicht auf keinem Device und das wäre das Fallback und so weiter und so fort.

00:12:36.800 --> 00:12:40.880
Das haben sie wirklich, haben das sehr nice gemacht und man sieht dann wirklich

00:12:40.880 --> 00:12:45.460
auch die Graphen schön dazu, wie sich die verändern.

00:12:46.420 --> 00:12:49.920
Dann ist eigentlich recht gut. Okay, aber ich muss leider noch mal nachfragen,

00:12:49.980 --> 00:12:52.340
weil ich es mir noch nicht ganz auseinandergedröselt habe, zu den Farbraumen

00:12:52.340 --> 00:12:54.820
und die sozusagen User Interfaces darum.

00:12:55.020 --> 00:13:00.520
Also der Farbraum, so was wie halt eben der RGB-Farbraum, ist sozusagen mein Mehr an Möglichkeiten.

00:13:00.820 --> 00:13:04.100
Das sind so die ganzen Farbwerte, die ich erreichen kann. Und wenn ich etwas

00:13:04.100 --> 00:13:07.100
jetzt dann notiere als zum Beispiel RGB oder HSL,

00:13:07.220 --> 00:13:11.240
dann bediene ich mich, sagen wir mal, unterschiedlicher geometrischer Konstruktionen,

00:13:11.240 --> 00:13:14.880
um an unterschiedlichen Parametern drehen zu können, um mich sozusagen auf dieser

00:13:14.880 --> 00:13:16.340
Ebene der Möglichkeiten zu bewegen.

00:13:16.740 --> 00:13:21.780
Das verstehe ich schon richtig. Aber sozusagen wirklich was ändern tut es jetzt

00:13:21.780 --> 00:13:25.320
nicht, wenn ich HSL verwende statt RGB, weil ich mit den gleichen Werkzeugen

00:13:25.320 --> 00:13:27.060
spiele. Ich habe halt nur andere Knöpfe, an denen ich drehe.

00:13:27.780 --> 00:13:30.480
Ja, ich sage es mal so, wenn du HSL nimmst oder ein anderes,

00:13:31.160 --> 00:13:37.440
ist es für dich auch ein bisschen als Entwickler schon ein bisschen leichter, mal die Farben zu lesen.

00:13:37.440 --> 00:13:42.940
Dass du sagst, okay, das ist jetzt der Hue,

00:13:43.180 --> 00:13:45.840
das ist die Sättigung und so weiter und so fort, das ist die Lightness,

00:13:45.880 --> 00:13:52.520
also man versteht schon eher und leichter, das ist eine dunkle Farbe,

00:13:52.540 --> 00:13:54.600
das ist eine helle Farbe, das ist schon...

00:13:56.080 --> 00:14:00.300
Ja gut, ist ja klar, dass User Experience wichtig ist, da sind wir uns ja einig.

00:14:01.620 --> 00:14:04.140
Developer Experience, wenn man so will, genau. Genau, genau,

00:14:04.200 --> 00:14:07.560
aber nur was ich halt sozusagen herauskitzeln möchte, Ist sozusagen dann die

00:14:07.560 --> 00:14:10.300
Erkenntnis, dass wir jetzt nicht darüber reden, RGB,

00:14:10.520 --> 00:14:12.880
nachdem irgendwann HSL-Line geführt wurde und alle gesagt haben,

00:14:13.000 --> 00:14:16.400
boah, guck mal, kannst du irgendwie 3% heller machen und du kannst es halt eben

00:14:16.400 --> 00:14:17.420
tatsächlich als Mensch verstehen.

00:14:17.900 --> 00:14:20.020
Davon reden wir jetzt nicht, sondern wir reden tatsächlich davon,

00:14:20.100 --> 00:14:25.400
dass wir letztlich an vergleichbaren Parametern drehen, aber mit diesen Parametern mehr erreichen.

00:14:26.360 --> 00:14:29.600
Gegeben, wir haben moderne Devices mit entsprechenden Fähigkeiten, das darzustellen.

00:14:30.740 --> 00:14:34.820
Genau, also ich, du kannst, oder ich mache es momentan auch noch so,

00:14:34.920 --> 00:14:39.500
oder häufig so, dass ich sage, ich nehme einfach schon von dem RGB-Farbraum

00:14:39.500 --> 00:14:45.160
die Farben, aber ich stelle sie halt in diesem Farb mit dem OKLCH, nehme ich her.

00:14:46.140 --> 00:14:49.320
Warum? Da könntest du jetzt sagen, ja, da kannst du gleich RGB-Farbraum nehmen.

00:14:51.749 --> 00:14:55.869
Also das eine ist ja die Notation, wie ich eben diese Farbe beschreibe und das

00:14:55.869 --> 00:14:56.949
andere ist ja der Farbraum.

00:14:57.309 --> 00:15:02.509
OKLCA kann natürlich darüber rausschießen, aber neben dem, dass es auch nett

00:15:02.509 --> 00:15:08.249
ist, dass ich dann sagen kann, wenn der Monitor richtig das knallige Rot darstellen

00:15:08.249 --> 00:15:09.689
kann, dann soll er das auch darstellen.

00:15:09.689 --> 00:15:16.389
Weil dem, dass es ein Net-Effekt ist, ist eigentlich der riesengroße Benefit,

00:15:17.469 --> 00:15:25.329
ist, dass ich mit diesen drei Zahlen sagen kann, okay, ich will jetzt die gleichen

00:15:25.329 --> 00:15:27.449
Farbwerte nur in einer anderen Farbe.

00:15:27.529 --> 00:15:33.269
Also ich will jetzt ein Gelb in der gleichen Helligkeitssättigung wie das Blau zu formen.

00:15:33.269 --> 00:15:36.109
Da kann ich einfach an einer Zahl drehen und dann stimmt das.

00:15:36.109 --> 00:15:42.529
Und das ist eigentlich dieser riesen Benefit, weil diese die Helligkeitswerte

00:15:42.529 --> 00:15:46.009
dann gut verteilt sind beim OKLCH,

00:15:47.369 --> 00:15:52.789
und weil das aufs menschliche Auge angepasst ist, also für deine Katze und für

00:15:52.789 --> 00:15:56.749
deinen Hund ist es vielleicht nicht so passend aber das ist jetzt in dem Sinn

00:15:56.749 --> 00:16:01.969
mal egal sondern es ist einfach dann für den Benutzer und die Benutzerin.

00:16:03.609 --> 00:16:06.569
Ist es dann möglichst homogen.

00:16:06.849 --> 00:16:09.809
Klar, jeder sieht jede Farbe anders.

00:16:11.229 --> 00:16:15.729
Ein sehr guter Freund von mir, wo ich täglich mit ihm zusammenarbeite,

00:16:15.889 --> 00:16:17.729
der ist schon fast blind.

00:16:18.589 --> 00:16:21.029
Das ist natürlich dumm.

00:16:22.089 --> 00:16:27.229
Schlecht für ihn, aber fürs Team jetzt manchmal, fürs Bewusstsein zu schaffen,

00:16:27.409 --> 00:16:31.709
wie man was mit Kontrasten arbeitet und Schriftgrößen und so ist das eigentlich

00:16:31.709 --> 00:16:36.389
noch ganz gut, weil du sofort einen Referenzpunkt hast, weil der dann sehr schnell

00:16:36.389 --> 00:16:38.209
sagt, hey, das Zeug kann ich gar nicht mehr lesen.

00:16:40.369 --> 00:16:40.709
Und.

00:16:43.899 --> 00:16:49.459
Das ist eigentlich dieser riesengroße Vorteil. Und da kommen natürlich dann

00:16:49.459 --> 00:16:53.979
auch diese neuen Funktionen rein im CSS,

00:16:54.239 --> 00:16:59.559
wo ich dann sagen kann, ja, ich will jetzt die Farbe in dem Farbraum und jetzt

00:16:59.559 --> 00:17:04.619
will ich einfach nur die Luminanz anpassen oder das Chroma oder was auch immer.

00:17:05.399 --> 00:17:09.599
Das können leider noch nicht alle Browser. Das heißt, man muss da noch ein bisschen

00:17:09.599 --> 00:17:12.239
tricksen, wenn man schon so arbeiten will. Aber das ist möglich.

00:17:13.139 --> 00:17:17.999
Ich habe dann halt für, weil ich ja mit Tailwind arbeite, mal gesucht,

00:17:17.999 --> 00:17:20.219
ob es da nicht irgendein Plugin gibt und auch eins gefunden,

00:17:20.539 --> 00:17:22.079
das ist leider archiviert.

00:17:22.659 --> 00:17:27.339
Habe dann das übernommen und ein bisschen noch ein paar Sachen angepasst und,

00:17:28.179 --> 00:17:29.899
Sachen eingefügt, wo noch gefehlt haben.

00:17:31.239 --> 00:17:35.199
Und jetzt habe ich halt quasi die Möglichkeit zu sagen, ja, ich hätte jetzt gern,

00:17:36.639 --> 00:17:40.559
die Hintergrundfarbe in der Farbe und die Textfarbe soll einfach eine Kontrastfarbe

00:17:40.559 --> 00:17:45.699
sein dazu, dann wählt automatisch aufgrund von der Farbe, vom Hintergrund,

00:17:45.719 --> 00:17:50.039
wird dann die Textfarbe gesetzt und das ist enorm cool, weil du sparst dir dann,

00:17:52.059 --> 00:17:57.219
einerseits CSS-Klassen ohne Ende im Tailwind-Kontext, was auch schon mal wertvoll

00:17:57.219 --> 00:18:00.339
sein kann und gleichzeitig ist es einfach, durch das weißt du,

00:18:00.379 --> 00:18:02.439
es ist safe, also wenn der Benutzer der.

00:18:04.677 --> 00:18:07.177
Du könntest sogar einen Kollerpick einbinden auf der Seite und sagen,

00:18:07.277 --> 00:18:10.957
wähle dir deine Farbe von dem Button und dann ändert sich automatisch die Farbe dazu.

00:18:12.097 --> 00:18:16.137
Nur kurz für mich, weil ich habe von Tailwind keine Ahnung, ich bin ja ein alter

00:18:16.137 --> 00:18:18.737
Mann, der mit der modernen Technik nichts zu tun hat.

00:18:19.417 --> 00:18:23.417
Inwiefern ist das jetzt, also dein Tool hier, Tailwind-spezifisch?

00:18:24.337 --> 00:18:26.977
Was ist das Tailwind-spezifische daran? Wie gesagt, ich habe keine Ahnung.

00:18:26.977 --> 00:18:31.377
Nein, ich sage es mal so, Tailwind hat mir beigebracht, obwohl ich ein alter

00:18:31.377 --> 00:18:37.277
CSS-Hase bin, für welche crazy Sachen man Custom Properties verwenden kann und

00:18:37.277 --> 00:18:38.417
wie man die verwenden kann.

00:18:38.417 --> 00:18:46.977
So mit Modifier, die die Opacity beim Text ändern zum Beispiel oder vom Hintergrund

00:18:46.977 --> 00:18:49.797
oder sowas ändern quasi.

00:18:50.897 --> 00:18:57.557
Und in dem Sinne ist das jetzt nicht Tailwind-spezifisch. der große Trick jetzt

00:18:57.557 --> 00:19:00.817
bei dem, wie ich es verwendet habe, ist, dass ich einfach sage.

00:19:02.497 --> 00:19:08.817
Ich speichere jetzt im CMS oder in dem CSS, wo nachher diese Custom Properties

00:19:08.817 --> 00:19:15.397
ausgeben, wird eine Farbe in drei Custom Properties aufgesplittet,

00:19:15.457 --> 00:19:16.997
in diese drei Teile quasi.

00:19:18.017 --> 00:19:21.177
Und dann kann ich natürlich mit diesen drei Teilen interagieren.

00:19:21.257 --> 00:19:28.277
Dann kann ich sagen, der zweite Teil kann man eben eben da mit so CSS-Funktionen

00:19:28.277 --> 00:19:33.217
wie min oder max oder clamp, kann ich dann halt quasi wie automatisch sagen,

00:19:33.437 --> 00:19:35.097
ja, ich will jetzt die Kontrastfarbe dazu.

00:19:36.057 --> 00:19:38.977
Okay, verstehe. Also wo man dann sagt, ja, wenn du den Wert,

00:19:39.017 --> 00:19:44.477
wenn jetzt der über 0,6 ist, dann mach das bitte in die Richtung,

00:19:44.517 --> 00:19:48.457
wo man jetzt drunter ist, mach es in die andere Richtung und das funktioniert super.

00:19:48.737 --> 00:19:55.597
Ist in dem Sinn überhaupt nicht Tailwind-spezifisch, weil Tailwind ist ja auch nur CSS-Bereich.

00:19:57.358 --> 00:20:03.498
At the end. Und das lässt sich dann eigentlich so machen. Es lässt sich halt

00:20:03.498 --> 00:20:04.638
sehr einfach dann in dein.

00:20:06.758 --> 00:20:09.718
Workflow integrieren, weil du dann halt Vorschläge kriegst für diese Klasse

00:20:09.718 --> 00:20:13.238
und du siehst gerade, wenn du mit der Maus drüber fährst, was jetzt diese Klasse macht.

00:20:13.538 --> 00:20:19.558
Das sind so kleine Benefits, aber man kann das natürlich auch ganz klassisch quasi schreiben.

00:20:21.138 --> 00:20:24.638
Und das weitet sich dann halt auf alles aus, dass ich sagen kann,

00:20:24.738 --> 00:20:28.658
ja, der Borderhead sollte die Farbe haben vom Text,

00:20:29.638 --> 00:20:34.218
oder sollte die Kontrastfarbe sein oder der Schatten soll jetzt eben die Kontrastfarbe

00:20:34.218 --> 00:20:37.118
übernehmen vom Hintergrund und so weiter und so fort.

00:20:37.238 --> 00:20:41.738
Also du kannst jetzt natürlich da auf jegliche Sachen, wo du irgendwelche Farben

00:20:41.738 --> 00:20:46.118
angeben willst, kannst du das dann machen.

00:20:47.358 --> 00:20:47.798
Genau.

00:20:49.378 --> 00:20:54.418
Und last but not least, was auch ein Riesenvorteil ist im Vergleich zu diesem

00:20:54.418 --> 00:21:00.678
RGB oder muss man jetzt mal sagen Hex und den anderen Farbmodellen,

00:21:00.698 --> 00:21:03.718
wie man es notiert, ist, wenn ich einen Farbverlauf mache,

00:21:05.138 --> 00:21:08.098
dass da die Linie dann nicht schön durch das Grau geht.

00:21:08.218 --> 00:21:10.398
Das kennt man ja, wenn ich jetzt da so einen Farbverlauf mache,

00:21:10.518 --> 00:21:15.478
so einen Gradient von Rot zu Grün, dass man dann in der Mitte dann einfach dieses

00:21:15.478 --> 00:21:19.798
ausgewaschene Grau hat und diese Farbmodelle auslösen,

00:21:21.160 --> 00:21:23.960
Und fahren halt dann nicht dort durch. Also man hat dann nicht einfach eine

00:21:23.960 --> 00:21:27.360
reduzierte Sättigung auf einmal und dann einen hässlichen Farbverlauf,

00:21:27.540 --> 00:21:29.060
sondern es sieht halt schön aus.

00:21:29.760 --> 00:21:32.440
Und das ist wirklich so der Clou an der geometrischen Konstruktion,

00:21:32.480 --> 00:21:37.260
dass dadurch, wie das aufgebaut ist, man sozusagen umfährt diese Grauzone. Genau.

00:21:39.080 --> 00:21:42.480
Und das ist ja tatsächlich so an diesen neuen Farbmodellen.

00:21:42.660 --> 00:21:45.840
Also was Herr Schepp vorhin sagte, wir haben ja sozusagen zwei Dinge hier.

00:21:45.960 --> 00:21:48.740
Wir haben ja mehr Möglichkeiten und wir haben andere Konstruktionen,

00:21:48.760 --> 00:21:50.340
um mit diesen Möglichkeiten zu interagieren.

00:21:51.260 --> 00:21:54.960
Und das Problem, was ich also mit der ganzen Kiste so ein bisschen sehe,

00:21:55.120 --> 00:22:00.960
ist ja, dass RGB irgendwie so ein Standard ist, so ein kleinster gemeinsamer

00:22:00.960 --> 00:22:03.560
Nenner und dass das ja wirklich, glaube ich, nicht einfacher wird,

00:22:03.660 --> 00:22:08.360
irgendwas anderes zu etablieren als das in einer Welt, wo man halt nicht davon

00:22:08.360 --> 00:22:11.560
ausgehen kann, dass wirklich alle ein Fancy Display haben.

00:22:11.560 --> 00:22:15.760
Und selbst wenn sie fancy Displays haben, dass die alle entsprechend kalibriert

00:22:15.760 --> 00:22:17.060
sind, dass man da wirklich was von hat.

00:22:17.360 --> 00:22:21.220
Und umgebungsumstände, Sonnenlicht, Schatten hast du nicht gesehen,

00:22:21.280 --> 00:22:22.820
dass das ja alles relativ schwierig ist.

00:22:22.820 --> 00:22:25.800
Aber ich glaube, wenn man sozusagen auch unter diesen Umständen das Argument

00:22:25.800 --> 00:22:28.000
machen möchte, warum man sich mit dem neuen Kram befassen möchte,

00:22:28.100 --> 00:22:33.160
ist tatsächlich so dieser Gradient-Faktor, der ja auch sich jenseits von Gradients

00:22:33.160 --> 00:22:35.180
niederschlägt, glaube ich so das Hauptargument.

00:22:35.180 --> 00:22:39.180
Also das kann man ja tatsächlich auf den räudigsten Beamer in der schlechtesten

00:22:39.180 --> 00:22:42.940
Beleuchtung an die Wand werfen und man sieht noch, dass das was für einen tut,

00:22:43.120 --> 00:22:47.440
indem man ja letztlich gefühlt nur die Syntax austauscht, aber weil man durch

00:22:47.440 --> 00:22:51.160
den Austausch der Syntax darunter die gänzliche Konstruktion verändert,

00:22:51.380 --> 00:22:54.860
dadurch holt man sich ja wirklich einen Benefit raus, selbst wenn alle mit irgendwelchen

00:22:54.860 --> 00:22:56.300
räudigen Gammellaptops unterwegs sind.

00:22:56.720 --> 00:23:00.140
Also das sollte man nicht so als unterferner liefen irgendwie subsumieren,

00:23:00.200 --> 00:23:01.880
sondern das ist tatsächlich, glaube ich, ein wichtiger Punkt.

00:23:02.440 --> 00:23:06.840
Genau, also du, wenn du jetzt wirklich sagen willst, ich will viele P3-Farben

00:23:06.840 --> 00:23:12.240
und vielleicht das Rack 2020 unterstützen, kannst du natürlich mit Ad-Supports

00:23:12.240 --> 00:23:14.080
und dann kannst du es abfangen.

00:23:14.640 --> 00:23:16.740
Aber jetzt muss ich dich leider fragen, was P3-Farben sind.

00:23:17.640 --> 00:23:21.540
P3-Farben, das hat, glaube ich, sogar Apple eingeführt. Das war dann...

00:23:22.565 --> 00:23:27.465
Wurde dann ein Standard. Das sind einfach ...

00:23:28.465 --> 00:23:35.345
Genau, ich glaube, P3 liegt so zwischen, also was halt Hex und RGB und HSLs unliegt, ist der sRGB.

00:23:35.465 --> 00:23:39.045
Das ist ja irgendwie nach einem Kathodenstrahlmonitor modelliert.

00:23:39.165 --> 00:23:41.785
Oder der Farbraum entspricht dem.

00:23:43.185 --> 00:23:51.445
Und P3 ist so ein Zwischenschritt hin zu REC 2020. Also das ist quasi ein größerer

00:23:51.445 --> 00:23:55.265
Colorspace und P3 liegt so dazwischen.

00:23:55.865 --> 00:24:02.285
Und meine These ist ja, dass Apple das mit seinen Displays eingeführt hat und

00:24:02.285 --> 00:24:04.665
weil die ja relativ viele Interfaces ihrer Apps,

00:24:04.745 --> 00:24:09.385
zum Beispiel iTunes war so und auch früher deren Bücher-App und so,

00:24:09.485 --> 00:24:11.325
die sind ja mit Web-Technologien gebaut.

00:24:11.325 --> 00:24:17.605
Und damit die dann nicht abkacken gegen die nativen UIs, mussten die halt ihrem

00:24:17.605 --> 00:24:22.365
Browser beibringen, bei Beacon eben auch P3 rendern zu können.

00:24:22.405 --> 00:24:27.045
Und darum haben die das relativ zügig zusammen mit den Displays eingeführt.

00:24:28.786 --> 00:24:34.146
Ja, aber ist es wieder Farbraum, also sozusagen die Möglichkeitenpalette,

00:24:34.206 --> 00:24:35.166
die Farben, die wir ausdrücken?

00:24:35.206 --> 00:24:39.626
Genau, wobei da ist es so, dass es Farbraum und Farbmodell zugleich ist.

00:24:39.726 --> 00:24:45.546
Also es gibt, glaube ich, kein anderes Farbmodell, um auf P3 Farbraum rumzuwurschteln.

00:24:45.926 --> 00:24:48.346
Also das meine ich gäbe es nicht.

00:24:49.146 --> 00:24:52.326
Okay, aber das ist jetzt nicht irgendwie intrinsisch, sondern das hat keiner

00:24:52.326 --> 00:24:54.126
irgendwie ernsthaft gebaut oder so.

00:24:54.486 --> 00:24:57.486
Ja, also genau. I don't know.

00:24:58.506 --> 00:25:01.646
Es ist ja am Ende alles bloß Mathematik, das kann sich ja einfach irgendwer

00:25:01.646 --> 00:25:04.046
ausdenken, wenn er will. Ja, im Grunde schon.

00:25:05.166 --> 00:25:10.066
Genau, das ist ja auch so gewesen, dass, glaub ich, erst gab's ja LCH und Lab

00:25:10.466 --> 00:25:14.886
oder Lab, und dann kam ja irgendwer daher und meinte, ja, das ist aber irgendwie

00:25:14.886 --> 00:25:17.046
alles noch nicht richtig cool, was ihr gemacht habt.

00:25:17.246 --> 00:25:21.486
Also das war, glaub ich, schon so, die nennen das ja perceptually uniform,

00:25:21.906 --> 00:25:25.786
also dieses Bestreben gab's schon, dass man irgendwie schaut,

00:25:25.966 --> 00:25:30.846
dass dass irgendwie ein so und so helles Blau einem auch, also wenn man diese

00:25:30.846 --> 00:25:35.026
Gleichhelligkeit auf ein Rot anwendet, dass man so das Gefühl hat, ja, das ist so in etwa.

00:25:35.646 --> 00:25:39.146
Aber der ist ja hingegangen und hat gesagt, ja, aber irgendwie so richtig cool

00:25:39.146 --> 00:25:42.626
ist das trotzdem nicht. Ich hab da noch so ein paar Sachen nicht richtig gut gelöst.

00:25:42.706 --> 00:25:47.926
Und dann hat der eben quasi, ich schlage Folgendes vor und hat das dann halt

00:25:47.926 --> 00:25:54.486
eben, wie du sagtest, einfach mit okay geprefixed, weil so jetzt, dann ist es okay.

00:25:54.486 --> 00:25:57.246
Okay, also wenn wir das jetzt machen, dann nehmen wir das und dann machen wir

00:25:57.246 --> 00:25:59.686
noch hier und da und da und dann ist es okay.

00:25:59.786 --> 00:26:05.666
Und wir nennen das okay LCH jetzt und okay Lab und alle so, ja, stimmt, cool.

00:26:06.326 --> 00:26:10.006
Nehmen wir. Wenn ich es richtig erinnere, hat diese Person das ja mehr oder

00:26:10.006 --> 00:26:12.106
minder wirklich einfach datengetrieben gemacht.

00:26:12.286 --> 00:26:15.546
Also nicht am Reißbrett entwickelt, sondern ich weiß jetzt nicht,

00:26:15.566 --> 00:26:20.086
ob es direkt gebrutforst wurde, aber schon so, wir fummeln da so lange an den

00:26:20.086 --> 00:26:25.666
Parametern rum, bis diese Kurven tatsächlich dieses perceptionelle Uniform umsetzen.

00:26:26.926 --> 00:26:29.226
Und dagegen lässt es sich halt schwer argumentieren.

00:26:31.018 --> 00:26:34.638
Ja, das ist halt schon cool, wenn ich dann sagen kann, ich habe jetzt einen

00:26:34.638 --> 00:26:38.958
blauen Button und 50% und 0,2, 260 Grad Hue.

00:26:39.478 --> 00:26:44.438
Und jetzt sage ich, on hover ist es dann 60%, also muss nur eine Zahl ändern

00:26:44.438 --> 00:26:48.218
und dann weiß ich, es ist die gleiche Farbe, nur ein bisschen heller.

00:26:48.838 --> 00:26:50.318
Ist dann schon halt nice.

00:26:52.178 --> 00:26:56.738
Ja. Und ja. Und was du gerade meintest, Peter,

00:26:56.858 --> 00:27:03.318
dass man eben das bei den Linear Gradients oder bei den auch anderen Gradients gut sehen kann,

00:27:03.378 --> 00:27:09.478
wenn man da das zugrunde liegende Farbmodell wechselt, wo dann eben quasi die

00:27:09.478 --> 00:27:14.338
Verlaufslinie irgendwie anders durch diesen Raum geht.

00:27:15.238 --> 00:27:21.398
Das kann man ja auch tatsächlich, also man kann das ja mittlerweile sogar anfordern

00:27:21.398 --> 00:27:27.178
Anfordern von den Gradient-Funktionen, da kannst du dann sagen, in OK Lab oder sowas,

00:27:27.798 --> 00:27:33.578
musst dann auch keine OK Lab Farben übergeben, sondern dann weißt du,

00:27:33.638 --> 00:27:38.098
aha, okay, du hast hier Blue und Red und möchtest gerne aber in einem anderen

00:27:38.098 --> 00:27:41.618
Farbraum diesen Farbverlauf gerechnet haben.

00:27:42.378 --> 00:27:45.358
Dann wandelt er die um, macht das und genau.

00:27:46.058 --> 00:27:51.678
Ja, okay, das ist natürlich sehr cool, weil also dieses Gradient-Beispiel nehme

00:27:51.678 --> 00:27:54.458
ich halt immer so her als plakatives Beispiel, wenn ich irgendwie so auf einer

00:27:54.458 --> 00:27:56.198
Konferenz bin, ich will den Java-Entwicklern zeigen,

00:27:56.358 --> 00:28:00.138
guck mal, schaut euch CSS an, da gibt's coolen Krempel und mittlerweile versuche

00:28:00.138 --> 00:28:02.258
ich die ja auf die Weise an die Kandare zu kriegen, dass ich sage,

00:28:02.398 --> 00:28:06.378
schaut mal, da kann man sich richtig reinnerden, das ist was für richtige Entwickler,

00:28:06.478 --> 00:28:09.178
das ist nicht nur Pixelschubsen, das ist auch tatsächlich anspruchsvoll

00:28:09.558 --> 00:28:12.858
und da hole ich halt eben gern den ganzen Farbkram raus und naja,

00:28:12.878 --> 00:28:15.458
den Gradient kannst du halt wirklich wunderbar, wie gesagt, unter den schlechtesten

00:28:15.458 --> 00:28:18.718
Bedingungen mit dem räudigsten Hotelbeamer mal an die Wand werfen und jeder

00:28:18.718 --> 00:28:21.878
sieht sofort, ah, okay, das zweite Beispiel ist besser als das erste.

00:28:22.458 --> 00:28:25.578
Und was du jetzt gerade sagst, dass es diese Syntax by Gradients gibt,

00:28:25.678 --> 00:28:28.618
das war mir gar nicht klar, aber das löst natürlich ein anderes Problem, dass ich jetzt,

00:28:29.238 --> 00:28:31.398
dann öfter mal, mit dem ich dann konfrontiert werde, wo die sagen,

00:28:31.478 --> 00:28:34.358
das ist ja schön, was du alles erzählst, wie kriege ich den Rest meiner Firma

00:28:34.358 --> 00:28:35.918
dazu, die jetzt nicht dabei waren,

00:28:36.078 --> 00:28:39.718
das auch zu verstehen und wie kriege ich die dazu, wo wir überhaupt erstmal

00:28:39.718 --> 00:28:42.378
darüber reden, dass wir überhaupt ein einheitliches Designsystem machen,

00:28:42.498 --> 00:28:45.378
die dann direkt aufs übernächste Level zu heben und sagen, so,

00:28:45.418 --> 00:28:48.038
jetzt machen wir diesen ganzen RGB-Krempel weg und machen in was komplett anderes,

00:28:48.218 --> 00:28:53.378
was auch sicher außerhalb der Webwelt auch noch nicht so wirklich irgendwie niedergeschlagen hat.

00:28:53.458 --> 00:28:55.818
Also ist das irgendwie in Photoshop oder so drin? Ich weiß es ja nicht.

00:28:56.378 --> 00:29:00.178
Also jedenfalls glaube ich nicht prominent, oder? Doch, also dort ist natürlich

00:29:00.178 --> 00:29:03.258
schon ein Thema, welcher Farbraum.

00:29:04.120 --> 00:29:08.840
Also, ich weiß es aus meiner Agenturzeit, es war immer ein Riesenthema,

00:29:08.840 --> 00:29:15.940
welches CMYK, welcher Drucker und bei den RGBs hast du natürlich dieses Adobe RGB,

00:29:16.220 --> 00:29:23.720
wo aber viel mehr kann als das Web RGB und so. Das ist schon klar.

00:29:24.860 --> 00:29:28.440
Die Frage ist halt nur, wie kriegen wir das bei mittelständischer Software-Pude,

00:29:28.540 --> 00:29:32.720
wo halt einfach nur Formulare rausgerendert werden müssen, einfach nur in Anführungszeichen.

00:29:33.060 --> 00:29:37.200
So, wie kriegt man das sozusagen da platziert? Wo ist da so der Spalt,

00:29:37.200 --> 00:29:39.860
wo ich meine Brechstange reinkriegen kann, dass ich irgendwie neue Technologie

00:29:39.860 --> 00:29:42.780
da einführen kann? Das ist ja manchmal so ein bisschen so der Kampf.

00:29:43.100 --> 00:29:46.320
Und diese Gradient-Syntax ist, glaube ich, ein ganz großartiger Angriffsvektor.

00:29:46.360 --> 00:29:51.020
Der gefällt mir sehr gut. Ja, du siehst eh ein schönes Beispiel auf dem Blogartikel,

00:29:51.180 --> 00:29:56.100
den wir auch verlinken, von den Jungs, wo die einen Colourpicker gebaut haben.

00:29:56.240 --> 00:29:58.380
Evil Martians heissen die.

00:29:58.980 --> 00:30:02.940
Wird wahrscheinlich vielen ein Begriff sein. Das sind die Jungs dahinter, Post CSS.

00:30:04.620 --> 00:30:08.580
Da haben sie auch diese verschiedenen immer die gleichen Farbverläufe also die

00:30:08.580 --> 00:30:12.460
zwei gleichen Farben in den verschiedenen Farbräumen und da sieht man halt schon

00:30:12.460 --> 00:30:17.500
häufig, dass RGB einfach ich fahre einfach durchs Grau durch weil es ist der kürzeste Weg,

00:30:19.080 --> 00:30:22.880
aber wir wollen ja bei Farbverläufen nicht die Autobahn, sondern die Bergstrecke,

00:30:22.880 --> 00:30:27.760
was man so will wir wollen die schöne Strecke haben mit den schönen satten Farben

00:30:27.760 --> 00:30:28.980
und das ist schon spannend.

00:30:31.140 --> 00:30:37.760
Genau immer. Ansonsten würde ich sagen, also ich also die neuen Farben bieten

00:30:37.760 --> 00:30:41.780
halt bestimmte Lösungen für Probleme, die aber vielleicht auch nicht jeder hat.

00:30:41.940 --> 00:30:45.140
Also es muss auch nicht jeder das machen. Also das mit den Linear Gradients

00:30:45.140 --> 00:30:47.160
oder Gradients generell, das finde ich auch cool.

00:30:47.560 --> 00:30:52.740
Und es ist ja dann auch so, je nachdem von welcher Farbe du zu welcher anderen

00:30:52.740 --> 00:30:57.620
Farbe interpolierst, ist auch mal ein anderer Farbraum cooler.

00:30:57.900 --> 00:31:02.820
Also es gibt nicht den einen, den man immer nehmen sollte, weil der der perfekte ist.

00:31:03.120 --> 00:31:06.120
Das ist auch immer ganz cool. Also da muss man mal so ein bisschen durchprobieren.

00:31:07.100 --> 00:31:09.960
Aber da kann man auf jeden Fall viel rausholen. Und ansonsten würde ich sagen,

00:31:10.080 --> 00:31:17.260
eher, wenn du also so eine Art White-Label-Design-System Ding,

00:31:18.260 --> 00:31:24.600
auslieferst, wo Kunden eben vielleicht alles in Rot kleiden und dann kannst

00:31:24.600 --> 00:31:27.860
du eben, wie John meinte, aus einer.

00:31:28.880 --> 00:31:35.200
Basisfarbe eben super die ganzen Derivate ableiten und vielleicht die Kontrastfarben und so.

00:31:35.560 --> 00:31:41.540
Das kannst du halt mit dem herkömmlichen Farbräumen nicht, weil wenn du halt

00:31:41.540 --> 00:31:44.920
zum Beispiel Gelb nimmst, da kommt ja nur Kurze raus.

00:31:45.200 --> 00:31:49.220
Also Gelb ist ja wirklich so, machst es ein bisschen dunkler,

00:31:49.220 --> 00:31:53.320
sieht es ja schon direkt aus, so kackbraun oder so. Ja.

00:31:54.200 --> 00:31:59.020
Oder du hast halt eben tatsächlich, dass dann bestimmte Sachen mega leuchtend

00:31:59.020 --> 00:32:01.840
sind und andere dann wiederum gar nicht.

00:32:03.607 --> 00:32:08.627
Und da macht das Sinn, aber es macht auch ganz oft vielleicht gar keinen Sinn

00:32:08.627 --> 00:32:11.127
und verkompliziert die Dinge ja auch ein bisschen,

00:32:11.187 --> 00:32:14.987
weil du musst ja letztendlich, also du musst erst mal deine eigene Maschine

00:32:14.987 --> 00:32:20.547
entwickeln und dann musst du ja auch das Ganze, was du da mit deinem tollen, super,

00:32:21.767 --> 00:32:25.067
Wide Gamut Bildschirm getestet hast, nochmal auf einem anderen Bildschirm testen,

00:32:25.067 --> 00:32:28.947
der nicht Wide Gamut hat und musst da gucken, dass es da halt auch einigermaßen

00:32:28.947 --> 00:32:30.887
aussieht und nicht doof aussieht.

00:32:31.967 --> 00:32:35.567
Ja, es ist fast so, als würde der ganze Krempel komplizierter werden mit der Zeit.

00:32:35.707 --> 00:32:39.547
Erst hast du Responsive, dann hast du Darkvote, jetzt kommt der Kram auch noch,

00:32:39.647 --> 00:32:41.487
aber lass mal alles in Full-Time quetschen.

00:32:41.667 --> 00:32:47.447
Du hast halt von allem halt immer nochmal quasi eine Realitätsebene mehr. Ja, genau.

00:32:49.107 --> 00:32:54.427
Kannst nichts machen. Ich glaube, ich würde sagen, wenn du mal dein Build-Setup

00:32:54.427 --> 00:32:58.327
oder deine Basis-CSS hast, wo du sagst, ich habe,

00:32:59.367 --> 00:33:04.487
eine Klasse und wo ich sagen kann, ich will jetzt den Hintergrund,

00:33:04.487 --> 00:33:07.007
Kontrast vom Text oder den Text.

00:33:07.547 --> 00:33:11.287
Meistens ist es ja das, man sagt, ich habe den Hintergrund und der Text soll

00:33:11.287 --> 00:33:12.407
die Kontrastfarbe sein.

00:33:13.087 --> 00:33:20.247
Diese Möglichkeit zu haben, erleichtert die Entwicklungsarbeit wirklich massiv,

00:33:20.247 --> 00:33:21.527
weil du nicht mehr überlegen musst.

00:33:22.447 --> 00:33:25.887
Also ich muss auch keine Zahl mehr lesen. Ist das jetzt, wo bin ich jetzt hier?

00:33:25.967 --> 00:33:27.287
Gehe ich jetzt hier runter? Gehe ich hoch?

00:33:27.847 --> 00:33:31.607
Und wenn dann ein Designer sagt, ja nein, wir müssen hier eine komplett andere

00:33:31.607 --> 00:33:34.467
Farbe haben, dann muss ich eigentlich gar nichts mehr anpassen,

00:33:34.567 --> 00:33:41.427
sondern ich ändere einfach diese eine Farbproperty oder sogar nur das Farbrad

00:33:41.427 --> 00:33:43.427
drehe ich und der Rest ist dann alles angepasst.

00:33:43.427 --> 00:33:47.307
Also das ist wirklich eigentlich extrem cool.

00:33:48.267 --> 00:33:50.947
Das kann ich alles in CSS bauen? Alles in CSS.

00:33:52.102 --> 00:33:58.822
Okay. Werkzeugkasten dafür? Werkzeugkasten dafür, also das kommt auch in die Schau.

00:33:58.902 --> 00:34:01.262
Also was brauche ich da alles an Bausteinen in CSS?

00:34:01.642 --> 00:34:06.502
Ich glaube, du brauchst im Grunde, du brauchst, also bewegst dich in diesen

00:34:06.502 --> 00:34:11.842
entsprechenden Farbräumen, wo garantiert ist, dass eben in verschiedenen.

00:34:13.142 --> 00:34:16.362
An verschiedenen Stellen des Farbrads, also im grünen Bereich,

00:34:16.522 --> 00:34:20.322
im blauen Bereich, im roten Bereich, das Verhältnis der Farben zueinander immer,

00:34:20.402 --> 00:34:23.422
also also von dir wahrgenommen identisch ist.

00:34:23.842 --> 00:34:30.222
Das ist ja quasi nur, es geht ja um das Wahrgenommene. Also mathematisch gesehen ist es nicht so.

00:34:30.542 --> 00:34:33.422
Das ist ja das, was wir bei RGB haben. Das ist mathematisch korrekt,

00:34:33.422 --> 00:34:35.722
aber es wirkt für uns nicht korrekt.

00:34:37.642 --> 00:34:41.042
Genau, und dann würde ich sagen, die Calamix-Funktion, oder?

00:34:42.522 --> 00:34:46.762
Ja, ich habe es, also so wie das jetzt hier umgesetzt ist, dass man wirklich sagen kann,

00:34:46.922 --> 00:34:50.822
ich kann eine Klasse draufschmeißen, Dann habe ich von der den Kontrast,

00:34:50.822 --> 00:34:56.402
ist sogar ohne Color Mix gelöst, weil das auch noch nicht alle Browser hundertprozentig

00:34:56.402 --> 00:34:58.422
sauber dazu mal konnten.

00:34:59.002 --> 00:35:02.882
Ich glaube, die bei Tailwind, die composen diese Farben dann,

00:35:02.942 --> 00:35:06.322
also aus verschiedenen Custom Properties, oder? Kann das sein?

00:35:06.962 --> 00:35:14.602
Ja, so jetzt die normale Tailwind, also die aktuelle ist ja quasi, das sind einfach RGBs.

00:35:14.642 --> 00:35:18.322
Man kann jetzt da nicht sagen, bitte geben wir die Farben im OKLCH raus.

00:35:21.102 --> 00:35:24.822
Dort musste ich dann halt ein Plugin schreiben, oder ich habe eins genommen

00:35:24.822 --> 00:35:26.142
und habe das ein bisschen noch erweitert.

00:35:27.762 --> 00:35:30.122
Mit noch ein paar Features mehr reingebastelt.

00:35:32.302 --> 00:35:38.022
Aber es ist, wenn man es zum ersten Mal sieht, wie es jetzt gebaut ist,

00:35:38.082 --> 00:35:42.342
zum Beispiel dieses Kontrast, also wenn ich jetzt sage ich einfach eine Farbe, dann sage ich einfach ja.

00:35:45.162 --> 00:35:49.822
OKLCH den Farbwert quasi Lightness,

00:35:50.902 --> 00:35:56.442
und dann Chroma und Hue, klar mit noch ein paar Modifier drin,

00:35:56.602 --> 00:35:59.262
dass ich sagen kann, ich will das jetzt ein bisschen dunkler haben oder ich

00:35:59.262 --> 00:36:00.482
will die Farbe ein bisschen heller haben.

00:36:00.842 --> 00:36:03.882
Also so Offset Modifier sind da noch dabei,

00:36:04.802 --> 00:36:09.622
und die Kontrastfunktion ist dann quasi ein bisschen ein Brainfuck,

00:36:09.702 --> 00:36:16.002
wo man sagt, ja, das ist, man nimmt die Clamp-Funktion, also es geht jetzt nur

00:36:16.002 --> 00:36:18.022
um die Luminanz zu bewerten,

00:36:18.842 --> 00:36:22.362
also die Chroma und die Hue werden in dem Sinn gar nicht angefasst,

00:36:22.982 --> 00:36:25.482
sondern man nimmt einfach diesen

00:36:25.482 --> 00:36:30.622
Lightness-Wert und macht da mit mehreren Variablen quasi, wo man dann,

00:36:31.102 --> 00:36:34.222
rumwirft und Clamp und und Calculation, und hast du nicht gesehen,

00:36:34.402 --> 00:36:38.962
hat man am Schluss dann diese Funktion, wo man sagen kann, gut, ähm,

00:36:41.336 --> 00:36:45.236
Wenn es die Farbe ist, dann wird die dunkel oder wird die hell.

00:36:46.056 --> 00:36:50.596
Und so geht das. Und das ist jetzt eben, wie gesagt, reines CSS.

00:36:53.316 --> 00:36:57.296
In dem Link, wo wir nachher eine Show noch posten werden, kann man sogar rumspielen.

00:36:57.996 --> 00:37:03.756
Da kann ich quasi sagen, ich will jetzt mit dem ganzen Bildschirm,

00:37:03.756 --> 00:37:07.256
der Hintergrund soll rot sein, und dann passe ich auf dem ganzen Bildschirm

00:37:07.256 --> 00:37:11.296
diese Farben an und mit den richtigen Kontrastfarben und so weiter und so fort.

00:37:11.616 --> 00:37:14.556
Das ist wirklich nice.

00:37:16.236 --> 00:37:20.776
Genau, und wie gesagt, man könnte das auch mit dem RGB versuchen zu erzeugen,

00:37:20.836 --> 00:37:26.596
aber es würde einfach nicht aussehen, weil der Farbraum einfach doof ist,

00:37:26.696 --> 00:37:31.376
weil der eben für Computer gemacht ist oder genau mathematisch korrekt ist,

00:37:31.436 --> 00:37:36.636
aber eben im Gegensatz zu diesen neuen Farbraumen nicht für uns Menschen optimiert ist.

00:37:39.996 --> 00:37:46.876
Genau. Und das ist also für mich vom Entwickeln her natürlich ein riesen Benefit,

00:37:46.936 --> 00:37:51.756
weil dann habe ich einfach die Deklaration, alle Farben deklariert.

00:37:52.716 --> 00:37:57.296
Ich mache das dann noch so, dass ich sage, ich habe quasi ein Attribut,

00:37:57.296 --> 00:38:02.356
Data minus Theme und dann sage ich Main, Minor oder nenn es Primary,

00:38:02.516 --> 00:38:03.576
Secondary, wie du willst.

00:38:04.316 --> 00:38:09.276
Und das sind dann in diesem Modify und setze ich dann einfach diese Variablen

00:38:09.276 --> 00:38:14.096
anders und dann steuere ich sie so vom Hero-Element, wo riesengroß ist,

00:38:14.176 --> 00:38:16.196
die Farben bis zum Button,

00:38:16.436 --> 00:38:21.116
wo ich jetzt nur ganz wenig steuere, kann man dann alles mit so einem Data-Attribut steuern.

00:38:22.216 --> 00:38:31.036
Durch das wird es dann nochmal sehr leicht zu handeln, so verschiedene Varianten von Buttons und so.

00:38:33.116 --> 00:38:41.836
Und mit diesen Kontrastfunktionen sind so Geschichten wie Ghost Buttons oder

00:38:41.836 --> 00:38:43.256
so auf einmal kein Thema mehr,

00:38:43.396 --> 00:38:49.476
weil du einfach diese Klassen zur Verfügung hast, die kannst du nehmen und fertig.

00:38:51.756 --> 00:38:56.096
Dann hast du halt noch so Extraklassen wie, ja, ich will jetzt die Farbe,

00:38:56.096 --> 00:38:59.196
ich will die ein bisschen dunkler oder ich will sie ein bisschen heller und

00:38:59.196 --> 00:39:03.476
das Spannende ist, wenn du auch selbst die verwendest, dann reagiert die Kontrastfarbe

00:39:03.476 --> 00:39:04.576
auch wieder richtig drauf,

00:39:04.716 --> 00:39:08.076
also das wird dann wie beachtet und das ist dann einfach sehr,

00:39:08.316 --> 00:39:12.636
ja, das macht es richtig angenehm, mit dem Thema zu arbeiten und davor war es

00:39:12.636 --> 00:39:15.736
halt wirklich häufig so ein bisschen anstrengend, Und vor allem,

00:39:15.756 --> 00:39:20.516
wenn du dann auf User-Generated-Colors zurückgreifen musst,

00:39:20.656 --> 00:39:24.056
wo du dann sagen musst, es könnte ja schon sein, dass dir was fehlt, was nicht so gut ist.

00:39:25.889 --> 00:39:30.769
Ja, das ist natürlich ein sehr gutes Argument, dass man darauf reagieren kann.

00:39:30.969 --> 00:39:36.109
Was ich ja auch, also ich weiß nicht, vielleicht weißt du da was,

00:39:36.169 --> 00:39:43.069
aber eigentlich ist es ja so, dass diese W3C, was war das, Accessibility Guidelines,

00:39:43.489 --> 00:39:48.229
dass die, die haben ja bestimmte Erfordernisse, was so Farbkontraste angeht,

00:39:48.229 --> 00:39:50.849
von zum Beispiel Text auf Hintergrund.

00:39:51.469 --> 00:39:57.709
Und da gibt es ja quasi einfach eine Formel, nach der man das ausrechnen kann.

00:39:57.969 --> 00:40:03.089
Und wenn das Kontrastverhältnis höher als X ist, ist gut und darunter ist doof.

00:40:04.669 --> 00:40:10.449
Und ich glaube, dass das mit den neuen Farbräumen aber ja nicht funktioniert,

00:40:10.769 --> 00:40:17.329
weil die ja eben nicht mathematisch korrekt sind, sondern die sind so modelliert,

00:40:17.329 --> 00:40:22.769
wie es für unser Sehen optimiert ist und dass diese Color-Contrast-Checker wahrscheinlich,

00:40:23.189 --> 00:40:29.309
also wenn er denn überhaupt mit solchen Farbmodellen und Farbräumen rechnen

00:40:29.309 --> 00:40:31.129
kann, das weiß ich gar nicht, ob es da überhaupt was gibt,

00:40:31.809 --> 00:40:38.049
aber ich kann mir vorstellen, dass die auch öfters mal dann sozusagen False-Negatives

00:40:38.049 --> 00:40:43.309
und auch False-Positives dann auswerfen, weil sie ... Aber ist das False?

00:40:43.709 --> 00:40:45.869
Weil du kannst ja nicht davon ausgehen,

00:40:45.869 --> 00:40:51.009
dass alle und jeder halt das entsprechende Device am Start haben.

00:40:51.409 --> 00:40:56.349
Also so Problembereich. Wir formulieren das alles ganz toll aus mit unseren

00:40:56.349 --> 00:41:01.349
Farbräumen und können irgendwie Dinge ausdrücken, die halt irgendwie vorher nicht möglich waren.

00:41:01.749 --> 00:41:04.769
Aber dann rücke ich halt mit dem alten Laptop an, den ich auf dem Dachboden

00:41:04.769 --> 00:41:09.389
gefunden habe. Genau, das ist dann eine Frage, wie das halt rückgerechnet wird nach RGB.

00:41:10.009 --> 00:41:13.549
Genau, das wird von den Browsern recht clever gemacht, macht,

00:41:13.589 --> 00:41:16.189
dass die dann einfach die nächstmögliche RGB-Farbe nehmen.

00:41:17.969 --> 00:41:20.369
Und das ist dann... Das habe ich gar nicht, irgendwelches Drama gelesen,

00:41:20.389 --> 00:41:22.649
dass das nicht so ohne weiteres überall funktioniert hat, korrekt?

00:41:23.389 --> 00:41:26.949
Ja, also ich sage auch, wenn du es wirklich ganz sauber machen willst,

00:41:27.069 --> 00:41:33.209
dann arbeite halt mit Supports, wo du quasi dann vom Bildschirm zurückkriegst,

00:41:33.269 --> 00:41:35.289
der unterstützt es oder der unterstützt es nicht.

00:41:36.709 --> 00:41:41.169
So quasi, wo du sagen kannst, ja, wenn der Bildschirm diesen Farbraum unterstützt,

00:41:41.189 --> 00:41:46.689
dann ist bei mir das Rot auf diese Art und Weise und sonst hast du halt den Default-Wert,

00:41:47.548 --> 00:41:51.648
Und natürlich so kannst du es ganz sauber machen. Aber es ist schon so,

00:41:51.708 --> 00:41:54.688
dass die das eigentlich machen müssten auf eine definierte Art und Weise.

00:41:54.968 --> 00:41:58.028
Also da müssten wir schon auf einen Bug-Tracker aufschlagen und uns beschweren

00:41:58.028 --> 00:42:00.508
und Workarounds bauen dann in zweiter Ordnung.

00:42:01.768 --> 00:42:07.088
Eigentlich ja. Eigentlich ja. Also es gibt, glaube ich, auch Farben,

00:42:07.088 --> 00:42:10.548
wo weniger heikel sind und andere sind wahrscheinlich ein bisschen heikler oder schwieriger.

00:42:12.928 --> 00:42:15.468
Zurückzurechnen, welche das jetzt mal am besten nehmen soll.

00:42:16.188 --> 00:42:18.668
Die sollen sich nicht anstrellen, die können JavaScript ausführen.

00:42:19.368 --> 00:42:22.848
Ja, sie sollen einfach über der Caller.js.io einbauen und fertig.

00:42:23.108 --> 00:42:27.768
Das ist also diese riesige Bibliothek, wo man ganz diese Berechnungen macht.

00:42:28.268 --> 00:42:31.008
Ganz ehrlich, das ist aber ironiefrei, weil ich meine, die kommen mit Unicode,

00:42:31.008 --> 00:42:34.088
klar, und ähnlichem Brimborium. Dann würde ich von denen eigentlich auch erwarten,

00:42:34.128 --> 00:42:36.088
dass die ihre Farben da korrekt geklemmt kriegen.

00:42:36.928 --> 00:42:39.608
Weil sobald das halt eben dafür einen etablierten Mechanismus gibt,

00:42:39.668 --> 00:42:43.728
wie das funktionieren soll, Dann können halt auch die Kontrastchecker entweder

00:42:43.728 --> 00:42:46.408
das Gleiche implementieren oder auf die entsprechenden Algorithmen zurückgreifen,

00:42:46.448 --> 00:42:48.748
die eh schon da sind und dann sind diese Antworten ja nicht falsch.

00:42:49.108 --> 00:42:52.108
Also weil das Falsch, das Shep ja da gerade in den Raum gestellt hat,

00:42:52.128 --> 00:42:56.208
scheint mir ja wirklich mehr so aus Bugs und fehlenden Features und falschem

00:42:56.208 --> 00:42:59.548
Verständnis zu kommen, weil die sollten ja schon in der Lage sein,

00:42:59.608 --> 00:43:02.268
einfach so zu gucken, passt das?

00:43:02.268 --> 00:43:04.288
Weil wenn du es hinrechnen kannst, kannst du es auch zurückrechnen,

00:43:04.348 --> 00:43:08.888
kannst du es auch umrechnen und kannst dann zumindest näherungsweise was sagen

00:43:08.888 --> 00:43:12.768
von wegen, das passt garantiert und das würde ich mir nochmal genauer angucken

00:43:12.768 --> 00:43:15.508
und dann vielleicht noch als dritte Kategorie, das geht auf gar keinen Fall.

00:43:16.328 --> 00:43:20.088
Aber irgendwie so zu sagen, ist halt kaputt, finde ich jetzt nicht besonders begeisternd.

00:43:20.188 --> 00:43:24.848
Das ist doch hinzukriegen. Also meine Tests, wo ich mit dem P3 rumgespielt habe,

00:43:24.968 --> 00:43:27.048
die waren eigentlich, muss ich sagen, es passt.

00:43:28.268 --> 00:43:31.828
Eben wenn jetzt eine Firma sagt, nein, wir wollen, wenn jetzt einer das nicht

00:43:31.828 --> 00:43:37.108
kann, muss dann genau diese rot sein, ja gut, dann muss es halt mit diesen Supports machen.

00:43:38.348 --> 00:43:43.488
Für mich war aber wirklich der größte Benefit, einfach diese Accessibility sichergestellt zu haben.

00:43:44.659 --> 00:43:47.819
Und so die Kontrast- Checker haben es ja eigentlich mit dem,

00:43:48.599 --> 00:43:53.399
OKLC, also mit den OK-Farbräumen sehr viel einfacher mit den Definitionen,

00:43:53.399 --> 00:43:56.319
weil die einfach nur eine Zahl nehmen müssen und sagen müssen,

00:43:56.499 --> 00:43:59.659
okay, der Text hat diese Zahl, der Hintergrund hat diese Zahl,

00:44:00.659 --> 00:44:01.899
wie verhält sich das so?

00:44:01.979 --> 00:44:06.659
Klar, wenn man jetzt Gradients noch einbaut, mit verschiedenen,

00:44:07.819 --> 00:44:10.759
dann wird es natürlich schwierig, da einen Kontrast herzustellen,

00:44:10.819 --> 00:44:13.619
logisch, also dort könnte man viel falsch machen.

00:44:15.199 --> 00:44:19.159
Ja, okay, aber das siehst du ja wirklich. Wir müssen ja sozusagen uns verteidigen

00:44:19.159 --> 00:44:22.079
gegen irgendwie die 20-Jährigen, die zu gute Augen haben.

00:44:22.599 --> 00:44:25.579
Das ist ja so. Und die würden ja auch bei dem Gradient merken,

00:44:25.639 --> 00:44:27.919
okay, das könnte kompliziert werden. Genau.

00:44:29.399 --> 00:44:37.119
Die Hoffnung an guten Geschmack. Nein, aber es ist durch das eigentlich sehr

00:44:37.119 --> 00:44:39.279
viel einfacher zu checken, ob das jetzt wirklich passt.

00:44:39.379 --> 00:44:43.379
Sogar du kannst eben diesen Farbwert, also der Browser zeigt dir an,

00:44:43.439 --> 00:44:47.799
was er ausgerechnet hat aufgrund von den Clamp und Variablen und weiß nicht

00:44:47.799 --> 00:44:49.679
was alles und da siehst du, okay, das passt.

00:44:52.239 --> 00:44:58.199
Und ja, das Feedback von den Kollegen, wo du sehr schlechte Augen hast,

00:44:58.279 --> 00:44:59.859
ist eigentlich schon sehr cool.

00:45:01.839 --> 00:45:04.319
Aber nochmal zurück. Ich habe das jetzt schon richtig verstanden,

00:45:04.359 --> 00:45:08.899
dass das Clamping-Problem in den heutigen Browsern stand jetzt gelöst ist und

00:45:08.899 --> 00:45:11.459
das, was ich gelesen habe, ist einfach veraltet?

00:45:13.779 --> 00:45:18.699
Das Clamping-Problem ist nicht gelöst. Was meinst du jetzt mit das Clamping-Problem genau?

00:45:19.679 --> 00:45:24.779
Also das Runterrechnen auf RGB, wenn das Device das nicht kann,

00:45:24.939 --> 00:45:28.479
dass das nicht einheitlich oder korrekt passiert.

00:45:28.699 --> 00:45:32.379
Das war so mein Kenntnisstand, dass es da große Varianzen gibt und teilweise

00:45:32.379 --> 00:45:35.099
sehr unerwünschte Ergebnisse und sehr hässliche Farben bei rauskommen.

00:45:35.739 --> 00:45:38.899
Ja, also ich kann mir nicht vorstellen, dass das schon alles gelöst ist.

00:45:39.279 --> 00:45:42.379
Müsste ich jetzt auch nachlesen, aber ich glaube, es ist noch nicht alles gelöst.

00:45:43.099 --> 00:45:48.919
Für mich war der Benefit vom OKLCH jetzt nicht mal eben, dass ich sagen kann,

00:45:49.039 --> 00:45:50.919
wow, ich kann die krassen Farben verwenden,

00:45:51.759 --> 00:45:57.279
sondern vielmehr, wow, ich habe endlich Accessibility-Klassen und Kontrast-Klassen

00:45:57.279 --> 00:46:01.219
automatisch und ich muss mich nicht mehr um das Zeug kümmern. Ich musste...

00:46:02.736 --> 00:46:06.616
Ich muss nicht mehr zwei Farben definieren, das ist die Textfarbe vom Button

00:46:06.616 --> 00:46:09.236
und das ist der Hintergrund, sondern ich setze nur noch den Hintergrund und

00:46:09.236 --> 00:46:10.416
der Rest ist automatisch.

00:46:11.636 --> 00:46:15.216
Diese Möglichkeit zu haben, ist eigentlich der große Benefit.

00:46:15.856 --> 00:46:18.756
Ja, das ist klar, aber dann müsstest du dich ja sozusagen, wenn du dann das

00:46:18.756 --> 00:46:20.956
Campingproblem lösen willst, dich irgendwie darauf beschränken,

00:46:21.036 --> 00:46:27.436
dass du dein Benefit da einfährst, während du in sozusagen dem sicheren Fahrwasser

00:46:27.436 --> 00:46:30.616
von RGB kompatibel bleibst. Genau.

00:46:31.536 --> 00:46:34.036
Weil ich meine, letztlich ist es ja sozusagen, sämtliche Skalen,

00:46:34.076 --> 00:46:36.536
die ja in diesen neuen Farbräumen und den neuen Farbmodellen definiert sind,

00:46:36.556 --> 00:46:41.216
sind ja sozusagen offen dahingehend, dass deren Maximalwerte tatsächlich ja

00:46:41.216 --> 00:46:42.796
außerhalb dessen liegen können.

00:46:42.996 --> 00:46:46.196
Das heißt, du hast ja schon einen irgendwie definierten Korridor,

00:46:46.216 --> 00:46:48.836
der ja, wie Shep immer so schön sagt, nicht mathematisch exakt definiert ist,

00:46:48.876 --> 00:46:51.556
sondern so Vibes mal Brute Force ist.

00:46:52.796 --> 00:46:53.996
Also wie hält man sich da drin?

00:47:21.556 --> 00:47:23.096
Was dabei rauskommt und ich, Ich weiß, dass jeder, der das sieht und jeder,

00:47:23.176 --> 00:47:25.016
mit dem ich reden muss, dass die das verstehen.

00:47:25.216 --> 00:47:27.876
Das ist halt der kleinste gemeinsame Nenner. Das ist die Normalspur bei der

00:47:27.876 --> 00:47:30.756
Eisenbahn, nur halt eben auf CSS bezogen. Weißt du?

00:47:31.076 --> 00:47:34.856
Genau. Eine bessere Welt ist denkbar, aber meine Güte ist das anstrengend, da hinzukommen.

00:47:35.256 --> 00:47:37.516
Ja gut, ich habe es dann so gemacht, dass ich einfach einen,

00:47:37.536 --> 00:47:42.236
ich habe dann einen Color Picker gebaut. Ich kann kurz mal da auch reinpasten.

00:47:44.596 --> 00:47:48.836
Wo ich dann gesagt habe, ja, ich bleibe in diesem RGB-Farbraum.

00:47:50.420 --> 00:47:55.720
Also quasi ist der Color Picker eigentlich ein RGB-Color Picker,

00:47:55.740 --> 00:47:59.680
was ich dann einfach mache, ich rechne das dann mit ColorJS,

00:47:59.820 --> 00:48:05.840
mit ein paar isolierten Funktionen rechne ich das dann in OKLCH und speichere es dann so ab.

00:48:06.680 --> 00:48:10.060
Und das ist eigentlich der Clou, weil ich auch sage, häufig ist es so,

00:48:10.120 --> 00:48:14.560
du kriegst irgendwelche NCI, wo es sagt, ja, wir haben diesen Hexfarbe oder

00:48:14.560 --> 00:48:17.820
wir haben diesen Wert und dann ist natürlich der Ansatz ja gut,

00:48:17.920 --> 00:48:19.840
dann kann ich das einfach in ein Inputfeld.

00:48:21.680 --> 00:48:25.120
Reinkopieren und dann wird das quasi gesetzt und man sieht es auch gleich und,

00:48:25.900 --> 00:48:32.400
war dann noch eine kleine Spielerei, auch automatisch noch einen Farbnamen rauszugeben,

00:48:34.220 --> 00:48:38.480
und Und so auch zu sehen, wie verhält sich das mit dem Kontrast.

00:48:38.540 --> 00:48:44.080
Also der Farbname wechselt dann zu weiß, wenn die Farbe dünkler wird.

00:48:45.160 --> 00:48:47.840
Und da hat er auch ein direktes Feedback zu haben.

00:48:49.380 --> 00:48:54.340
Und eben weil es jetzt nicht primär darum geht, dass der Kunde sagen kann,

00:48:54.420 --> 00:48:57.660
ja, ich kann jetzt die P3-Farben einsetzen, sondern vielmehr,

00:48:57.660 --> 00:49:00.860
wir sind einfach mit der ganzen Farbgeschichte, mit den Gradients,

00:49:00.860 --> 00:49:03.260
sehen anständiger aus, wenn wir welche verwenden,

00:49:03.820 --> 00:49:08.260
und vor allem diese Kontrastfarben, also das als sicher zu gehen,

00:49:09.200 --> 00:49:13.220
weil dann schon, da hat man eine Möglichkeit gehabt zu sagen,

00:49:13.300 --> 00:49:17.080
ich definiere dann die Farben und dann muss man das deployen und dann kann man sie auswählen.

00:49:17.560 --> 00:49:21.280
Aber dann wurde dann ein rosa gewählt und jetzt hat man eine Webseite mit einem

00:49:21.280 --> 00:49:26.560
rosa Hintergrund, mit weißem Text drauf und man kann das eigentlich als,

00:49:28.311 --> 00:49:32.271
Nicht mehr, also ein über 50-Jähriger hat wahrscheinlich sehr fest Mühe,

00:49:32.331 --> 00:49:37.531
das zu lesen. Und Leute, wo irgendwie eine Farbschwäche haben, steigen da völlig aus.

00:49:38.691 --> 00:49:45.851
Das wird dann jetzt mit dem System gar nicht möglich. Dann wird die Textfarbe einfach schwarz.

00:49:49.911 --> 00:49:54.651
Und wir bleiben im sicheren Korridor, damit nichts Verrücktes passiert.

00:49:55.671 --> 00:49:58.091
Genau, und ich glaube, das ist manchmal auch so eine Aufgabe,

00:49:58.211 --> 00:50:02.931
wenn ein Designer vergisst, dass es halt wichtig ist, einen Farbkontrast zu

00:50:02.931 --> 00:50:09.791
haben, dass wir da sagen können, hey, schau, die Farben sind einfach zu nah beieinander,

00:50:09.991 --> 00:50:13.411
da haben wir Probleme mit dem Kontrast.

00:50:15.531 --> 00:50:19.891
Weil ein Designer die Wahrscheinlichkeit, dass seine Augen gut sind,

00:50:19.991 --> 00:50:23.231
ist relativ hoch, sonst wäre es eine,

00:50:24.731 --> 00:50:27.351
Berufsverfehlung oder vielleicht wäre es ja sogar gut, wenn so Leute designen

00:50:27.351 --> 00:50:33.051
würden, aber wenn das Kontrastverhältnis nicht stimmt oder wenn halt man hat,

00:50:33.651 --> 00:50:37.191
grünen Text mit rot zusammen mit dem gleichen,

00:50:37.951 --> 00:50:42.091
Helligkeitswert, dann sieht halt jemand mit einer rot-grün-Schwäche sieht dann

00:50:42.091 --> 00:50:46.791
halt gar nichts mehr Ja, und mit so Tooling kannst du eigentlich das dann komplett

00:50:46.791 --> 00:50:48.051
verhindern, weil du sagst, ja, nein,

00:50:48.191 --> 00:50:54.371
du setzt nur die Hintergrundfarbe und die Textfarbe ist dann einfach, ist dann gegeben quasi.

00:50:56.131 --> 00:50:59.291
Naja, und das Problem ist natürlich nicht nur, haben die Designer potenziell

00:50:59.291 --> 00:51:02.471
gute Augen, sondern die haben ja vor allen Dingen auch die guten Devices.

00:51:02.911 --> 00:51:07.371
Das ist ja so ein bisschen das letztlich auch Entwicklerinnen- und Entwicklerproblem.

00:51:07.371 --> 00:51:10.531
Problem, wir machen ja nur so langsame Webseiten, weil wir die fetten Rechner

00:51:10.531 --> 00:51:12.111
und die dicken Internetleitungen haben.

00:51:12.191 --> 00:51:14.431
Wenn wir so drauf wären wie der Rest der Menschheit, würde das ja wahrscheinlich

00:51:14.431 --> 00:51:17.831
gar nicht entstehen, dass man sich den lieben Langtag lustig macht.

00:51:19.711 --> 00:51:26.131
Hat sicher was. Ja, die Frage, die ich halt hätte, ist so, also der Pitch ist mir klar.

00:51:27.191 --> 00:51:30.571
Irgendwie iPhones und ähnliches haben jetzt irgendwie Geräte,

00:51:30.651 --> 00:51:33.931
die diese ganzen neuen Farbräume auch können und die irgendwie viel mehr Farben

00:51:33.931 --> 00:51:37.631
darstellen können über die ganzen Schwierigkeiten Und mögliche Benefits haben wir ja gesprochen.

00:51:38.211 --> 00:51:42.151
Aber wie verbreitet ist denn das jetzt eigentlich wirklich? Also,

00:51:42.211 --> 00:51:46.211
das weiß ich jetzt nicht, ob du das weißt, aber ich meine so irgendwie in so

00:51:46.211 --> 00:51:47.851
Bildschirmstunden pro Mensch ausgedrückt.

00:51:47.991 --> 00:51:51.391
Also klar, ich habe vielleicht ein iPhone, aber auf Arbeit sitze ich halt irgendwie

00:51:51.391 --> 00:51:54.671
an so einem räudigen Thinkpad, wenn ich Glück habe. Wahrscheinlich ist es was Schlimmeres.

00:51:55.431 --> 00:52:00.811
Also, wie verbreitet ist denn das so auf so Non-Consumer-Devices? Gibt's das da?

00:52:00.931 --> 00:52:05.251
Haben irgendwie auch so Dell, Feldwald und Wiesen-Laptops das?

00:52:05.591 --> 00:52:10.131
Also, ich will sagen, wenn ich jetzt sozusagen wirklich den sicheren Korridor

00:52:10.131 --> 00:52:12.691
verlassen möchte und ich will irgendwie sagen, ich brauch das krasseste Rot

00:52:12.691 --> 00:52:16.431
von allen, wie viele Leute erreiche ich wirklich damit, wie viele sehen das

00:52:16.431 --> 00:52:20.231
am Ende tatsächlich bei einer gegebenen Zielgruppe?

00:52:20.251 --> 00:52:24.651
Kann man da irgendwie eine Idee von haben? Ich glaube, da kannst du es eigentlich mal...

00:52:27.380 --> 00:52:31.940
Beantworten, wenn du jetzt die Webseite anschaust, wo du berätst den Kunden,

00:52:32.060 --> 00:52:33.700
wie viel Mobilbenutzer er hat.

00:52:35.100 --> 00:52:39.140
Weil die Mobilgeräte das mal generell sehr wahrscheinlich schon können.

00:52:39.580 --> 00:52:45.640
Also jetzt im Europäischen... Auch so ein Budget Samsung-Teil? Oder ist das ja nicht so?

00:52:45.860 --> 00:52:51.780
Doch, weil der Fahrbrauch ist schon relativ lang verfügbar.

00:52:52.600 --> 00:52:57.460
Also jetzt da die, klar die Neuesten haben dann das HDI und weiß nicht was alles

00:52:57.460 --> 00:53:03.940
und dort ist die Frage mit den Refresh-Rates, dass die jetzt hochgeschraubt

00:53:03.940 --> 00:53:06.640
werden ohne Ende, dass das Scrolling extrem flüssig ist.

00:53:07.860 --> 00:53:12.920
Klar werden die Farben immer noch mal satter und besser, aber die Mobilgeräte

00:53:12.920 --> 00:53:15.880
sind eigentlich recht gut abgedeckt, wenn man das mal so sagen will.

00:53:16.740 --> 00:53:25.160
Und bei Tablets, bei Apple ist das eh kein Thema, generell.

00:53:26.900 --> 00:53:32.140
Ich glaube, die Tablets sind wahrscheinlich auch wie die Mobiltelefone.

00:53:32.140 --> 00:53:37.920
Ja, die Krütze-Tablets, wo ich gesehen habe, bei gewissen Leuten,

00:53:38.100 --> 00:53:42.600
ich habe einen Joghurt gekauft und mir wurde das Tablet geschenkt.

00:53:42.880 --> 00:53:49.480
Ah, Zeitungsabo-Tablets, alles klar. Ja, und das ist Vergewaltigung.

00:53:50.940 --> 00:53:56.340
Und das ist auch zum Bedienen so schlimm und so langsam. Also das fliegt ganz

00:53:56.340 --> 00:53:59.560
schnell gegen die Wand und dann schaust du einen Film drauf und die Farben sehen

00:53:59.560 --> 00:54:00.540
einfach so schlecht aus.

00:54:00.760 --> 00:54:06.220
Also dort ist natürlich, sagen wir es mal so, die Leute, wo Tablets wirklich

00:54:06.220 --> 00:54:11.080
benutzen, haben wahrscheinlich auch ein gescheites Tablet und dort ist es dann

00:54:11.080 --> 00:54:12.720
eigentlich auch gut verbreitet.

00:54:14.920 --> 00:54:18.160
Und bei den Devices normal ist es natürlich

00:54:18.160 --> 00:54:23.640
so, ja klar, so der Waldenwiesen-Sekretariat-Monitor Tor oder irgendein.

00:54:26.088 --> 00:54:30.168
Laptop ist wahrscheinlich noch weniger das Problem. Also die Dells und so weiter,

00:54:30.208 --> 00:54:33.008
die haben jetzt eigentlich auch schon, die haben eigentlich alle recht gut aufgeholt.

00:54:33.068 --> 00:54:37.588
Die mussten ja, weil Apple ja, die haben dort vorgeprescht und die anderen mussten

00:54:37.588 --> 00:54:39.508
sagen, ja, wir können das auch irgendwie.

00:54:40.108 --> 00:54:43.208
Also das ist ja immer natürlich immer das Katzenmaulspiel. Ich glaube so die,

00:54:43.268 --> 00:54:48.048
das En Gros an schlechten Monitoren sind genau die Monitore,

00:54:48.048 --> 00:54:51.488
wo auch die besten stehen, die stehen auf dem Schreibtisch. Also.

00:54:53.728 --> 00:54:57.048
Ist natürlich... Also nur so für die Idee. Also ich würde das mal zusammenfassen

00:54:57.048 --> 00:54:59.968
als irgendwie so das Marktsegment, dass das nicht kann, existiert.

00:55:00.548 --> 00:55:03.268
Aber das ist nicht automatisch relevant für einen. Das kommt halt darauf an,

00:55:03.308 --> 00:55:06.428
was für eine Art von Service man da am Ende anbieten möchte und für wen das gedacht ist.

00:55:06.808 --> 00:55:14.348
Genau. Also wenn man so sagt, wir wollen die krasseste aussehende mobile Webseite haben,

00:55:14.508 --> 00:55:18.868
dann ist es ja durchaus eine Idee, wenn man sozusagen einfach den Bonus abgreifen

00:55:18.868 --> 00:55:22.608
kann, den sonst keiner abgreift, nämlich wir holen aus dem Device die Farben

00:55:22.608 --> 00:55:26.668
raus, die halt die anderen nicht rausholen, weil die noch in RGB-Land festhängen.

00:55:26.668 --> 00:55:28.488
Also das kann man dann auch schon mal machen.

00:55:28.768 --> 00:55:34.028
Ja, völlig legitim. Und ja, ich muss jetzt auch bei mir sagen,

00:55:34.148 --> 00:55:39.168
ich habe jetzt bei mir einen recht guten Monitor gekauft, hochauflösend und so weiter und so fort.

00:55:39.988 --> 00:55:42.808
Und das ist für mich das Device,

00:55:43.068 --> 00:55:47.428
wo ich sage, das war die sinnvollste Investition, da zu sagen,

00:55:47.508 --> 00:55:50.808
ich haue wirklich ein paar Tausender hin und kaufe mir was Gescheites,

00:55:50.928 --> 00:55:55.268
weil ich sitze jeden Tag mit den Augen davor und es ist so ein Unterschied,

00:55:55.268 --> 00:56:01.048
ob die dir die Augen wehtun oder ob du sagst, ja gut, es passt.

00:56:01.448 --> 00:56:08.628
Also der Unterschied von einem wirklich guten Monitor zu so einem billigen Monitor,

00:56:08.768 --> 00:56:12.008
das ist so massiv, kann ich jedem nur empfehlen.

00:56:13.108 --> 00:56:17.268
Ich habe jetzt mal aus Spaß bei Notebook-Check geguckt.

00:56:17.348 --> 00:56:22.008
Die prüfen halt auch immer die Bildschirme ab und sagen dann auch,

00:56:22.148 --> 00:56:27.648
wie viel Prozent von welchem Farbraum ist dieses Display in der Lage abzudecken

00:56:27.648 --> 00:56:31.208
oder von welchem Farbraum genau.

00:56:31.768 --> 00:56:35.308
Und ich habe jetzt mal hier einfach so das erste Notebook mir rausgegriffen.

00:56:35.368 --> 00:56:37.228
Das ist ein Lenovo ThinkPad.

00:56:37.568 --> 00:56:40.388
Also so ein bisschen so das, was du gerade ansprachst.

00:56:41.968 --> 00:56:46.908
Also wir haben ja gelernt, sRGB ist ja der Farbraum, der alte Farbraum,

00:56:46.928 --> 00:56:48.548
in dem sich so alles abspielt.

00:56:48.608 --> 00:56:52.728
Da schafft dieses Ding 64 Prozent von abzudecken nur.

00:56:54.908 --> 00:56:59.208
Und P3 43 Prozent. Ah, das ist ja gar nicht mal so gut.

00:56:59.948 --> 00:57:02.948
Nee, genau. Also, ja, es ist halt so Hit and Miss, ne? Also,

00:57:02.988 --> 00:57:10.528
es gibt einfach Hersteller, die hängen sich da echt rein und hauen da richtig gute Displays raus.

00:57:11.808 --> 00:57:13.128
Und dann gibt's eben auch die anderen.

00:57:14.836 --> 00:57:17.936
Ja, aber sagen wir so, das ist ja auch eine wichtige Erkenntnis,

00:57:17.956 --> 00:57:21.296
weil was der John ja vorhin schon sagte, ist halt, man kann sich im Prinzip

00:57:21.296 --> 00:57:25.756
aus diesem Tool letztlich, dieser neuen Farbnotation mit angehängtem Farbraum,

00:57:25.796 --> 00:57:28.736
ja mehrere Features rausgreifen, die man dann nutzen möchte.

00:57:28.736 --> 00:57:31.916
Und dann kann man ja das tatsächlich moderieren, je nachdem,

00:57:31.936 --> 00:57:35.176
wenn ich jetzt wirklich was für die Consumer machen möchte, die wirklich alle

00:57:35.176 --> 00:57:38.696
mit einem möglicherweise fancy Mobilgerät anrücken, dann gehe ich da vielleicht

00:57:38.696 --> 00:57:40.636
wirklich all in im Vergleich zu,

00:57:40.776 --> 00:57:44.896
ich rendere Tabellen raus für die Verwaltungsfachangestellten.

00:57:44.896 --> 00:57:48.796
Ja, und ich finde, was man davon auch mitnehmen kann, ist ja,

00:57:48.916 --> 00:57:55.916
dass das Problem ja theoretisch dann auch für die althergebrachten Farbmodelle,

00:57:55.996 --> 00:57:57.496
also wenn man die einsetzt, gilt,

00:57:57.676 --> 00:58:03.516
weil wenn so ein Bildschirm sRGB nur zu 64 Prozent abdeckt, dann müsste der

00:58:03.516 --> 00:58:08.636
ja auch an irgendwelchen Ecken dieses Farbraums Dinge abschneiden.

00:58:09.616 --> 00:58:12.336
Ja, und eigentlich muss es ja noch weitergehen. Eigentlich muss ich ja sagen,

00:58:13.976 --> 00:58:16.036
also, dass es so krass ist, hätte ich jetzt auch nicht gedacht,

00:58:16.176 --> 00:58:20.896
aber da ist ja das richtige Kontrastverhältnis zu haben, noch mal wichtiger.

00:58:22.736 --> 00:58:25.156
Also, wenn du jetzt das runterbrichst, ich habe einen Monitor,

00:58:25.316 --> 00:58:31.756
der nur schwarz oder weiß kann, was ja der schlechteste Monitor ist per se, wenn man so will.

00:58:32.496 --> 00:58:34.996
Ja, wenn er noch weiß kann, zumindest kontraststark.

00:58:36.056 --> 00:58:38.996
Und du hast ist der Kontrast dann wichtig.

00:58:40.296 --> 00:58:44.316
Mein erster Monitor konnte nur grün, also das weiß ich noch. Ah, cool.

00:58:45.236 --> 00:58:48.776
Wie ist das? Weißt du noch die Abkürzung? Ist das dann EGA gewesen?

00:58:49.616 --> 00:58:51.556
Oh, das weiß ich nicht mehr. Weißt du noch nicht mehr, ne?

00:58:52.596 --> 00:58:56.376
Ah ja, hier so. Wenn man noch so hässliche, feste Paletten hat und man nur die

00:58:56.376 --> 00:59:00.156
Wahl hat zwischen irgendwie Pest, Cholera und Fußpilz, weil alles irgendwie kacke aussieht.

00:59:00.836 --> 00:59:02.956
Genau. Ich glaube, das ist EGA.

00:59:04.376 --> 00:59:05.836
Beim Welt ist kleinere übel.

00:59:08.050 --> 00:59:09.990
Naja, aber ich meine, das sagt dann ja auch schon die Alltagserfahrung,

00:59:10.010 --> 00:59:12.490
wenn man irgendwie mal sich so sagt, so, ich upgrade jetzt von einem zu zwei

00:59:12.490 --> 00:59:16.790
Monitoren oder von N auf N plus 1 und man kauft sich irgendwie einen neuen und

00:59:16.790 --> 00:59:19.550
stellt den neben die alten, dann ist man ja erstmal am Verzweifeln.

00:59:20.030 --> 00:59:23.350
Also selbst wenn man da irgendwie bessere kauft, jetzt nicht vielleicht irgendwie

00:59:23.350 --> 00:59:26.990
die Luxusklasse, sondern einfach nur welche, die halt jetzt nicht der letzte

00:59:26.990 --> 00:59:30.310
offensichtliche Schrott sind, schon da merkt man ja, wie unterschiedlich die

00:59:30.310 --> 00:59:33.310
sind und dann hast du noch so Sachen wie irgendwie den Betrachtungswinkel und was nicht alles.

00:59:34.350 --> 00:59:37.450
Also da hilft halt tatsächlich, was du schon sagtest, schon nur halt eben ordentlich,

00:59:38.170 --> 00:59:40.870
Zuschläge auf die Kontrastwerte, weil man halt eben nicht weiß,

00:59:40.890 --> 00:59:43.270
mit was für einer räudigen Karotte die Leute da anrücken.

00:59:43.850 --> 00:59:45.590
Also am besten immer Triple A.

00:59:46.790 --> 00:59:52.590
Immer WeCac Triple A Standardversuchung zu erfüllen, dann...

00:59:52.590 --> 00:59:56.950
Ja, das muss halt relativ sein, weil du das eben auch noch abhängig hast von

00:59:56.950 --> 01:00:00.370
der Person und ihren Augen, die da vorsitzt und dem Device, mit dem die da am Start sind.

01:00:00.590 --> 01:00:03.490
Das kann eigentlich nicht kontrastreich genug sein, weil du nicht weißt,

01:00:03.570 --> 01:00:05.130
wie schlimm die Umstände werden können.

01:00:05.290 --> 01:00:07.170
Du kannst Kannst halt irgendwo deinen Cut-Off-Point definieren,

01:00:07.210 --> 01:00:10.470
wenn du sagst, ich bin so ein Consumer und die geben mir eh kein Geld,

01:00:10.550 --> 01:00:11.230
die kann ich ignorieren.

01:00:11.730 --> 01:00:15.390
Aber keine Ahnung, bist du die Rentenkasse oder die Versicherung oder so,

01:00:15.390 --> 01:00:16.230
dann willst du das vielleicht nicht machen.

01:00:16.450 --> 01:00:19.950
Ja, aber weißt, das habe ich jetzt wirklich, wir haben jetzt vor ein paar Monaten

01:00:19.950 --> 01:00:24.650
hatte ich eine Sitzung bei einem Kunden, die haben sich immer zeitlang ein bisschen

01:00:24.650 --> 01:00:26.190
gewehrt gegen ein anständiges UX.

01:00:27.150 --> 01:00:31.570
Aber wenn du dann genau, also ich bin da mit ähnlichem Argument aufgetreten,

01:00:32.410 --> 01:00:35.130
dann habe ich gesagt, was bringt dir das, wenn das jetzt die Farbe hat,

01:00:36.210 --> 01:00:39.730
und das ist vielleicht wunderschön und das ist egal, ob du recht hast oder nicht.

01:00:39.870 --> 01:00:44.150
Wenn es der Benutzer nicht lesen kann, dann ist es einfach für die Katz,

01:00:44.150 --> 01:00:47.910
dann hat die Webseite nicht ihren Zweck erfüllt.

01:00:48.370 --> 01:00:54.770
Und die Webseite ist ja, der Zweck ist eigentlich, ich will Inhalt übermitteln, Punkt, aus.

01:00:54.970 --> 01:01:00.730
Und in jeglichen sinnvollen und unsinnvollen Variationen, die es halt da draußen

01:01:00.730 --> 01:01:04.350
gibt, aber das ist ja der Sinn und Zweck von jeder Webseite schlussendlich.

01:01:06.761 --> 01:01:09.541
Ja, das stimmt. So sieht's aus.

01:01:11.241 --> 01:01:18.281
Ich hab noch was zu, du hast es vorhin einmal kurz erwähnt, High Dynamic Range, also HDR, ne?

01:01:19.941 --> 01:01:26.441
Und zwar hab ich mal ausgetauscht mit dem Chris Lilley, der da so relativ viel macht.

01:01:26.801 --> 01:01:34.541
Und ich hab auch einfach lange gebraucht, um eben so diese Sachen zu kapieren,

01:01:34.541 --> 01:01:39.861
dass es irgendwie, es gibt halt eben Farbräume und Farbmodelle und ich habe auch lange gedacht,

01:01:40.061 --> 01:01:45.521
dass Wide Gamut, also so nennt sich das auf Englisch, diese Farbräume mit eben

01:01:45.521 --> 01:01:51.501
mehr Umfang, ich habe auch immer gedacht, dass das dann natürlich auch bedeutet,

01:01:51.701 --> 01:01:58.961
dass man viel hellere Farben ausgeben kann als eben bei RGB.

01:02:00.001 --> 01:02:04.841
Und stellt sich heraus, also Chrisley meinte, nee, das ist es nicht.

01:02:05.021 --> 01:02:08.921
Also man muss sich das so vorstellen, dass eben White Gamut,

01:02:09.081 --> 01:02:13.381
so wie der Name schon sagt, das ist einfach nur quasi ein breiterer Fächer an Farben.

01:02:14.981 --> 01:02:19.561
Aber es gibt nicht mehr Helligkeit oder so was dadurch. durch.

01:02:19.841 --> 01:02:24.481
Und daran arbeiten die aber jetzt. Also es gibt gerade auch in der Working Group,

01:02:25.821 --> 01:02:28.341
Bestrebungen, High Dynamic Range auch ins Web zu bringen.

01:02:28.421 --> 01:02:31.801
Und das ist dann eher das dann quasi verglichen mit, das eine geht halt in die

01:02:31.801 --> 01:02:35.901
Breite und dann High Dynamic Range ist dann das, was wir haben,

01:02:36.001 --> 01:02:39.581
dann quasi wie hoch geht das? Also quasi die andere Richtung.

01:02:41.421 --> 01:02:45.161
Genau und bin gespannt, was daraus wird.

01:02:45.301 --> 01:02:50.001
Ich hab den Link mal rausgesucht. sucht zu denen.

01:02:51.561 --> 01:02:54.581
Hast du denn zufälligerweise auch einen Link zu deiner Notebook-Webseite,

01:02:54.621 --> 01:02:58.141
die mir direkt mal sagen kann, was das Ding damit anfangen würde? Ja, das war...

01:02:59.190 --> 01:03:05.070
Notebookcheck.com Die lesen halt auch Gadget-Kram mittlerweile ganz viel und so.

01:03:05.550 --> 01:03:08.310
Ich weiß, ich versuche doch nur zu trollen. Ach so.

01:03:10.770 --> 01:03:14.970
Also du wolltest trollen, was die Laptops sozusagen, ja, keine Ahnung,

01:03:15.030 --> 01:03:17.770
vielleicht sind die was hat der hier, der nicht rausgesucht hat,

01:03:17.790 --> 01:03:19.190
was hat der für eine maximale Helligkeit?

01:03:19.370 --> 01:03:24.790
Das kann ja schon sein, dass der hell ist und nur wenig Farben zeigt. Das stimmt.

01:03:27.030 --> 01:03:31.710
Da. Okay. Also Helligkeit ist leider auch nicht toll bei dem.

01:03:32.850 --> 01:03:38.350
Also das sind so, also der bleibt unter 300 Candela pro Quadratmeter.

01:03:38.470 --> 01:03:44.190
Und also du brauchst ja mindestens 400 und das ist dann auch noch nicht sensationell.

01:03:44.710 --> 01:03:49.810
Und HDR, glaube ich, da gibt es ja dann irgendwie die Stufe 600 und 1000.

01:03:51.310 --> 01:03:57.710
Genau, also bei den Apple Displays ist es ja so, dass das nur wirklich bei dieses

01:03:57.710 --> 01:04:01.210
HDR-Feature, wenn man so will, wird wirklich bei Videos aktiviert.

01:04:01.310 --> 01:04:04.990
Man merkt es auch richtig, wenn man ein Video anmacht. Ich habe zum Beispiel

01:04:04.990 --> 01:04:08.970
meine Nichten vor zwei Jahren den Snowboard beigebracht und dann gefilmt.

01:04:09.930 --> 01:04:15.650
Und bei der iPhone-Aufnahme im Rohmaterial knallt es richtig,

01:04:15.730 --> 01:04:17.990
das weiß und blendet dich förmlich.

01:04:18.470 --> 01:04:24.670
Und die damalige 360-Grad-Kamera konnte das noch nicht in HDR aufnehmen.

01:04:25.170 --> 01:04:29.390
Und das knallt dann nicht so. Also es ist weniger breit aufgenommen, klar.

01:04:31.130 --> 01:04:34.210
Es gibt natürlich auch Tools für Apple-Geräte, wo du sagen kannst,

01:04:34.350 --> 01:04:38.530
ich fake das dem Video vor oder dem Bildschirm vor, dass das jetzt ein Video-Inhalt

01:04:38.530 --> 01:04:41.990
ist, dass du quasi die Helligkeit dermassen hochschrauben kannst,

01:04:42.170 --> 01:04:44.770
dass dein Bildschirm doppelt so hell ist wie normal.

01:04:48.170 --> 01:04:49.370
Ja, geht natürlich.

01:04:50.927 --> 01:04:56.647
Macht anscheinend auch den Bildschirm nicht kaputt. Das würde ich jetzt aber nicht ausprobieren.

01:04:57.627 --> 01:05:00.467
Bin ich dann eher der, der sagt, gut, dann mache ich mir Vorhänge dran,

01:05:00.607 --> 01:05:01.487
wo ein bisschen abdunkeln.

01:05:02.587 --> 01:05:07.727
Ja, ich glaube, die strecken dann im Prinzip einfach die Helligkeitswerte,

01:05:07.727 --> 01:05:12.267
die halt aufgenommen wurden, hoch auf HDR.

01:05:12.427 --> 01:05:16.227
Aber dadurch hast du ja nicht mehr sozusagen Zwischenauflösung.

01:05:16.227 --> 01:05:21.327
Also das ist dann quasi einfach gefaktes HDR.

01:05:21.847 --> 01:05:25.907
Ja klar, das Interface hat nicht mehr Farben in dem Moment.

01:05:26.867 --> 01:05:32.867
Bei einem Video merkst du schon, dass du mehr siehst. Also dass es mehr Informationen

01:05:32.867 --> 01:05:34.267
gibt, das siehst du dann schon.

01:05:34.447 --> 01:05:38.147
Also wenn du jetzt einen Film schaust ohne HDR oder mit HDR,

01:05:38.307 --> 01:05:39.347
das siehst du schon einen Unterschied.

01:05:39.747 --> 01:05:43.907
Also quasi Details in dunklen Bereichen, Details in erhellen Bereichen und die

01:05:43.907 --> 01:05:47.947
sonst quasi einfach so ausbluten oder überstrahlen oder sowas.

01:05:49.267 --> 01:05:56.807
Ja. Bei den neuen iPads, die mit dem M2, da haben sie ja quasi zwei OLED-Displays genommen.

01:05:57.047 --> 01:06:00.567
OLEDs können ja auch so punktuell schon ziemlich hell werden.

01:06:00.667 --> 01:06:02.907
Und die haben mal zwei davon genommen und übereinander geklebt,

01:06:02.927 --> 01:06:10.167
die dann quasi beide gleichzeitig arbeiten, um die maximale Helligkeit eben noch mal zu steigern.

01:06:10.687 --> 01:06:12.567
Ist auch sehr abgefahren.

01:06:13.307 --> 01:06:14.667
Ist völlig crazy, ja.

01:06:16.087 --> 01:06:18.647
Also, ich finde die Dinger wirklich geil. Ich habe einfach gesagt,

01:06:18.827 --> 01:06:22.607
ja, der Price-Tag ist für meinen Verwendungs-Tag ein bisschen hoch.

01:06:23.867 --> 01:06:27.427
Ja, aber im Dell XPS kannst du das jetzt auch bestellen.

01:06:27.547 --> 01:06:30.507
Das ist wahrscheinlich irgendein Zulieferer, der hat halt, so wie das immer

01:06:30.507 --> 01:06:33.787
so ist, wie bei den Auto-Zulieferern, so guck mal hier, wir haben diese tolle

01:06:33.787 --> 01:06:37.547
Kupplung, jetzt wollt ihr die einbauen bei euch in eure Autos. Oh ja, machen wir.

01:06:38.187 --> 01:06:42.707
Und so hat das wahrscheinlich irgendein Display-Hersteller sich ausgedacht,

01:06:42.747 --> 01:06:44.307
wahrscheinlich irgendwie LG oder so.

01:06:46.067 --> 01:06:50.367
Und Apple hat es dann gekauft und Dell hat auch auf den Bestellbutton gedrückt.

01:06:53.247 --> 01:06:55.767
Genau, aber können wir im Web jetzt noch nicht so viel mit anfangen,

01:06:55.807 --> 01:06:58.967
außer wir haben ein Video eingebettet.

01:06:59.467 --> 01:07:02.667
Naja, und ich glaube, was wir dann auch mitnehmen können, ist,

01:07:02.687 --> 01:07:07.247
glaube ich, so ein bisschen die Idee von, das Web vielleicht auch weniger monolithisch

01:07:07.247 --> 01:07:12.067
zu betrachten, als der Begriff das so nahe legt, weil,

01:07:12.827 --> 01:07:16.107
was wir ja vorhin schon so sagten, mit den Farbräumen auf den diversen Devices,

01:07:16.147 --> 01:07:21.467
wer unterstützt was, gibt es dann ja doch sozusagen mehrere Webs oder mehrere Sektoren da drin,

01:07:22.167 --> 01:07:26.247
die man da unterschiedlich angehen muss und von denen man unterschiedlich viel

01:07:26.247 --> 01:07:30.147
erwarten darf, von den Devices, die dieses, die Weißen, von den Devices,

01:07:30.147 --> 01:07:32.687
die diese Sektoren bedienen.

01:07:33.767 --> 01:07:38.147
Ja, es ist halt so wie mit den verschiedenen, mit den Myriaden an Auflösungen,

01:07:39.227 --> 01:07:44.187
die stehen im Prinzip sinnbildlich auch für die ganzen anderen Qualitäten der

01:07:44.187 --> 01:07:45.847
Displays, mit denen man so zu tun hat.

01:07:47.267 --> 01:07:50.507
Ja, und das sind ja alles Dinge, die muss man ja nicht machen.

01:07:51.863 --> 01:07:55.983
Also man kann ja hin sagen, ich baue hier was und das ist halt nur für Mobile

01:07:55.983 --> 01:07:58.423
und Desktop-Leute haben halt verloren oder umgekehrt.

01:07:58.543 --> 01:08:01.283
Und man kann einen Dark Mode machen und das ist sicherlich cool,

01:08:01.403 --> 01:08:06.023
aber wenn man einfach absolut keine Zeit hat, dann kann man es halt so hinlassen.

01:08:06.023 --> 01:08:09.703
Genau, was du ja auch machen kannst, also was der John macht,

01:08:09.863 --> 01:08:13.903
und das kannst du ja eigentlich dennoch machen, ist, dass du einfach sagst,

01:08:13.943 --> 01:08:17.823
ich nehme diesen Farbraum und mache mir aber nur die Tatsache zu Nutze,

01:08:17.883 --> 01:08:20.463
dass er eben nach dem menschlichen Sehen modelliert ist,

01:08:20.583 --> 01:08:26.023
aber ich bewege mich nicht weiter raus in diesem Farbraum als das,

01:08:26.103 --> 01:08:29.783
was RGB auch im Grunde bietet.

01:08:30.383 --> 01:08:35.603
Und dennoch nutze ich diese Fähigkeit und habe da schon einen Vorteil durch.

01:08:36.843 --> 01:08:40.243
Genau, das kannst du machen. Und dann kannst du halt, wenn deine Arbeitsumgebung

01:08:40.243 --> 01:08:42.983
mitgeht, kannst du da so ein algorithmisches Modell drüber stülpen,

01:08:43.063 --> 01:08:45.643
das so Sachen macht wie die Kontrastfarben automatisch.

01:08:45.723 --> 01:08:51.083
Also wenn du halt weißt, dass dir nicht der tyrannische Mittelstand persönlich

01:08:51.083 --> 01:08:54.443
reinregiert und dich benutzt wie einen Textmarker, dann geht das.

01:08:55.063 --> 01:08:57.383
Den Luxus haben ja nicht alle, manchmal ist das halt so.

01:08:58.483 --> 01:09:00.923
Aber so kann man es halt eben hoch eskalieren. Aber ich glaube,

01:09:00.963 --> 01:09:03.283
das Wichtige ist halt jetzt wirklich auch so, dass man jetzt nicht irgendwie

01:09:03.283 --> 01:09:05.843
Farbform kriegen muss, sondern wirklich das wahrnehmen kann,

01:09:06.023 --> 01:09:08.823
als irgendwie, das sind nette Werkzeuge, mit denen ich mir das Leben leichter

01:09:08.823 --> 01:09:10.923
oder mein Produkt krasser machen kann oder beides.

01:09:12.223 --> 01:09:16.343
Also ich kann mir vorstellen, dass vielleicht so für coole Marketing-Seiten, da kann man doch die.

01:09:18.443 --> 01:09:23.623
Farbraumkanone draufhalten, oder? Ja. Kommt drauf an, was dein Failure-Mode beim Clamping ist, ne?

01:09:23.683 --> 01:09:27.303
Wenn du irgendwie das knalligste Rot hast, aber du weißt halt irgendwie auf

01:09:27.303 --> 01:09:31.163
dem keine Ahnung, letzten Samsung-Flex-Schiff. Ja, aber der CEO hat ja eh ein

01:09:31.163 --> 01:09:32.823
iPhone, also da ist doch alles okay.

01:09:33.023 --> 01:09:35.763
Der guckt sich das nur auf seinem iPhone an, da muss es gut aussehen.

01:09:36.323 --> 01:09:40.963
Achso, also gleich eines einem zwei iPad gestapelten OLED-Displays fährst du

01:09:40.963 --> 01:09:45.143
auch eine zweifach gestapelte Marketingkampagne, wo du vor allen Dingen einen

01:09:45.143 --> 01:09:49.603
Sektor bedienst, der aus einer Person besteht und der Rest ist vielleicht ein Nebengebung,

01:09:49.743 --> 01:09:52.183
wenn es überhaupt funktioniert. Das sind ja die, die Geld haben, oder?

01:09:54.123 --> 01:09:57.123
Das ist die spannende Zielgruppe, sehr lustig.

01:09:58.423 --> 01:10:02.263
Was dann sicher noch später kommt, sind diese Farbfunktionen,

01:10:02.263 --> 01:10:05.023
Color Mix und was es da nicht alles gibt.

01:10:05.183 --> 01:10:09.843
Oder dass ich eben sagen kann, OKLCH, From und dann kann ich sogar eine Hexcolor

01:10:09.843 --> 01:10:12.103
eingeben und jetzt will ich nur die Luminanz ändern.

01:10:12.743 --> 01:10:19.143
Also das, was ColorJS.io häufig macht oder wo man es händisch ausrechnet,

01:10:19.683 --> 01:10:21.223
wird dann alles sehr viel einfacher.

01:10:21.923 --> 01:10:26.243
Das ist dann schon nochmal nice. Aber das wird wahrscheinlich noch ein Jahr

01:10:26.243 --> 01:10:30.563
dauern, bis man es dann breit in den Browsern überall benutzen kann. Ja.

01:10:31.203 --> 01:10:35.363
Momentan hängt da, ich glaube, der Firefox hängt da ein bisschen hinterher.

01:10:36.463 --> 01:10:41.143
Zwecks fehlender Manpower. Ja, genau. Also Color Mix können doch alle,

01:10:41.223 --> 01:10:42.463
oder? Bin ich da falsch informiert?

01:10:43.963 --> 01:10:47.503
Ich glaube, Color Mix, genau, das ist jetzt so angekommen. Ich glaube,

01:10:47.503 --> 01:10:49.243
es hat auch länger gedauert im Firefox.

01:10:49.643 --> 01:10:54.683
Dann ist es die Relative-Color-Syntax.

01:10:55.083 --> 01:10:58.343
Die Relative-Color-Syntax. Und das ist ja genau der Punkt.

01:10:58.943 --> 01:11:00.543
Die ist glaube ich noch nicht überall, oder?

01:11:02.243 --> 01:11:08.403
Also einfach Color, Klammer auf und dann From, glaube ich. Genau.

01:11:09.023 --> 01:11:13.983
Da weiß ich gerade aber auch nicht genau, ob da der Firefox das jetzt kann oder nicht.

01:11:16.763 --> 01:11:18.383
Da war es gerade. Moment.

01:11:22.283 --> 01:11:25.283
Hm, sieht aber auch gut aus. Du wolltest gerade sagen.

01:11:26.603 --> 01:11:31.023
Wobei, nee, also RelativeColor, okay. Also RelativeColor-Syntax ist momentan

01:11:31.023 --> 01:11:33.423
im Nightly drin. Also ist noch nicht im Stable.

01:11:35.183 --> 01:11:40.163
Aber bald. Ja, nun, demnächst. Genau.

01:11:40.303 --> 01:11:44.543
Was ich, glaube ich, ganz cool fände, du hast ja, glaube ich,

01:11:44.543 --> 01:11:50.183
auch gerade gesagt, Peter, dass es cool wäre, mal so zu schauen in the wild.

01:11:50.183 --> 01:11:52.203
Gibt es da schon Projekte, die das einsetzen.

01:11:53.223 --> 01:11:56.943
Aber, also ich kenne auch keins. Und man sieht denen das, aber ich glaube,

01:11:56.983 --> 01:12:02.803
man ist auch nicht immer so ganz offensichtlich, wenn eine Webseite das macht,

01:12:03.503 --> 01:12:06.743
dass ich sofort dann sage, ah, guck mal hier und dann in den Quelltext gucke.

01:12:06.823 --> 01:12:09.183
Deswegen vielleicht der Aufruf an unsere Hörerinnen und Hörer,

01:12:09.863 --> 01:12:15.523
wenn ihr irgendwelche solche Seiten kennt oder ihr die gebaut habt oder eure Agentur oder Firma,

01:12:16.843 --> 01:12:19.663
dann wären wir drei, glaube ich, auch sehr interessiert daran,

01:12:20.863 --> 01:12:22.143
uns die mal anzuschauen.

01:12:23.343 --> 01:12:25.223
Und ich wäre sehr interessiert an so den,

01:12:27.363 --> 01:12:29.003
Implementierungserfolgsgeschichten. Also wenn ihr das einsetzt,

01:12:29.043 --> 01:12:31.223
welche Hürden habt ihr wie erklommen?

01:12:33.742 --> 01:12:36.862
Ich weiß genau, was ich gemacht hatte. Ich hatte nämlich auch gedacht,

01:12:37.022 --> 01:12:40.362
ah cool, hier die tollen neuen Farben, von denen ich den Java-Entwicklerinnen

01:12:40.362 --> 01:12:42.922
und Entwicklern auf den Konferenzen immer erzähle. Jetzt baue ich mal eine Webseite,

01:12:42.982 --> 01:12:43.902
jetzt setze ich die selber ein.

01:12:44.742 --> 01:12:47.782
Ah, okay, ich will ein User-Interface bauen, wo ein Farbpicker drin ist.

01:12:49.982 --> 01:12:51.782
War ich dann relativ schnell wieder einfach

01:12:51.782 --> 01:12:56.062
bei RGB, einfach weil die Cost-Benefit-Analyse mir halt eben sagte,

01:12:56.242 --> 01:12:59.762
du kannst einfach ein Input-Type Color nehmen und das funktioniert und das wird

01:12:59.762 --> 01:13:02.562
immer funktionieren und du brauchst nicht irgendwie 13 und die Pendancies installieren

01:13:02.562 --> 01:13:05.622
und dann musst du dich auch um diesen ganzen anderen Krempeln mit Clamping und so nicht kümmern.

01:13:05.822 --> 01:13:08.942
Ja, was ist denn das Input-Type, Carla? Kann man den was, wo ist denn hier,

01:13:09.002 --> 01:13:13.442
wo sind denn die Bestrebungen, den um andere Farbräume zu erweitern? Keine Chance.

01:13:13.982 --> 01:13:16.982
Also da gibt es tatsächlich Diskussionen zu, das zu machen und die Diskussionen

01:13:16.982 --> 01:13:21.082
werden beendet mit, wir sind das Web, wir laufen auf allem, wir laufen auf deinem

01:13:21.082 --> 01:13:22.822
Kühlschrank und auf deinem iPad M2

01:13:23.202 --> 01:13:27.362
und weil der Kühlschrank halt eben nicht zwei OLED-Displays übereinander stapelt

01:13:27.362 --> 01:13:29.102
oder wenn, kann man davon nicht ausgehen,

01:13:29.542 --> 01:13:33.122
macht das halt eben den kleinsten gemeinsamen Ender. Das ist halt Web-Technologie. Okay.

01:13:34.262 --> 01:13:37.402
Das war jedenfalls mein letzter Kenntnisstand, als ich das geschaut habe,

01:13:37.502 --> 01:13:39.662
als ich nämlich ernsthaft überlegt habe, ich will aber.

01:13:41.462 --> 01:13:46.242
Ich glaube, dass es auch einfach echt nicht trivial ist, das zu implementieren,

01:13:46.322 --> 01:13:50.102
auch für die Browser-Engineers, und die auch, glaube ich, manchmal froh sind,

01:13:50.862 --> 01:13:57.542
Dinge mit Machen wir nicht irgendwie schließen zu können und von dannen zu ziehen.

01:13:58.222 --> 01:14:01.062
Nee, ich glaube, das könnten die. Ich glaube, das wäre technisch überhaupt kein

01:14:01.062 --> 01:14:03.502
Problem. Ich meine, du hast mit JavaScript implementierte Color Picker.

01:14:03.542 --> 01:14:05.302
Die könntest du theoretisch eins zu eins klauen.

01:14:05.422 --> 01:14:10.242
Wenn du in Chrome diese neuen Farbwerte, diese OK Lab und so debugst,

01:14:10.302 --> 01:14:13.262
dann kriegst du da drin einen neuen Farbpicker und der macht das alles und der

01:14:13.262 --> 01:14:15.882
zeigt dir auch eine Linie, dass du im RGB-Korridor bleibst.

01:14:16.082 --> 01:14:19.062
Die können das nicht nur, die haben das schon. Die machen es aber nicht,

01:14:19.122 --> 01:14:22.702
weil die genau wissen, alle Webseiten bis ans Ende aller Zeit unterstützen und

01:14:22.702 --> 01:14:25.722
das wird halt eben nicht so sein, dass... Ich hätte jetzt gedacht,

01:14:25.862 --> 01:14:27.342
Mastenopt-In halt einfach.

01:14:28.362 --> 01:14:29.602
Wie sieht das denn aus? Ja.

01:14:30.430 --> 01:14:35.470
Naja, keine Ahnung, so ein bisschen wie die das mit dem Radio und dem Switch-Attribut gemacht haben.

01:14:35.710 --> 01:14:39.170
Also, dass du dann eben einfach ein weiteres Attribut hast. Ach,

01:14:39.170 --> 01:14:41.890
diese Erfolgsgeschichte. Ja, ja, ja, dieses wunderbare Design.

01:14:42.990 --> 01:14:44.630
Die Folge habe ich gerade kürzlich gehört.

01:14:46.610 --> 01:14:48.410
Naja, es ist halt schon, was machst du, wenn du das nächste,

01:14:48.490 --> 01:14:50.630
wenn du das nächste, wenn du eine Switch-Variante erfindest,

01:14:50.790 --> 01:14:54.430
dann wird das halt irgendwie ein Switch-Attribut mit irgendwie einem Inam-Wert

01:14:54.430 --> 01:14:55.210
und der wird immer größer.

01:14:55.270 --> 01:14:58.310
Also, ist jetzt nicht ganz so unvorstellbar, wie ich das jetzt darstelle.

01:14:58.310 --> 01:15:01.350
Aber es ist natürlich so, sobald du das machst, sobald du halt irgendwie anfängst,

01:15:01.390 --> 01:15:05.830
irgendwas konfigurierbar zu machen, machst du halt das größte Fass voller ekelhafter

01:15:05.830 --> 01:15:07.310
Würmer auf, das du je gesehen hast.

01:15:08.270 --> 01:15:13.990
Ja, oder in dem Ding, was aufgeht in dem Picker, dass du da dann den Farbraum umstellen kannst.

01:15:14.270 --> 01:15:18.930
Wobei das ist auch, das darfst du da nicht machen, weil wenn deine Verarbeitung

01:15:18.930 --> 01:15:22.330
auf dem Server gar nicht ausgelegt ist auf diese neuen Farbräume, dann ist ja auch blöd.

01:15:22.350 --> 01:15:26.330
Also das musst du schon als Autor sozusagen reinopt innen.

01:15:27.210 --> 01:15:30.190
Genau, ich meine, das ist ja auch das Ding, der Farbpicker, der ja aufgeht,

01:15:30.210 --> 01:15:33.210
ist ja zumindest potenziell Betriebssystem definiert.

01:15:33.650 --> 01:15:37.410
Du kannst ja gar nicht annehmen, dass das Betriebssystem, dass da diesen Farbpicker

01:15:37.410 --> 01:15:39.790
aufmacht, also je nachdem, welcher Browser, welches Betriebssystem kommt,

01:15:39.890 --> 01:15:42.830
wo das ist, du kannst ja nicht davon ausgehen, dass das Betriebssystem überhaupt irgendwas ist.

01:15:42.830 --> 01:15:45.410
Das könnte ja theoretisch irgendwie so ein Industrie-PC sein,

01:15:45.490 --> 01:15:48.170
der angeschlossen ist an einen Geldautomaten oder an, keine Ahnung,

01:15:48.270 --> 01:15:49.970
einen Getränkeautomaten oder sowas.

01:15:51.050 --> 01:15:53.510
Du kannst halt nichts erwarten, du kannst von nichts ausgehen.

01:15:53.670 --> 01:15:58.210
Und da ist halt eben, das ist halt so das große Ding, was so für RGB spricht,

01:15:58.370 --> 01:15:59.710
so das geht halt nicht kaputt.

01:15:59.750 --> 01:16:03.470
Das ist halt eine bekannte Größe. Die bekannte Größe ist nicht besonders beeindruckend.

01:16:05.170 --> 01:16:10.390
Aber das ist halt eben das, was alle sprechen. Es ist halt möglicherweise für viele Fälle gut genug.

01:16:11.990 --> 01:16:14.890
Und so gegen das Farb-Color-Picker-Upgrade, was den Web-Schneid angeht,

01:16:14.890 --> 01:16:17.350
spricht ja immer auch das Argument, dass du genau das machen kannst,

01:16:17.410 --> 01:16:19.590
was der John gesagt hat, nämlich man nehme einen Haufen JavaScript,

01:16:19.870 --> 01:16:22.350
werfe ihn auf das Problem und siehe da, das Problem ist nicht mehr zu sehen.

01:16:22.750 --> 01:16:25.230
So, das kannst du ja immer machen. Das ist ja auch völlig okay.

01:16:27.045 --> 01:16:29.465
Aber wenn man halt versucht, die Fantasy zu vermeiden, so wie ich,

01:16:29.525 --> 01:16:32.765
dann ist das halt irgendwie als Argument so ein Mittel. Aber hey,

01:16:32.925 --> 01:16:34.205
dann nehme ich halt RGB, ist ja auch okay.

01:16:34.725 --> 01:16:38.825
Ja, und ich würde sagen, wir legen uns das einfach für in zehn Jahren auf Wiedervorlage.

01:16:39.965 --> 01:16:40.685
Zur Revision.

01:16:43.105 --> 01:16:49.865
1100 irgendwas. Jawoll. Dann gucken wir mal, wie es mit dem Verbreitungsgrad

01:16:49.865 --> 01:16:52.485
dieser Colorspaces dann mittlerweile aussieht.

01:16:53.225 --> 01:16:57.005
So machen wir das, dann holen wir dich aus der Rente. Für einen letzten Job musst du noch mal.

01:16:59.325 --> 01:17:04.445
Genau. Ja. Machen wir. Das klingt gut.

01:17:04.865 --> 01:17:08.725
Also wenn ich in zehn Jahren schon in Rente bin, bin ich eh glücklich.

01:17:08.905 --> 01:17:12.445
Dann könnte ich mich gerne rausholen. Dann haben wir es geschafft.

01:17:14.945 --> 01:17:19.765
Super. Vielleicht können wir abschließend noch kurz sagen, also du hast ja deinen

01:17:19.765 --> 01:17:23.625
Color Picker, den du gebaut hast, den werden wir auch verlinken.

01:17:23.685 --> 01:17:28.525
Wofür kann man den nutzen, den nutzt man in, ist das dann auch ein TypeOS 3,

01:17:29.265 --> 01:17:31.945
bezogenes Projekt, oder ist das gar nichts zu tun?

01:17:32.685 --> 01:17:37.465
Also Neos hat ja mit TypeOS 3 nicht wirklich viel zu tun. Du wolltest gerade

01:17:37.465 --> 01:17:38.885
sagen, du hast Jehova gesagt.

01:17:40.425 --> 01:17:43.845
Ich bin dankbar, dass es das Projekt gegeben hat, dem er viel losgestoßen,

01:17:43.925 --> 01:17:47.265
aber Neos ist ja quasi aus dem heraus entstanden.

01:17:48.045 --> 01:17:51.985
Ja, das ist ein Color Picker, wo natürlich auf dem aufbaut,

01:17:53.705 --> 01:17:59.545
aber ich glaube wenn man jetzt sagen würde man will das irgendwie sich selber wo einbauen,

01:18:00.245 --> 01:18:06.385
so viele Komponenten von Neos selber also verwendete Button und Icons gibt es

01:18:06.385 --> 01:18:09.805
ein paar Komponenten man müsste halt die Sachen ein bisschen ersetzen quasi

01:18:09.805 --> 01:18:16.865
aber das wäre jetzt nicht so wild also die Kerngeschichte quasi ist Neos unabhängig,

01:18:17.665 --> 01:18:21.645
hab dort auch mal mit StyleX da ein bisschen rumprobiert da dieses,

01:18:23.085 --> 01:18:27.125
CSS-Teil von Meta funktioniert ganz gut für so Sachen.

01:18:27.325 --> 01:18:30.545
Das klingt aber anschauenswert.

01:18:31.525 --> 01:18:37.445
Genau. Und ja, es ist eigentlich ein RGB-Color Picker, wo ich halt rausgesucht habe, wo.

01:18:39.415 --> 01:18:47.295
Nicht zu groß ist und dann noch ein bisschen halt die Umrecherei mit dem ColorJS nach OKLCH und ja.

01:18:47.515 --> 01:18:53.295
Genau, und den nutzt man aber idealerweise dann in Neos, wenn man irgendwie

01:18:53.295 --> 01:18:57.835
Customizable Themes oder sowas benutzt, oder?

01:18:58.235 --> 01:19:01.115
Genau, da gibt's ja x Anwendungsfälle, dass du sagen kannst,

01:19:02.495 --> 01:19:04.715
für was willst du einen Color Picker haben?

01:19:04.895 --> 01:19:07.235
Also, ganz viele Geschichten.

01:19:07.475 --> 01:19:10.955
Ja. Ist jetzt vor allem für die Geschichte sehr cool.

01:19:12.375 --> 01:19:19.015
Okay, vielleicht ist das ja auch tatsächlich was, was eine oder eine unserer

01:19:19.015 --> 01:19:22.115
Hörenden irgendwie gut gebrauchen kann.

01:19:22.215 --> 01:19:26.115
Deswegen wollte ich es noch mal kurz angesprochen haben.

01:19:26.775 --> 01:19:30.355
Genau. Und eben diesen OKLCH-Color Picker gibt es ja auch noch.

01:19:31.175 --> 01:19:35.155
Ich habe zuerst mit dem probiert und gedacht, vielleicht könnte ich den implementieren.

01:19:35.155 --> 01:19:39.395
Aber da habe ich gemerkt, das ist zu groß und zu fehleranfällig und man hat

01:19:39.395 --> 01:19:41.635
zu schnell eine Farbe definiert, wo gar nicht möglich ist.

01:19:42.415 --> 01:19:45.775
Deswegen habe ich da mal gesagt, ja gut, ich mache es jetzt einfach mal,

01:19:45.775 --> 01:19:47.675
bin auf der sicheren Seite, auf die Art und Weise.

01:19:48.955 --> 01:19:51.355
Aber dort kann man auch reinschauen, wie sie es gemacht haben.

01:19:52.435 --> 01:19:54.615
Mit den ganzen Grafiken und so weiter und so fort.

01:19:55.975 --> 01:19:59.255
Dieses Evil Martians Ding. Genau.

01:20:00.915 --> 01:20:03.275
Wir werden auf jeden Fall alles verlinken. Ich habe zwischendurch auch noch

01:20:03.275 --> 01:20:09.195
ein paar Sachen hier in die Links Spalte geworfen, die mir noch so zu dem Thema eingefallen sind.

01:20:10.595 --> 01:20:16.875
Genau, da könnt ihr euch dann auch nochmal in gedruckter Form oder digitaler

01:20:16.875 --> 01:20:19.655
Form durchfräsen, wenn euch das heute nicht gereicht hat.

01:20:21.235 --> 01:20:28.535
Dann vielen lieben Dank, John, dir, fürs mal wieder hier bei uns vorbeischauen

01:20:28.535 --> 01:20:31.195
und dieses coole Thema im Gepäck haben.

01:20:32.015 --> 01:20:36.775
Wir haben noch kein neues Thema immer mit dir. Ich hatte irgendwie im Sinn,

01:20:36.855 --> 01:20:39.775
dass wir vielleicht dich nochmal irgendwann in ein paar Wochen haben.

01:20:40.375 --> 01:20:43.455
Genau. Kann auch sein, aber davon wissen wir heute noch nichts.

01:20:44.835 --> 01:20:51.455
Wer weiß. Wer weiß. Genau. Vielen Dank. Liebe Grüße in die Schweiz. Viele Grüße nach Kiel.

01:20:52.155 --> 01:20:56.435
Und unseren Hörenden auch vielen Dank fürs Zuhören. Und bis nächste Woche.

01:20:57.075 --> 01:20:59.175
Dankeschön. Tschüssi. Tschüss. Tschüss.

01:21:00.400 --> 01:21:23.280
Music.

01:21:03.855 --> 01:21:16.435
Bis zum nächsten Mal.