Schéma de couleurs web — tokens CSS sémantiques

Générez un schéma de couleurs web dans le navigateur. Choisissez un HEX de marque (teal d’exemple #0F6E8C), obtenez des neutres partagés, action/hover/soft/focus, des liens neutres, des couleurs de statut fixes, un aperçu chrome et des auto-contrôles AA ; puis copiez le CSS :root ou le JSON. Basé sur des règles — pas d’IA cloud ; rien n’est envoyé.

Thèmes de marque

Neutres et statuts partagés ; chaque thème n’écrase que les tokens dérivés de marque. Max. 4 thèmes.

Aperçu UI clair

Auto-contrôle de contraste (thème actif)

Primitifs (thème actif + neutres partagés)

Token	Valeur

Sémantique (thème actif)

Token	Valeur	Rôle

Comment ça marche

Saisissez jusqu’à quatre thèmes de marque (id + HEX). L’outil garde une échelle neutre partagée, dérive les tokens d’action par marque, mappe les rôles sémantiques (liens neutres et statuts fixes), peint un chrome clair, lance les auto-contrôles AA et permet de copier variables CSS ou JSON — le tout en local.

Règles à attendre

Couches de tokens, lien ≠ action, statuts indépendants, indices de contraste et confidentialité.

Les primitifs portent les neutres bruts et dérivés de marque. La sémantique nomme le but (bg, surface, link, action…). Les composants ne devraient référencer que la sémantique.
Marque → --action ; hover assombrit ~22 % ; soft ≈ 10 % alpha ; focus-ring ≈ 40 % alpha ; --bg est un neutre légèrement teinté.
Les liens mappent vers text / text-strong (neutre). N’attachez pas le --link par défaut à --action.
Danger / success / warning / info restent fixes entre thèmes pour que la marque ne remplace jamais la sémantique d’erreur.
Confidentialité : génération, aperçu et copie presse-papiers se font dans cet onglet. Aucune couleur de marque n’est envoyée.

Exemple

Chargez l’exemple (id teal, #0F6E8C). L’aperçu montre une surface blanche, un surlignage teal doux sur l’élément actif (sans barre gauche), des liens de corps neutres et une ligne danger rouge. La sémantique mappe --link sur la couleur de texte (pas --action). Copier CSS donne les neutres :root plus les overrides html[data-theme="teal"].

Bonnes situations

Chrome d’outil ou SaaS : coque claire lisible avec accents de marque sur sélection et focus, pas sur chaque lien.
Rebrand de landing : changez de marques via html[data-theme] en gardant le squelette neutre et les couleurs de statut.
Passage design→dev : collez des variables CSS :root plutôt qu’une liste HEX de captures.

Frequently asked questions

« Intelligent », est-ce de la génération IA ?

Ici, « intelligent » signifie des règles déterministes : neutres fixes, la marque dérive action/hover/soft/focus, les liens restent neutres et les statuts ne suivent jamais la marque. Aucun appel de modèle, aucun envoi — le calcul tourne dans cet onglet.

Pourquoi les liens n’utilisent-ils pas la marque ?

Les liens par défaut utilisent les couleurs de texte pour éviter un mur d’hyperliens de marque. La couleur de marque sert aux actions, à la sélection, aux anneaux de focus et aux fills soft légers.

Pourquoi les couleurs de statut ne suivent-elles pas le thème ?

Danger, success, warning et info restent fixes d’un thème à l’autre. Une marque ambre ne doit pas devenir la couleur d’erreur, sinon toute l’UI ressemble à une alerte.

Quand préférer Générer l’échelle de couleur de marque ?

Utilisez Générer l’échelle de couleur de marque pour une rampe 50–950 ou des listes HEX/HSL/OKLCH. Cette page livre un schéma sémantique clair complet (bg/surface/link/action/status) prêt à coller.

Jusqu’où va l’auto-contrôle de contraste ?

Les auto-contrôles couvrent quelques paires clés du thème actif. Pour des paires arbitraires ou AAA, ouvrez le vérificateur de contraste WCAG et collez le HEX d’un token.

Questions ou retours

Quelque chose n’est pas clair, cassé ou manquant ? Rédigez un message ci-dessous — nous lisons chaque note.