Réponse directe
Un constructeur de système de couleurs transforme les couleurs de marque immuables en échelles primitives 50–950 et en rôles sémantiques clair/sombre éditables localement dans le navigateur sans téléversement de données.
Comment utiliser cet outil
Saisir les couleurs sources
Collez des valeurs HEX, oklch() ou color(display-p3 …) et associez chaque couleur à Primary, Neutral ou une autre famille avec un ancrage 400/500/600.
Créer le projet
Générez les échelles requises Primary et Neutral, les échelles d'état et les correspondances sémantiques sans modifier les ancres verrouillées.
Modifier et prévisualiser
Ajustez les échelons ou les associations sémantiques et prévisualisez les boutons, cartes, formulaires et états en mode clair et sombre.
Ancres immuables et couches sémantiques
Les couleurs sources demeurent des ancres précises sur l'échelon de l'échelle sélectionné. Les échelles primitives comportent des niveaux de 50 à 950 par famille. Les rôles sémantiques (arrière-plan, surface, texte, primaire, texte sur primaire, bordure, focus) référencent les primitives séparément pour les thèmes clairs et sombres afin de dissocier le sens fonctionnel des palettes brutes.
- Les valeurs var() non résolues, la syntaxe de couleur relative et color-mix() sont rejetées avec des messages d'erreur explicites.
- Les échelles Primary et Neutral sont obligatoires ; Secondary et Accent sont facultatives ; Success, Warning et Destructive sont toujours incluses.
- L'analyse et la génération s'exécutent entièrement côté client avec sauvegarde locale automatique, sans compte ni envoi.
Exemples pratiques
Système primaire bleu de marque
Entrée : Source : #2563eb comme Primary @ 500
Sortie : Échelle Primary 50–950 + rôles clair/sombre (primary, on-primary, focus) prêts pour le vérificateur
Crée un document de transmission complet à partir d'une seule couleur sans multiplier les pages de conversion partielles.
Limites
- N'invente pas de valeurs pour les variables CSS non résolues ou color-mix() ; fournissez des valeurs conformes à CSS Color 4.
- Les conseils esthétiques sur l'échelle sont des indications heuristiques, pas une certification de conformité légale.
Questions fréquentes
Puis-je passer au vérificateur sans exporter ?
Oui. Le Tool Island partagé conserve le même document en mémoire, vous permettant d'alterner entre les étapes sans rechargement ni perte d'état.
Le constructeur envoie-t-il mes couleurs à un serveur ?
Non. Les couleurs, échelles et fichiers de projet restent dans la mémoire et le stockage local du navigateur. Rien n'est envoyé à un serveur tiers.
Comment fonctionne la navigation au clavier entre les étapes ?
Utilisez les onglets d'étape pour naviguer entre constructeur, vérificateur et générateur de jetons. Le focus reste visible et l'URL canonique ne change pas.
Références et normes faisant autorité
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.