# Sync de palette Tailwind Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel. > Page canonique: https://elysiatools.com/fr/tools/tailwind-color-palette-sync - **Catégorie:** Development - **Mots-clés:** tailwind, config tailwind, palette, tokens, wcag, contraste, dark mode ## Présentation Transforme une liste de HEX en bloc `theme.extend.colors` — avec vérifs WCAG. **Entrée.** Un HEX par ligne. Préfixe optionnel : `brand: #3b82f6`. Sans nom → `color1`. **Schémas.** Échelle (50–950, 11 niveaux), nom unique ou imbrication. L'échelle interpole vers blanc/noir en HSL. **WCAG.** Chaque nuance étiquetée AAA (≥7), AA (≥4.5), AA-Large (≥3) ou Fail. **Dark mode.** Optionnel, seconde liste HEX → config séparée. **Maths.** Interpolation de luminosité HSL ; l'entrée ancre le niveau 500. ## Entrées - **Couleurs (un HEX par ligne, ou "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b - **Schéma de nommage** (select) - **Inclure les couleurs dark mode** (checkbox) - **Couleurs dark mode (optionnel, même format)** (textarea): brand: #60a5fa accent: #34d399 ## Quand l'utiliser - Lors de la configuration initiale du fichier tailwind.config.ts avec la charte graphique d'un projet. - Pour vérifier la conformité d'accessibilité WCAG de vos nuances de couleurs directement lors de la génération. - Pour créer rapidement des échelles de couleurs cohérentes (50 à 950) à partir d'une seule couleur de base HEX. ## Fonctionnement - Saisissez vos couleurs au format HEX (une par ligne, avec ou sans nom comme brand: #3b82f6). - Choisissez votre schéma de nommage : échelle complète (50-950), valeur unique ou structure imbriquée. - Activez si besoin l'option Dark Mode et renseignez les couleurs correspondantes pour le thème sombre. - Copiez le code généré pour votre configuration Tailwind et visualisez les indicateurs de contraste WCAG associés. ## Cas d'usage - Intégration rapide d'une charte graphique d'entreprise dans un projet Tailwind CSS. - Audit d'accessibilité des couleurs d'interface pour garantir la conformité aux normes WCAG. - Génération de palettes de couleurs harmonieuses avec des contrastes équilibrés pour le mode clair et le mode sombre. ## Questions fréquentes ### Comment nommer mes couleurs en entrée ? Écrivez une couleur par ligne sous la forme 'nom: #HEX' (ex: brand: #3b82f6). Sans nom, l'outil utilise automatiquement color1, color2, etc. ### Quels sont les schémas de nommage disponibles ? Vous pouvez choisir entre 'Échelle' (génère 11 niveaux de 50 à 950), 'Nom unique' (une seule valeur brute) ou 'Imbrication' (format objet imbriqué). ### Comment est calculée l'échelle de couleurs 50-950 ? L'outil utilise une interpolation de luminosité dans l'espace HSL. La couleur saisie sert de point d'ancrage pour le niveau 500. ### Comment fonctionne la validation WCAG intégrée ? L'outil calcule le rapport de contraste de chaque nuance par rapport au blanc et au noir, puis lui attribue un score (AAA, AA, AA-Large ou Fail). ### Puis-je générer des couleurs pour le mode sombre ? Oui, cochez l'option 'Inclure les couleurs dark mode' et saisissez vos codes HEX alternatifs dans le champ dédié. ## Outils associés - [Générateur d'idées de noms de domaine IA](https://elysiatools.com/fr/tools/ai-domain-name-idea-generator): Entrez des mots-clés de marque : l'IA génère jusqu'à 10 idées de domaine, en filtrant les déjà pris via DNS + RDAP. Pour entrepreneurs et développeurs. - [Auditeur de dépendances package.json](https://elysiatools.com/fr/tools/package-json-dependency-auditor): Audite un package.json pour l’hygiène des dépendances et la qualité des plages de versions, et peut inspecter l’arbre transitif depuis package-lock.json ou yarn.lock. Signale les doublons, wildcard/pré-version, clés non triées, métadonnées manquantes et dépendances runtime/dev mal classées. - [Convertisseur d'espaces colorimetriques](https://elysiatools.com/fr/tools/color-space-converter): Convertit une couleur entre HEX, RGB, HSL, CIELAB et Display-P3 avec sortie CSS et verification de gamme. - [Générateur et Analyseur JWK](https://elysiatools.com/fr/tools/jwk-generator): Génère des JSON Web Keys (JWK) pour RSA, EC (P-256/P-384/P-521/secp256k1) et OKP (Ed25519/Ed448/X25519/X448), ou analyse un JWK existant pour inspecter ses paramètres, empreinte et métadonnées - [Coach cycle time & throughput Kanban](https://elysiatools.com/fr/tools/kanban-cycle-time-throughput-coach): Importez des horodatages créé→commencé→résolu depuis un CSV (façon Jira ou simple) et obtenez les métriques de flux comme les lisent les coaches agile : percentiles de lead/cycle time, âge du WIP, débit par jour/semaine/mois, un diagramme de flux cumulé et une vérification de la loi de Little. - [Générateur de PKCE Code Verifier et Challenge](https://elysiatools.com/fr/tools/pkce-code-verifier-generator): Génère, valide et vérifie les paires code_verifier / code_challenge PKCE (RFC 7636) OAuth2 / OIDC. Trois modes : (1) générer une nouvelle paire depuis des octets aléatoires cryptographiques (256/384/512/768 bits), (2) auditer un verifier existant selon le RFC — longueur (43–128), charset \[A-Za-z0-9-._~\] et ≥256 bits d'entropie, et (3) vérifier une paire en recalculant BASE64URL(SHA256(verifier)). Construit en option l'URL complète de requête d'autorisation et le corps d'échange de token. Complète le nonce-generator générique (qui n'émet que la paire) avec l'audit de conformité RFC et la vérification de paire. - [Vérificateur d'en-têtes de sécurité](https://elysiatools.com/fr/tools/security-headers-checker): Audite les en-têtes de réponse HTTP pour la conformité de sécurité — analyse les en-têtes bruts que vous collez (sans réseau) et les note selon l'ensemble d'en-têtes sécurisés OWASP avec des vérifications au niveau valeur : HSTS max-age, CSP unsafe-inline/eval, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP/COEP/CORP et plus. Renvoie une note (A+ à F) plus des constatations par en-tête avec des recommandations prêtes à copier. - [Constructeur d’axes et d’instances de polices variables et de CSS font-variation-settings](https://elysiatools.com/fr/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Téléversez une police variable (TTF/OTF/WOFF/WOFF2) pour inspecter ses axes fvar et instances nommées, prévisualiser l’interpolation en direct dans le navigateur et générer un CSS font-variation-settings prêt à coller, les propriétés de haut niveau équivalentes et un bloc @font-face variable. ## Exemples - [Exemples de codes couleur](https://elysiatools.com/fr/samples/color-code): Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation - [Exemples Tailwind CSS](https://elysiatools.com/fr/samples/tailwind-css): Exemples Tailwind CSS - Framework CSS utility-first avec design responsive, composants et configurations personnalisées - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format