Wunderschöne CSS-Verläufe ohne „graue Dead Zone“ erstellen
(joshwcomeau.com)- Wenn man einen linearen Verlauf von Gelb zu Blau erstellt, entsteht in der Mitte eine „gray dead zone“
→ Das liegt daran, dass der CSS-linear-gradient-Algorithmus den Farbwert der Pixel über den mathematischen Mittelwert von RGB bestimmt
→ Im RGB-Farbraum gilt: Wenn alle RGB-Werte gleich sind, ergibt sich immer eine Graustufenfarbe
-
Wenn stattdessen in HSL (Hue / Saturation / Lightness) gemittelt wird, entsteht keine graue Dead Zone
-
Wenn man Verläufe aber einfach nur in HSL erzeugt, wirken sie „zu hell und zu vivid“, weil „die menschliche Wahrnehmung nicht berücksichtigt wird“
→ Farben mit derselben Helligkeit, bei denen Gelb dennoch heller wahrgenommen wird
-
Deshalb kann es besser sein, Modi wie HCL zu verwenden, die auf Basis des menschlichen Sehens modelliert wurden
-
Das Problem ist, dass CSS bislang noch keine Möglichkeit bietet, Farbmodi wie HSL/HCL explizit anzugeben
→ Da CSS-Gradienten nicht auf genau zwei Farben beschränkt sind, lässt sich das umgehen, indem man 10 oder mehr Zwischenfarben angibt
- Mit dem zusammen veröffentlichten Gradient Generator lassen sich CSS-Verläufe auf Basis von Farbmodi wie LRGB/HSL/HSV/HCL erzeugen und verwenden
1 Kommentare
Inhalte zu HSL habe ich in einem früheren Beitrag zusammengefasst.