Que fait oklch-skill ?
Espace colorimétrique OKLCH pour projets web. Convertir hex/rgb/hsl en oklch, générer des palettes, vérifier le contraste, gérer les limites de gamut et créer des thèmes avec Tailwind v4. Déclencheurs : oklch, conversion de couleur, génération de palette, ratio de contraste, gamut, display p3, jetons de design, dérive de teinte, chroma, couleurs de mode sombre.
Aperçu
Cette compétence vous aide à exploiter l'espace colorimétrique OKLCH – une méthode perceptuellement uniforme et intuitive pour définir les couleurs sur le web. Elle permet de convertir depuis les espaces conventionnels (hex, rgb, hsl), de générer des palettes cohérentes, de valider les ratios de contraste, de gérer les limites de gamut (sRGB, Display P3) et d'exporter des jetons de design adaptés à Tailwind CSS v4.
Fonctionnalités
- Conversion : Transformation de couleurs hexadécimales, RGB ou HSL vers OKLCH, et inversement.
- Génération de palettes : Création de gammes de couleurs harmonieuses avec contrôle de la teinte, de la chroma et de la luminosité.
- Vérification de contraste : Calcul des ratios de contraste selon les directives WCAG (AA/AAA).
- Gestion du gamut : Détection des couleurs hors gamut sRGB et projection dans l'espace cible (Display P3 ou sRGB) avec correction de la dérive de teinte.
- Jetons de design : Export de variables CSS ou de configurations Tailwind v4 (
tailwind.config) à partir des valeurs OKLCH. - Prise en charge des modes sombres : Adaptation automatique des couleurs pour le mode sombre tout en préservant l'harmonie initiale.
Utilisation
Conversion de couleur
Convertir #ff6600 en oklch
Réponse : oklch(0.643 0.182 34.5)
Génération de palette
Générer une palette de 5 couleurs en oklch avec une teinte de 240° et une chroma de 0.12
Vérification de contraste
Quel est le ratio de contraste entre oklch(0.9 0.02 180) et oklch(0.3 0.1 30) ?
Gestion du gamut
Vérifier si oklch(0.7 0.3 120) est dans le gamut sRGB. Sinon, projeter dans Display P3.
Export pour Tailwind v4
Générer une configuration Tailwind v4 avec ces couleurs OKLCH en jetons de design
Plateformes supportées
- Claude Code
- Cursor
- Codex
- Autres agents IA compatibles avec le format de compétence standard
Déclencheurs
| Mot-clé | Description |
|---|---|
| oklch | Toute mention de l'espace oklch |
| conversion de couleur | Conversion hex/rgb/hsl vers oklch |
| génération de palette | Création de gammes de couleurs |
| ratio de contraste | Calculs d'accessibilité |
| gamut | Gestion des limites de gamut |
| display p3 | Espace colorimétrique large |
| jetons de design | Export de configurations |
| dérive de teinte | Correction de teinte hors gamut |
| chroma | Contrôle de la saturation |
| couleurs de mode sombre | Adaptation pour le mode sombre |
Exemple complet
Convertis #3366cc en oklch, puis génère une palette de 3 nuances plus claires et 3 plus foncées, et enfin vérifie si le gris clair #f0f0f0 a un ratio de contraste suffisant (AA) avec le bleu foncé #1a1a2e.