Die wissenschaftliche Methode: Warum HSL?
Viele Farbwähler verwenden den RGB-Farbraum, der hervorragend für Bildschirme geeignet ist, aber für Menschen wenig intuitiv. Kasuality verwendet den HSL-Farbraum (Hue, Saturation, Lightness) als Steuerungsschnittstelle.
- Hue (Farbton): Die reine Essenz der Farbe (z.B. 0° ist Rot, 120° ist Grün).
- Saturation (Sättigung): Die Intensität der Farbe. 100% ist lebhaft, 0% ist grau.
- Lightness (Helligkeit): Die Menge an Licht. Entscheidend für die Erstellung von Tönungen und die Kontrastberechnung.
Dank dieses Ansatzes berechnet Kasuality Harmonien mathematisch, indem nur der H-Wert rotiert. Unter der Haube haben wir jedoch eine fundamentale Neuerung integriert.
Wahrnehmungskonsistenz: Die OKLCH-DNA
Während HSL uns die kreative Richtung vorgibt, nutzt unsere Rendering-Engine den **OKLCH**-Farbraum. Dies garantiert, dass jede Nuance vom menschlichen Auge mit identischer Intensität wahrgenommen wird und korrigiert die Verzerrungen alter Systeme.
Natives Wide Gamut (P3)
Entwickelt für moderne Displays. Wir generieren Farben, die alte HEX/RGB-Systeme nicht darstellen können, und wahren dabei die Kompatibilität durch Progressive Enhancement.
Perfekte Verläufe
Der OKLCH-Algorithmus eliminiert graue "tote Zonen" in der Mitte von Verläufen und garantiert flüssige, lebendige Übergänge, die der Physik des Lichts entsprechen.
Harmonien entschlüsseln
Im Abschnitt "Harmonie" visualisiert unser Algorithmus geometrische Beziehungen auf dem Farbkreis:
Komplementär
Zwei gegenüberliegende Farben (180° Abstand). Erzeugen maximalen visuellen Kontrast und eine energetische Wirkung. Ideal für CTA.
Analog
Benachbarte Farben auf dem Kreis. Teilen die gleiche emotionale "Temperatur" und sind sehr entspannend für das Auge.
Triadisch
Drei gleichmäßig verteilte Farben (120°). Bieten eine lebendige Balance, die Harmonie und Unterscheidung zwischen den Elementen bewahrt.
Goldener Schnitt (Aurea)
Harmonie basierend auf dem Goldenen Schnitt (φ) und dem Winkel von ≈ 137,5°. Erzeugt Paletten, die von Natur aus organisch und ästhetisch wirken.
Hybride Barrierefreiheit: WCAG 2.1 und APCA
Kasuality beschränkt sich nicht auf die Gegenwart, sondern antizipiert die Zukunft des Webs (WCAG 3). Unsere Kontrast-Engine arbeitet auf zwei Ebenen gleichzeitig:
- Ebene 1 - Gesetzlicher Standard (WCAG 2.1): Wir berechnen das klassische mathematische Verhältnis AA (4.5:1) und AAA (7:1). Dies ist der aktuelle gesetzliche Standard.
- Ebene 2 - Wahrnehmungswissenschaft (APCA): Wir integrieren den neuen Advanced Perceptual Contrast Algorithm. Im Gegensatz zum alten System berücksichtigt APCA (Wert $L^c$), wie das menschliche Auge Text tatsächlich wahrnimmt.
- Simulation: Anwenden von SVG-Filtern für Farbenblindheit und Testen der Darstellung bei direktem Sonnenlicht oder im Nachtmodus.
Anleitung zu den 5 Modi
Design Tokens Architekt & W3C Export (PRO)
Kasuality generiert nicht nur visuelle Farbkombinationen, sondern bietet eine echte technische Infrastruktur für die UI-Entwicklung. Dieser Modus verwandelt Ihre "Startfarbe" in ein sofort einsatzbereites Enterprise Design System.
- Semantische Rollen: Die Engine berechnet automatisch die perfekten Nuancen für die Hauptaktion (Primary), den Oberflächenhintergrund (Surface), Rahmen (Borders) und Erfolgs-/Fehlerzustände.
- Zustandsberechnung (UX): Mathematische Generierung von Hover-, Pressed- und Disabled-Varianten durch wissenschaftliche Anpassung von Luminanz und Sättigung im OKLCH-Farbraum.
- Enterprise-Integration: Der JSON-Export entspricht dem globalen Standardformat der W3C Design Tokens Community Group (mit den Präfixen
$valueund$type). Die Infrastruktur ist nativ kompatibel mit Figma Tokens Studio und Style Dictionary.