Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben: <table> <tr> <td style="background:hsl(201 50% 40%);color:white;padding:0.5em 3em;">blau</td> <td style="background:hsl(201 50% 40% /0.1);padding:0.5em 1em;"">hsl(201 50% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(44 75% 50%);padding:0.5em 3em;">gelb</td> <td style="background:hsl(44 75% 50% /0.1);padding:0.5em 1em;"">hsl(44 75% 50% /0.1)</td> </tr> <tr> <td style="background:hsl(13 96% 40%);color:white;padding:0.5em 3em;">rot</td> <td style="background:hsl(13 96% 40% /0.1);padding:0.5em 1em;"">hsl(13 96% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(80 45% 50%);padding:0.5em 3em;">grün</td> <td style="background:hsl(80 45% 50% /0.2);padding:0.5em 1em;"">hsl(80 45% 50% /0.2)</td> </tr> </table> Erste Reaktion unserer Mitglieder: **„Wo sind die Kommas?“** Schon seit längerem wurde die Schreibweise der Farbfunktionen so angepasst, dass Parameter innerhalb von CSS-Funktionen mit Leerzeichen getrennt werden. Ein optionaler Alphawert wird - wie oben gezeigt - nach einem Slash notiert. Auch unser SELF-Wiki verwendet bereits seit Februar 2022 nur noch die neue, einfachere Schreibweise! Zweite Reaktion: **„Warum ist der Alphawert bei Hellgrün anders?“** Ich hatte versucht, aus bestehenden HEX-Werten durch die Umrechnung in hsl() eine Systematik zu finden. Allerdings gibt es bei HSL, der Mischung aus Farbton (***H**ue*); Sättigung und Helligkeit (***L**ightness*) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der [wahrgenommenen Helligkeit](https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Helligkeit_in_HSL) übereinstimmen. # neue Farbräume Eigentlich jedem klar, aber dann doch wieder erwischt: Es gibt eben nicht **die** drei Grund- und x Sekundärfarben, die Farbnamen und die 16,7 Farben des RGB-Farbraums. In der Natur gibt viel mehr Farbtöne, auch das menschliche Auge kann mehr als den RGB-Farbraum erfassen. Die 8-Bit des RGB-Farbraums sind nur eine Festlegung. Um Farben besser darstellen zu können, gibt es nun die Möglichkeit weitere Farbräume in CSS zu nutzen. Unter den vielfältigen Möglichkeiten sticht besonders die oklch()-Funktion hervor, die im [OKLAB-Farbraum](https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIELAB_Farbmodelle) Farben durch ihre Bestandteile … * ***L**ightness* (Helligkeit) * ***C**hroma* (relative Buntwirkung) * ***H**ue* (Farbton) definiert. **Anmerkung:** Bei der Überarbeitung der Wikiseiten standen wir vor dem Problem, dass unsere Desktop-Monitore das volle Spektrum der Farben noch nicht ausnutzen und wir zum Testen immer wieder unsere fortschrittlicheren Mobilgeräte nutzen mussten. Auch wird die mächtige relative Syntax noch nicht im Firefox unterstützt. Trotzdem ist es eine interessante Entwicklung mit neuen Möglichkeiten! Entdecke die Welt der Farben: * [**Farbe**](https://wiki.selfhtml.org/wiki/Farbe) - [**Farbangaben**](https://wiki.selfhtml.org/wiki/Farbe/Farbangaben) Farbnamen, currentColor, etc - [**Farbmodelle**](https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle) rgb(), HEX, hsl() und das neue oklch() - [**Farbkonzept**](https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept) vom Farbkreis über die Harmonielehre zur Farbpalette - [**Farben und Kontraste**](https://wiki.selfhtml.org/wiki/Farbe/Farben_und_Kontraste) der Klassiker von Jan Eric Hellbusch mit vielen Beispielen! **PS**: Im Zuge der Überarbeitung haben wir auch unsere Beispielvorlage um eine Direktansicht ergänzt. Vielen Dank an @Rolf B

Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben: <table> <tr> <td style="background:hsl(201 50% 40%);color:white;padding:0.5em 3em;">blau</td> <td style="background:hsl(201 50% 40% /0.1);padding:0.5em 1em;"">hsl(201 50% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(44 75% 50%);padding:0.5em 3em;">gelb</td> <td style="background:hsl(44 75% 50% /0.1);padding:0.5em 1em;"">hsl(44 75% 50% /0.1)</td> </tr> <tr> <td style="background:hsl(13 96% 40%);color:white;padding:0.5em 3em;">rot</td> <td style="background:hsl(13 96% 40% /0.1);padding:0.5em 1em;"">hsl(13 96% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(80 45% 50%);padding:0.5em 3em;">grün</td> <td style="background:hsl(80 45% 50% /0.2);padding:0.5em 1em;"">hsl(80 45% 50% /0.2)</td> </tr> </table> Erste Reaktion unserer Mitglieder: **„Wo sind die Kommas?“** Schon seit längerem wurde die Schreibweise der Farbfunktionen so angepasst, dass Parameter innerhalb von CSS-Funktionen mit Leerzeichen getrennt werden. Ein optionaler Alphawert wird - wie oben gezeigt - nach einem Slash notiert. Auch unser SELF-Wiki verwendet nur noch die neue, einfachere Schreibweise. Zweite Reaktion: **„Warum ist der Alphawert bei Hellgrün anders?“** Ich hatte versucht, aus bestehenden HEX-Werten durch die Umrechnung in hsl() eine Systematik zu finden. Allerdings gibt es bei HSL, der Mischung aus Farbton (***H**ue*); Sättigung und Helligkeit (***L**ightness*) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der [wahrgenommenen Helligkeit](https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Helligkeit_in_HSL) übereinstimmen. Im CSS Color Module