:root {
--couleur-1: #203741;
--couleur-2: #315D6D;
--couleur-3: #6F929B;
--couleur-4: #C3D0D0;
--couleur-5: #ECEBE5;
}RÉPONSE DIRECTE
L’outil génère une base technique. Avant intégration, remplacez les noms numérotés par des tokens sémantiques et vérifiez chaque usage, état et thème.
De la palette aux tokens
Une variable comme --couleur-1 décrit une position dans la liste, pas son rôle. Dans un projet, préférez des noms tels que --surface-principale, --texte-fort, --action ou --bordure-discrete.
Cette couche sémantique permet de faire évoluer une teinte sans chercher chaque occurrence et de construire plusieurs thèmes avec les mêmes fonctions.
Prévoir les états et les thèmes
Une couleur d’action a besoin d’états survol, actif, focus et désactivé. Une couleur de texte doit être testée sur toutes les surfaces qu’elle rencontre. Documentez aussi les valeurs de secours et les composants autorisés.
Pour un thème sombre, ne renversez pas mécaniquement les valeurs. Recomposez la hiérarchie de clarté et contrôlez les contrastes.
- Nommer les rôles avant les nuances.
- Centraliser les états.
- Tester les couples, pas les couleurs isolées.
Garder une source de vérité
Versionnez le fichier de tokens et liez chaque changement à une décision de design ou d’accessibilité. Une valeur copiée depuis l’outil doit entrer dans ce circuit de validation avant la production.
Méthode et révision
Les calculs sont exécutés dans le navigateur à partir des valeurs saisies. Les limites propres à cet outil sont indiquées ci-dessus ; la méthode générale et les formules sont documentées dans le référentiel.
Révision : 21 août 2026 · Éditeur : Blue Painter SARL · Signaler une erreur.