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é.

Elysia Tools

Navigation mobile

Development

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.

Détails

Ce que cet outil vous aide à faire

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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Palette de marque avec échelle complète

Deux couleurs de marque en échelles 11 niveaux avec WCAG, format imbriqué.

{
  "type": "html"
}

Tokens à valeur unique + dark mode

Trois couleurs en tokens uniques, avec jeu dark mode.

{
  "type": "html"
}

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

4 réglages

ContenuCollez ou saisissez les valeurs principales.2

Couleurs (un HEX par ligne, ou "name: HEX")textareaRequisCouleurs dark mode (optionnel, même format)textareaOptionnel

RéglagesAjustez formats, plages, nombres et modes.1

Schéma de nommageselectOptionnel

OptionsActivez ou désactivez les comportements optionnels.1

Inclure les couleurs dark modecheckboxOptionnelActivé si coché

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Sync de palette Tailwind

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Génération d'une échelle de marque imbriquée

2. Configuration de couleurs uniques avec mode sombre

FAQ

Exemples de codes couleur

Tailwind CSS Samples

Exemples de Traitement d'Images Web Python

Exemples de Traitement d'Images Android Java

Générateur d'idées de noms de domaine IA

Auditeur de dépendances package.json

Convertisseur d'espaces colorimetriques

Générateur et Analyseur JWK

Outils d encodage et de conversion audio

Outils de conversion de formats d image et d export anime

Outils d interchange JSON et de traduction de formats

Outils de conversion d'espaces colorimetriques pour web et impression