- Der OKLCH-Farbraum basiert im Gegensatz zu herkömmlichem RGB oder HSL auf der menschlichen Wahrnehmung und ist dadurch präziser und besser vorhersagbar
- Er eignet sich gut für Design-Systeme und bessere Barrierefreiheit und ist besonders stark bei der Darstellung von Farben mit großem Farbraum wie P3, wodurch er besser mit modernen Geräten kompatibel ist
oklch() ist ein gut lesbares und intuitives Farbformat, das farbbasierte Manipulationen im Code vereinfacht. Es trennt Helligkeit (L), Chroma (C), Farbton (H) und Deckkraft (a)- Zusammen mit der CSS Colors 4/5-Spezifikation werden native Funktionen zur Farbmanipulation weiter ausgebaut, wodurch OKLCH eine zukunftsorientierte Wahl ist
- Auch das Ökosystem rund um Stylelint, Figma-Plugins, JS-Bibliotheken usw. entwickelt sich schnell weiter und wirkt sich positiv auf die Zusammenarbeit zwischen Design und Entwicklung aus
- Allerdings ist das Ökosystem noch nicht vollständig ausgereift, und einige Kombinationen sind möglicherweise nicht auf allen Monitoren sichtbar
OKLCH in Projekten einsetzen
- Vorhandene Farbwerte im CSS finden und in OKLCH konvertieren; dazu Figma-Plugins oder Konvertierungstools nutzen, um OKLCH-Farben zu kopieren und anzuwenden
- Farben im CSS in einer Palette aus Custom Properties organisieren, um Wiederverwendbarkeit und Wartbarkeit zu verbessern
- Mit Stylelint und Plugins die Verwendung anderer Farbformate als OKLCH automatisch erkennen und verhindern
- Stylelint in die CI-Umgebung integrieren, um Prüfungen auf Farbkonsistenz zu automatisieren
Vorteile nach der Umstellung auf OKLCH
- Bessere Lesbarkeit des Codes
- Vorhersagbare Farbanpassungen
- Aufbau eines Design-Systems auf Basis relativer Farben
- Unterstützung fortgeschrittener visueller Darstellungen wie P3-Farben
- Bessere Möglichkeiten zur Zusammenarbeit mit dem Design-Team
1 Kommentare
Es scheint, als würde sich die Benutzerfreundlichkeit beim Erstellen und Lesen von Sequenzen wie etwa bei DMX-Farbbeleuchtung deutlich verbessern.