Was macht oklch-skill?
OKLCH-Farbraum für Webprojekte. Konvertiere Hex/RGB/HSL in OKLCH, generiere Paletten, prüfe Kontraste, verwalte Gamut-Grenzen und erstelle Themes mit Tailwind v4. Ausgelöst durch Schlüsselwörter wie oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
Funktionen
- Farbkonvertierung: Konvertiere Farben zwischen Hex, RGB, HSL und OKLCH.
- Palettengenerierung: Erstelle harmonische Farbpaletten auf Basis eines Ausgangsfarbwerts.
- Kontrastprüfung: Berechne WCAG-Kontrastverhältnisse zwischen zwei Farben.
- Gamut-Handhabung: Erkenne und behebe Farben außerhalb des sRGB- oder Display-P3-Gamuts.
- Tailwind v4 Theme: Generiere ein Tailwind CSS v4 Theme auf Basis von OKLCH-Parametern.
Verwendung
Farbkonvertierung
Konvertiere eine Hex-Farbe nach OKLCH:
convert #ff6600 to oklch
Das Ergebnis sieht etwa so aus:
OKLCH: oklch(0.627 0.257 34.2)
sRGB: #ff6600
Palettenerstellung
Erstelle eine Palette aus einer OKLCH-Farbe:
generate palette from oklch(0.5 0.2 200)
Kontrast prüfen
Prüfe den Kontrast zwischen zwei Farben:
contrast ratio #ffffff and #333333
Tailwind v4 Theme
Erstelle ein Tailwind v4 Theme mit benutzerdefinierten OKLCH-Farben:
theme with tailwind v4 using oklch(0.7 0.15 150) as primary
API / Befehle
| Befehl | Beschreibung |
|---|---|
convert <farbe> to oklch | Konvertiert eine Farbe nach OKLCH |
oklch to <ziel> | Konvertiert OKLCH in einen anderen Farbraum |
generate palette from <farbe> | Erstellt eine Palette |
contrast <farbe1> and <farbe2> | Berechnet das Kontrastverhältnis |
gamut check <farbe> | Prüft, ob eine Farbe im aktuellen Gamut liegt |
theme tailwind v4 with <farbe> | Generiert ein Tailwind v4 Theme |
Beispiele
Beispiel 1: Dunkelmodus-Farben
Erzeuge dunkelmodus-taugliche Farben auf Basis einer hellen Primärfarbe:
dark mode colors from #1a73e8
Beispiel 2: Gamut-Korrektur
Korrigiere eine Farbe, die außerhalb des sRGB-Gamuts liegt:
gamut correct oklch(0.8 0.3 300) to srgb
Hinweise
- Der OKLCH-Farbraum ist wahrnehmungsorientiert, was bedeutet, dass gleiche Abstände in OKLCH in etwa gleichen wahrgenommenen Farbunterschieden entsprechen.
- Display P3 ist ein erweiterter Farbraum, der auf neueren Geräten verfügbar ist. OKLCH kann Farben außerhalb des sRGB-Gamuts darstellen.
- Tailwind v4 unterstützt OKLCH nativ, was eine nahtlose Integration ermöglicht.
Lizenz
Dieses Skill ist unter der MIT-Lizenz verfügbar. Siehe LICENSE für Details.